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.

  • activityBar.activeBackground#6D8A6612
  • activityBar.activeBorder#6D8A66
  • activityBar.background#181A17
  • activityBar.foreground#6D8A66
  • activityBar.inactiveForeground#8A8579
  • activityBarBadge.background#6D8A66
  • activityBarBadge.foreground#181A17
  • badge.background#6D8A66
  • badge.foreground#181A17
  • breadcrumb.activeSelectionForeground#6D8A66
  • breadcrumb.background#181A17
  • breadcrumb.focusForeground#D5D0C5
  • breadcrumb.foreground#8A8579
  • breadcrumbPicker.background#222420
  • button.background#6D8A66
  • button.foreground#181A17
  • button.hoverBackground#7D9A76
  • button.secondaryBackground#2A2C28
  • button.secondaryForeground#D5D0C5
  • button.secondaryHoverBackground#3A3C38
  • diffEditor.insertedLineBackground#8BA38212
  • diffEditor.insertedTextBackground#8BA38218
  • diffEditor.removedLineBackground#A8736F12
  • diffEditor.removedTextBackground#A8736F18
  • dropdown.background#222420
  • dropdown.border#2A2C28
  • dropdown.foreground#D5D0C5
  • editor.background#181A17
  • editor.findMatchBackground#B0A08045
  • editor.findMatchHighlightBackground#B0A08028
  • editor.findRangeHighlightBackground#6D8A6618
  • editor.foldBackground#22242045
  • editor.foreground#D5D0C5
  • editor.hoverHighlightBackground#6D8A6618
  • editor.lineHighlightBackground#22242045
  • editor.lineHighlightBorder#22242000
  • editor.rangeHighlightBackground#6D8A6612
  • editor.selectionBackground#6D8A6635
  • editor.selectionHighlightBackground#6D8A6620
  • editor.wordHighlightBackground#9A8CA825
  • editor.wordHighlightStrongBackground#9A8CA840
  • editorBracketHighlight.foreground1#6D8A66
  • editorBracketHighlight.foreground2#6A8A8A
  • editorBracketHighlight.foreground3#B0A080
  • editorBracketHighlight.foreground4#9A8CA8
  • editorBracketHighlight.foreground5#7A9189
  • editorBracketHighlight.foreground6#8BA382
  • editorBracketHighlight.unexpectedBracket.foreground#A8736F
  • editorCursor.foreground#6D8A66
  • editorError.foreground#A8736F
  • editorGroup.border#2A2C28
  • editorGroup.dropBackground#6D8A6625
  • editorGroupHeader.tabsBackground#141512
  • editorGutter.addedBackground#8BA382
  • editorGutter.deletedBackground#A8736F
  • editorGutter.modifiedBackground#6A8A8A
  • editorHoverWidget.background#222420
  • editorHoverWidget.border#2A2C28
  • editorInfo.foreground#6A8A8A
  • editorLineNumber.activeForeground#6D8A66
  • editorLineNumber.foreground#5A544D
  • editorLink.activeForeground#6A8A8A
  • editorOverviewRuler.addedForeground#8BA38270
  • editorOverviewRuler.border#181A17
  • editorOverviewRuler.deletedForeground#A8736F70
  • editorOverviewRuler.errorForeground#A8736F
  • editorOverviewRuler.infoForeground#6A8A8A
  • editorOverviewRuler.modifiedForeground#6A8A8A70
  • editorOverviewRuler.selectionHighlightForeground#6D8A6670
  • editorOverviewRuler.warningForeground#B5917A
  • editorOverviewRuler.wordHighlightForeground#9A8CA870
  • editorOverviewRuler.wordHighlightStrongForeground#9A8CA890
  • editorSuggestWidget.background#222420
  • editorSuggestWidget.foreground#D5D0C5
  • editorSuggestWidget.highlightForeground#6D8A66
  • editorSuggestWidget.selectedBackground#6D8A6635
  • editorWarning.foreground#B5917A
  • editorWhitespace.foreground#2A2C2870
  • editorWidget.background#222420
  • editorWidget.border#2A2C28
  • errorForeground#A8736F
  • focusBorder#6D8A6680
  • foreground#D5D0C5
  • gitDecoration.conflictingResourceForeground#B5917A
  • gitDecoration.deletedResourceForeground#A8736F
  • gitDecoration.ignoredResourceForeground#5A544D
  • gitDecoration.modifiedResourceForeground#6A8A8A
  • gitDecoration.stageModifiedResourceForeground#9A8CA8
  • gitDecoration.untrackedResourceForeground#8BA382
  • input.background#222420
  • input.border#2A2C28
  • input.foreground#D5D0C5
  • input.placeholderForeground#8A8579
  • inputOption.activeBorder#6D8A66
  • inputValidation.errorBorder#A8736F
  • inputValidation.infoBorder#6A8A8A
  • inputValidation.warningBorder#B5917A
  • list.activeSelectionBackground#6D8A6645
  • list.activeSelectionForeground#E5E0D5
  • list.dropBackground#6D8A6625
  • list.errorForeground#A8736F
  • list.focusBackground#6D8A6635
  • list.highlightForeground#8BA382
  • list.hoverBackground#22242080
  • list.inactiveSelectionBackground#2A2C2845
  • list.warningForeground#B5917A
  • minimap.errorHighlight#A8736F70
  • minimap.findMatchHighlight#B0A08070
  • minimap.selectionHighlight#6D8A6670
  • minimap.warningHighlight#B5917A70
  • notificationCenter.border#2A2C28
  • notificationCenterHeader.background#222420
  • notificationCenterHeader.foreground#D5D0C5
  • notificationLink.foreground#6A8A8A
  • notifications.background#222420
  • notifications.border#2A2C28
  • notifications.foreground#D5D0C5
  • panel.background#141512
  • panel.border#2A2C28
  • panelTitle.activeBorder#6D8A66
  • panelTitle.activeForeground#D5D0C5
  • panelTitle.inactiveForeground#8A8579
  • peekView.border#6D8A66
  • peekViewEditor.background#181A17
  • peekViewEditor.matchHighlightBackground#B0A08045
  • peekViewResult.background#141512
  • peekViewResult.fileForeground#D5D0C5
  • peekViewResult.lineForeground#B5B0A5
  • peekViewResult.matchHighlightBackground#B0A08045
  • peekViewResult.selectionBackground#6D8A6635
  • peekViewResult.selectionForeground#E5E0D5
  • peekViewTitle.background#222420
  • peekViewTitleDescription.foreground#8A8579
  • peekViewTitleLabel.foreground#D5D0C5
  • progressBar.background#6D8A66
  • quickInput.background#222420
  • quickInput.foreground#D5D0C5
  • quickInputList.focusBackground#6D8A6635
  • quickInputTitle.background#181A17
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#6D8A6670
  • scrollbarSlider.background#5A544D40
  • scrollbarSlider.hoverBackground#5A544D60
  • selection.background#6D8A6635
  • settings.checkboxBackground#222420
  • settings.checkboxBorder#2A2C28
  • settings.checkboxForeground#D5D0C5
  • settings.dropdownBackground#222420
  • settings.dropdownBorder#2A2C28
  • settings.dropdownForeground#D5D0C5
  • settings.headerForeground#D5D0C5
  • settings.modifiedItemIndicator#6D8A66
  • settings.numberInputBackground#222420
  • settings.numberInputBorder#2A2C28
  • settings.numberInputForeground#D5D0C5
  • settings.textInputBackground#222420
  • settings.textInputBorder#2A2C28
  • settings.textInputForeground#D5D0C5
  • sideBar.background#141512
  • sideBar.foreground#B5B0A5
  • sideBarSectionHeader.background#222420
  • sideBarSectionHeader.border#2A2C28
  • sideBarTitle.foreground#D5D0C5
  • statusBar.background#141512
  • statusBar.debuggingBackground#6D8A66
  • statusBar.debuggingForeground#181A17
  • statusBar.foreground#B5B0A5
  • statusBar.noFolderBackground#222420
  • statusBar.noFolderForeground#B5B0A5
  • statusBarItem.hoverBackground#2A2C28
  • statusBarItem.prominentBackground#6D8A66
  • statusBarItem.prominentHoverBackground#7D9A76
  • statusBarItem.remoteBackground#6D8A66
  • statusBarItem.remoteForeground#181A17
  • tab.activeBackground#181A17
  • tab.activeBorderTop#6D8A66
  • tab.activeForeground#D5D0C5
  • tab.border#141512
  • tab.hoverBackground#222420
  • tab.inactiveBackground#141512
  • tab.inactiveForeground#8A8579
  • terminal.ansiBlack#222420
  • terminal.ansiBlue#6A8A8A
  • terminal.ansiBrightBlack#5A544D
  • terminal.ansiBrightBlue#7A9A9A
  • terminal.ansiBrightCyan#8AA199
  • terminal.ansiBrightGreen#9BB392
  • terminal.ansiBrightMagenta#AA9CB8
  • terminal.ansiBrightRed#B8837F
  • terminal.ansiBrightWhite#E5E0D5
  • terminal.ansiBrightYellow#C5A18A
  • terminal.ansiCyan#7A9189
  • terminal.ansiGreen#8BA382
  • terminal.ansiMagenta#9A8CA8
  • terminal.ansiRed#A8736F
  • terminal.ansiWhite#D5D0C5
  • terminal.ansiYellow#B5917A
  • terminal.background#181A17
  • terminal.foreground#D5D0C5
  • titleBar.activeBackground#141512
  • titleBar.activeForeground#D5D0C5
  • titleBar.inactiveBackground#141512
  • titleBar.inactiveForeground#8A8579

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6D8A66
comment, punctuation.definition.comment#5A544Ditalic
comment keyword.codetag.notation, comment.block.documentation keyword, storage.type.class.jsdoc#9A8CA8
comment.block.documentation variable.other, comment.block.documentation entity.name.type#6A8A8Aitalic
string#D0C5B5
punctuation.definition.string.begin, punctuation.definition.string.end#C0B5A5
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6D8A66
meta.template.expression#D5D0C5
constant, variable.other.constant#B0A080
constant.numeric#9A8CA8
constant.language.boolean#8BA382
constant.language.null, constant.language.undefined#8BA382italic
keyword#6D8A66
storage.type, storage.modifier#6D8A66italic
keyword.control#6D8A66
keyword.control.import, keyword.control.export, keyword.control.from#6D8A66italic
entity.name.function, meta.function-call#7A9189
variable.parameter#B0A080italic
storage.type.function.arrow#6D8A66
entity.name.type.class, entity.name.class#6A8A8Abold
entity.name.type.interface#6A8A8Aitalic
entity.name.type, support.type#6A8A8Aitalic
entity.name.type.parameter#B0A080
variable#D5D0C5
variable.language#8BA382italic
variable.other.property, meta.object-literal.key#8A8579
entity.name.tag#6D8A66
entity.other.attribute-name#B0A080italic
string.quoted.double.html, string.quoted.single.html#D0C5B5
meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6A8A8A
support.type.property-name.css#7A9189
support.constant.property-value.css, meta.property-value.css#B0A080
keyword.other.unit.css#9A8CA8
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6D8A66
keyword.operator#6D8A66
keyword.operator.comparison, keyword.operator.relational#6A8A8A
keyword.operator.logical#6D8A66
punctuation#8A8579
punctuation.definition.block, meta.brace#8A8579
string.regexp#8BA382
punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#9A8CA8
meta.decorator, punctuation.decorator#9A8CA8
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown#6D8A66bold
markup.bold#B0A080bold
markup.italic#9A8CA8italic
markup.underline.link, string.other.link#7A9189
markup.inline.raw, markup.fenced_code.block#D0C5B5
markup.quote#5A544Ditalic
punctuation.definition.list.begin.markdown#6D8A66
support.type.property-name.json#6D8A66
string.quoted.double.json#D0C5B5
entity.name.tag.yaml#6D8A66
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python#8BA382italic
support.function.builtin.python, support.type.python#7A9189
support.function.magic.python#9A8CA8italic
entity.name.function.decorator.python, meta.function.decorator.python#9A8CA8
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#5A544Ditalic
constant.character.format.placeholder.other.python#6D8A66
punctuation.definition.lifetime.rust, entity.name.lifetime.rust, storage.modifier.lifetime.rust#8BA382italic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#9A8CA8
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#6A8A8A
keyword.other.unsafe.rust#8BA382bold
storage.modifier.mut.rust#6D8A66italic
entity.name.type.rust, entity.name.type.primitive.rust, support.type.primitive.rust#6A8A8A
entity.name.type.trait.rust#6A8A8Aitalic
keyword.other.impl.rust#6D8A66italic
variable.language.self.rust#8BA382italic
entity.name.module.rust, entity.name.namespace.rust#6A8A8A
variable.language.this#8BA382italic
support.type.primitive.ts, support.type.builtin.ts#6A8A8A
entity.name.package.go#6A8A8A
support.function.builtin.go#7A9189
keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.conditional, meta.preprocessor#9A8CA8
support.type.sys-types.c, support.type.sys-types.cpp, storage.type.built-in.c, storage.type.built-in.cpp#6A8A8A
invalid#8BA382underline
invalid.deprecated#5A544Dstrikethrough
support.function#7A9189
support.class#6A8A8A
support.constant#B0A080
entity.name#6A8A8A
entity.name.namespace, entity.name.module#6A8A8A