Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • actionBar.toggledBackground#4babf233
  • activityBar.activeBorder#a3a3a3cc
  • activityBar.background#0f0f0f
  • activityBar.border#1f1f1f
  • activityBar.foreground#d4d4d4
  • activityBar.inactiveForeground#a3a3a3cc
  • activityBarBadge.background#a3a3a3cc
  • activityBarBadge.foreground#0f0f0f
  • badge.background#a3a3a3cc
  • badge.foreground#0f0f0f
  • breadcrumb.activeSelectionForeground#eeeeee33
  • breadcrumb.background#0d0d0d
  • breadcrumb.focusForeground#d4d4d4
  • breadcrumb.foreground#a3a3a3aa
  • breadcrumbPicker.background#0f0f0f
  • button.background#1f8fff
  • button.foreground#d4d4d4
  • button.hoverBackground#1f8fff
  • charts.blue#4babf2
  • charts.foreground#d4d4d4
  • charts.green#34c09d
  • charts.lines#a3a3a3aa
  • charts.orange#f28043
  • charts.purple#f24391
  • charts.red#db5a5a
  • charts.yellow#fccf3c
  • chat.editedFileForeground#4babf2
  • chat.requestBackground#171717
  • chat.requestBorder#1f1f1f
  • chat.slashCommandBackground#4babf21a
  • chat.slashCommandForeground#1f8fff
  • checkbox.background#171717
  • checkbox.border#a3a3a3cc
  • commentsView.resolvedIcon#a3a3a3aa
  • commentsView.unresolvedIcon#4babf2
  • debugIcon.breakpointDisabledForeground#a3a3a3aa
  • debugIcon.breakpointForeground#db5a5a
  • debugIcon.continueForeground#34c09d
  • debugIcon.pauseForeground#4babf2
  • debugIcon.startForeground#34c09d
  • debugIcon.stepOverForeground#4babf2
  • debugIcon.stopForeground#db5a5a
  • debugTokenExpression.boolean#5db1ff
  • debugTokenExpression.error#db5a5a
  • debugTokenExpression.name#71c9ff
  • debugTokenExpression.number#5fd4e0
  • debugTokenExpression.string#c48971
  • debugTokenExpression.value#d4d4d4
  • debugToolBar.background#0f0f0f
  • descriptionForeground#a3a3a3cc
  • diffEditor.insertedTextBackground#34c09d33
  • diffEditor.removedTextBackground#db5a5a33
  • dropdown.background#0f0f0f
  • dropdown.border#1f1f1f
  • dropdown.foreground#d4d4d4
  • dropdown.listBackground#171717
  • editor.background#0d0d0d
  • editor.findMatchBackground#fccf3c33
  • editor.findMatchHighlightBackground#fccf3c4d
  • editor.focusedStackFrameHighlightBackground#fccf3c1a
  • editor.foldBackground#eeeeee1a
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#eeeeee1a
  • editor.lineHighlightBackground#171717
  • editor.selectionBackground#eeeeee33
  • editor.selectionHighlightBackground#eeeeee1a
  • editor.stackFrameHighlightBackground#fccf3c0d
  • editor.wordHighlightBackground#34c09d0d
  • editor.wordHighlightStrongBackground#34c09d1a
  • editorBracketHighlight.foreground1#57cbdd
  • editorBracketHighlight.foreground2#34c09d
  • editorBracketHighlight.foreground3#f28043
  • editorBracketHighlight.foreground4#f24391
  • editorBracketHighlight.foreground5#fccf3c
  • editorBracketHighlight.foreground6#4babf2
  • editorBracketMatch.background#34c09d33
  • editorError.foreground#db5a5a
  • editorGroup.border#1f1f1f
  • editorGroupHeader.tabsBackground#0f0f0f
  • editorGroupHeader.tabsBorder#1f1f1f
  • editorGutter.addedBackground#34c09d
  • editorGutter.commentRangeForeground#a3a3a3aa
  • editorGutter.deletedBackground#db5a5a
  • editorGutter.foldingControlForeground#a3a3a3cc
  • editorGutter.modifiedBackground#4babf2
  • editorHint.foreground#34c09d
  • editorIndentGuide.activeBackground#ffffff4d
  • editorIndentGuide.activeBackground1#ffffff4d
  • editorIndentGuide.background#ffffff1a
  • editorIndentGuide.background1#ffffff1a
  • editorInfo.foreground#4babf2
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#8a9099
  • editorLineNumber.activeForeground#a3a3a3
  • editorLineNumber.foreground#a3a3a3aa
  • editorOverviewRuler.border#1f1f1f
  • editorStickyScroll.background#171717
  • editorStickyScrollHover.background#171717
  • editorWarning.foreground#f28043
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#0f0f0f
  • errorForeground#db5a5a
  • focusBorder#00000000
  • foreground#d4d4d4
  • gitDecoration.addedResourceForeground#34c09d
  • gitDecoration.conflictingResourceForeground#f28043
  • gitDecoration.deletedResourceForeground#db5a5a
  • gitDecoration.ignoredResourceForeground#a3a3a3aa
  • gitDecoration.modifiedResourceForeground#4babf2
  • gitDecoration.stageDeletedResourceForeground#db5a5a
  • gitDecoration.stageModifiedResourceForeground#4babf2
  • gitDecoration.submoduleResourceForeground#a3a3a3cc
  • gitDecoration.untrackedResourceForeground#57cbdd
  • inlineChat.background#0f0f0f
  • inlineChat.border#1f1f1f
  • inlineChat.shadow#1f1f1f1a
  • inlineChatInput.background#171717
  • inlineChatInput.border#1f1f1f
  • inlineChatInput.focusBorder#1f8fff
  • inlineChatInput.placeholderForeground#a3a3a3cc
  • input.background#171717
  • input.border#1f1f1f
  • input.foreground#d4d4d4
  • input.placeholderForeground#a3a3a3cc
  • inputOption.activeBackground#a3a3a3aa
  • inputValidation.errorBackground#db5a5a1a
  • inputValidation.errorBorder#db5a5a
  • inputValidation.errorForeground#db5a5a
  • inputValidation.infoBackground#4babf21a
  • inputValidation.infoBorder#4babf2
  • inputValidation.infoForeground#4babf2
  • inputValidation.warningBackground#f280431a
  • inputValidation.warningBorder#f28043
  • inputValidation.warningForeground#f28043
  • list.activeSelectionBackground#171717
  • list.activeSelectionForeground#d4d4d4
  • list.activeSelectionIconForeground#d4d4d4
  • list.dropBackground#4babf20d
  • list.errorForeground#db5a5a
  • list.focusBackground#171717
  • list.highlightForeground#1f8fff
  • list.hoverBackground#171717
  • list.hoverForeground#d4d4d4
  • list.inactiveFocusBackground#0f0f0f
  • list.inactiveSelectionBackground#171717
  • list.inactiveSelectionForeground#d4d4d4
  • list.warningForeground#f28043
  • menu.background#0f0f0f
  • menu.border#1f1f1f
  • menu.foreground#d4d4d4
  • menu.selectionBackground#4babf233
  • menu.separatorBackground#1f1f1f
  • merge.commonContentBackground#f243910d
  • merge.commonHeaderBackground#f243914d
  • merge.currentContentBackground#34c09d0d
  • merge.currentHeaderBackground#34c09d4d
  • merge.incomingContentBackground#4babf20d
  • merge.incomingHeaderBackground#4babf24d
  • mergeEditor.change.background#4babf21a
  • mergeEditor.change.word.background#4babf233
  • mergeEditor.conflict.handledFocused.border#a3a3a3aa
  • mergeEditor.conflict.handledUnfocused.border#a3a3a3aa
  • mergeEditor.conflict.unhandledFocused.border#f28043
  • mergeEditor.conflict.unhandledUnfocused.border#f28043
  • notebook.cellBorderColor#1f1f1f
  • notebook.cellHoverBackground#171717
  • notebook.cellInsertionIndicator#1f8fff
  • notebook.cellStatusBarItemHoverBackground#171717
  • notebook.cellToolbarSeparator#1f1f1f
  • notebook.editorBackground#0d0d0d
  • notebook.focusedCellBorder#1f8fff
  • notebook.focusedEditorBorder#1f8fff
  • notebook.outputContainerBackgroundColor#171717
  • notebook.selectedCellBackground#171717
  • notebook.selectedCellBorder#1f1f1f
  • notebookStatusErrorIcon.foreground#db5a5a
  • notebookStatusRunningIcon.foreground#1f8fff
  • notebookStatusSuccessIcon.foreground#34c09d
  • notificationCenterHeader.background#0f0f0f
  • notificationCenterHeader.foreground#a3a3a3aa
  • notifications.background#0f0f0f
  • notifications.border#1f1f1f
  • notifications.foreground#d4d4d4
  • notificationsErrorIcon.foreground#db5a5a
  • notificationsInfoIcon.foreground#4babf2
  • notificationsWarningIcon.foreground#f28043
  • panel.background#0f0f0f
  • panel.border#1f1f1f
  • panelInput.border#171717
  • panelTitle.activeBorder#a3a3a3cc
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#a3a3a3aa
  • peekViewEditor.background#0f0f0f
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0f0f0f
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#1f1f1f
  • pickerGroup.foreground#d4d4d4
  • ports.iconRunningProcessForeground#34c09d
  • problemsErrorIcon.foreground#db5a5a
  • problemsInfoIcon.foreground#4babf2
  • problemsWarningIcon.foreground#f28043
  • progressBar.background#1f8fff
  • quickInput.background#0f0f0f
  • quickInput.foreground#d4d4d4
  • quickInputList.focusBackground#171717
  • scrollbar.shadow#1f1f1f1a
  • scrollbarSlider.activeBackground#a3a3a3aa
  • scrollbarSlider.background#a3a3a31a
  • scrollbarSlider.hoverBackground#a3a3a3aa
  • settings.headerForeground#d4d4d4
  • settings.modifiedItemIndicator#a3a3a3cc
  • sideBar.background#0f0f0f
  • sideBar.border#1f1f1f
  • sideBar.foreground#a3a3a3
  • sideBarSectionHeader.background#0f0f0f
  • sideBarSectionHeader.border#1f1f1f
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#0f0f0f
  • statusBar.border#1f1f1f
  • statusBar.debuggingBackground#171717
  • statusBar.debuggingForeground#a3a3a3
  • statusBar.foreground#a3a3a3
  • statusBar.noFolderBackground#0f0f0f
  • statusBarItem.errorBackground#db5a5a
  • statusBarItem.errorForeground#0f0f0f
  • statusBarItem.prominentBackground#171717
  • statusBarItem.remoteBackground#fccf3c
  • statusBarItem.remoteForeground#0f0f0f
  • statusBarItem.remoteHoverBackground#0f0f0f
  • statusBarItem.remoteHoverForeground#a3a3a3
  • statusBarItem.warningBackground#f28043
  • statusBarItem.warningForeground#0f0f0f
  • tab.activeBackground#0d0d0d
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#a3a3a3cc
  • tab.activeForeground#d4d4d4
  • tab.border#1f1f1f
  • tab.hoverBackground#171717
  • tab.inactiveBackground#0f0f0f
  • tab.inactiveForeground#a3a3a3aa
  • tab.lastPinnedBorder#1f1f1f
  • tab.selectedBackground#0d0d0d
  • tab.selectedForeground#d4d4d4
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#1f1f1f
  • tab.unfocusedHoverBackground#0f0f0f
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#4babf2
  • terminal.ansiBrightBlack#a3a3a3aa
  • terminal.ansiBrightBlue#4babf2
  • terminal.ansiBrightCyan#57cbdd
  • terminal.ansiBrightGreen#34c09d
  • terminal.ansiBrightMagenta#f24391
  • terminal.ansiBrightRed#db5a5a
  • terminal.ansiBrightWhite#d4d4d4
  • terminal.ansiBrightYellow#fccf3c
  • terminal.ansiCyan#57cbdd
  • terminal.ansiGreen#34c09d
  • terminal.ansiMagenta#f24391
  • terminal.ansiRed#db5a5a
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#fccf3c
  • terminal.foreground#d4d4d4
  • terminal.inactiveSelectionBackground#eeeeee1a
  • terminal.selectionBackground#eeeeee33
  • testing.iconErrored#db5a5a
  • testing.iconFailed#db5a5a
  • testing.iconPassed#34c09d
  • testing.iconQueued#f28043
  • testing.iconSkipped#a3a3a3aa
  • testing.iconUnset#a3a3a3aa
  • testing.message.error.decorationForeground#db5a5a
  • testing.message.info.decorationForeground#4babf2
  • testing.runAction#34c09d
  • textBlockQuote.background#0f0f0f
  • textBlockQuote.border#1f1f1f
  • textCodeBlock.background#0f0f0f
  • textLink.activeForeground#4babf2
  • textLink.foreground#4babf2
  • textPreformat.foreground#a3a3a3aa
  • textSeparator.foreground#a3a3a3
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#a3a3a3
  • titleBar.border#171717
  • titleBar.inactiveBackground#0f0f0f
  • titleBar.inactiveForeground#a3a3a3aa
  • tree.indentGuidesStroke#171717
  • welcomePage.buttonBackground#171717
  • welcomePage.buttonHoverBackground#a3a3a3aa
  • widget.border#1f1f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#4a8a85
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, punctuation#8a9099
constant, entity.name.constant, variable.language, meta.definition.variable#a8e0eb
entity, entity.name#d4d4d4
variable.parameter.function#d4d4d4
entity.name.tag, tag.html#7ec46a
entity.other.attribute-name.html.meta.attribute.class.html#86d3b8
support.class.component, support.class.component.html, support.class.component.jsx, support.class.component.tsx, meta.tag.other.unrecognized.html.derivative entity.name.tag#22d3a8
entity.name.function#fccf3c
keyword, storage.type.class.jsdoc#ff6e6e
storage, storage.type#ff6e6e
support.type.builtin, constant.language.undefined, constant.language.null#7aa5e8
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#d4d4d4
string, string punctuation.section.embedded source, attribute.value#c48971
variable.other.object, variable.other.readwrite#cfe6ff
variable.other.object.property, variable.other.property#71c9ff
meta.function-call#fccf3c
punctuation.definition.string, punctuation.support.type.property-name#c4897199
support, support.type.property-name.toml#71c9ff
support.type.property-name.table.toml, support.type.property-name.array.toml#fccf3c
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#71c9ff
variable, identifier#cfe6ff
variable.other.constant#a8e0eb
support.type.primitive, entity.name.type#86d3b8
namespace#dc8be8
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#8a9099
keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.noexcept#ff6e6e
keyword.control.import#c490ff
invalid.broken#db5a5aitalic
invalid.deprecated#db5a5aitalic
invalid.illegal#db5a5aitalic
invalid.unimplemented#db5a5aitalic
carriage-return#0f0f0fitalic underline
message.error#db5a5a
string variable#c48971
source.regexp, string.regexp#cce0a8
constant.regexp#cce0a8
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#c48971
string.regexp constant.character.escape#fccf3c
support.constant#a8e0eb
constant.numeric, number#5fd4e0
keyword.other.unit#7aa5e8
constant.language.boolean, constant.language#5db1ff
meta.module-reference#1f8fff
meta.embedded, source.groovy.embedded, meta.embedded.assembly, source.coffee.embedded, punctuation.section.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python, meta.template.expression#d4d4d4
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff6e6e
meta.preprocessor, entity.name.function.preprocessor#ff6e6e
meta.preprocessor.string#c48971
meta.preprocessor.numeric#5fd4e0
string.tag, string.value#c48971
keyword.operator.plus.exponent, keyword.operator.minus.exponent#5fd4e0
storage.modifier, storage.modifier.import.java, storage.modifier.package.java#ff6e6e
variable.language.wildcard.java#d4d4d4
invalid#db5a5a
punctuation.definition.tag#8a9099
invalid.illegal.unrecognized-tag.htmlnormal
type.identifier#22d3a8
entity.other.attribute-name, support.type.property-name, support.type.vendored.property-name, meta.structure.dictionary.key.python#71c9ff
entity.other.attribute-name.html#b8d4ed
entity.other.attribute-name.html.meta.attribute.id.html, meta.attribute.id.html string.quoted#86d3b8
entity.name.tag.css, entity.name.tag.less#7ec46a
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#86d3b8
source.css variable, support.function.git-rebase#71c9ff
constant.sha.git-rebase, variable.other.enummember#a8e0eb
punctuation.definition.list.begin.markdown#f28043
punctuation.definition.quote.begin.markdown#4a8a85
markup.heading, markup.heading entity.name#fccf3cbold
markup.quote#7eb6ff
markup.italic#d4d4d4italic
markup.bold#d4d4d4bold
strongbold
emphasisitalic
markup.underlineunderline
markup.strikethroughstrikethrough
markup.raw#7eb6ff
markup.inline.raw#7eb6ff
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#c48971
markup.underline.link.markdown, markup.underline.link.image.markdown#a3a3a3ccunderline
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#db5a5a
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#34c09d
markup.changed, punctuation.definition.changed#f28043
markup.ignored, markup.untracked#a3a3a3aa
meta.diff.range#f24391bold
meta.diff.header#4babf2
meta.separator#4babf2bold
meta.output#4babf2
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#a3a3a3aa
brackethighlighter.unmatched#db5a5a
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#ff6e6eitalic
meta.attribute.rust, punctuation.brackets.attribute.rust, meta.attribute.rust entity.name.function#d39d91
entity.name.macro.rust, entity.name.function.macro.rust, support.macro.rust#fccf3c
entity.name.namespace.rust, entity.name.module.rust#dc8be8
storage.type.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.modifier.const.rust#ff6e6e
entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust#22d3a8
keyword.import.go, keyword.package.go, keyword.function.go, keyword.var.go#ff6e6e
entity.name.import.go, entity.name.package.go#dc8be8
entity.name.label.go#a8e0eb
support.type.builtin.go#7aa5e8
support.class.component.jsx, support.class.component.tsx, entity.name.tag.jsx support.class.component, entity.name.tag.tsx support.class.component#22d3a8
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.DCL.sql, keyword.other.LUW.sql, keyword.other.create.sql, keyword.other.alter.sql, keyword.other.alias.sql, keyword.other.sql, keyword.other.authorization.sql, keyword.other.data-integrity.sql, keyword.other.object-comments.sql, keyword.other.cte.sql, storage.modifier.sql, storage.type.sql#7aa5e8
punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx#8a9099
meta.function.decorator.python, meta.function.decorator.python entity.name.function, meta.function.decorator.python support.function, punctuation.definition.decorator.python#d39d91
support.type.exception.python#22d3a8
storage.type.string.python, storage.type.format.python#c4897199
support.type.property-name.json#71c9ff
storage.modifier.specifier.cpp, storage.type.modifier.cpp, meta.template.cpp#ff6e6e
entity.name.scope-resolution.cpp, entity.name.namespace.cpp#dc8be8
variable.other.normal.shell, variable.other.special.shell#cfe6ff
punctuation.definition.variable.shell#8a9099
Jannchie Code Theme by Jannchie - VS Code Theme