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.activeBorder#8DA101
  • activityBar.background#eae5d5
  • activityBar.foreground#5C6A72
  • activityBar.inactiveForeground#8c9494
  • activityBarBadge.background#8DA101
  • activityBarBadge.foreground#FDF6E3
  • badge.background#8DA101
  • badge.foreground#FDF6E3
  • breadcrumb.activeSelectionForeground#5C6A72
  • breadcrumb.focusForeground#5C6A72
  • breadcrumb.foreground#8c9494
  • button.background#e3e0d1
  • button.foreground#5C6A72
  • button.hoverBackground#d3d2c6
  • button.secondaryBackground#f3eedc
  • button.secondaryForeground#5C6A72
  • button.secondaryHoverBackground#f0ebda
  • checkbox.background#f3eedc
  • checkbox.border#e3e0d1
  • checkbox.foreground#5C6A72
  • descriptionForeground#8c9494
  • diffEditor.diagonalFill#e3e0d14d
  • diffEditor.insertedLineBackground#8da1011a
  • diffEditor.insertedTextBackground#8da10126
  • diffEditor.removedLineBackground#f855521a
  • diffEditor.removedTextBackground#f8555226
  • dropdown.background#f3eedc
  • dropdown.border#e3e0d1
  • dropdown.foreground#5C6A72
  • editor.background#FDF6E3
  • editor.findMatchBackground#a7c08059
  • editor.findMatchHighlightBackground#8da10126
  • editor.findRangeHighlightBackground#3a94c51f
  • editor.foreground#5C6A72
  • editor.hoverHighlightBackground#8da1011a
  • editor.inactiveSelectionBackground#efe9d9
  • editor.lineHighlightBackground#f7f1df
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#8c949433
  • editor.selectionBackground#e3e0d1
  • editor.selectionHighlightBackground#8da10138
  • editor.wordHighlightBackground#8da10138
  • editor.wordHighlightStrongBackground#3a94c533
  • editorBracketHighlight.foreground1#8DA101
  • editorBracketHighlight.foreground2#DFA000
  • editorBracketHighlight.foreground3#3A94C5
  • editorBracketHighlight.foreground4#F85552
  • editorBracketHighlight.foreground5#35A77C
  • editorBracketHighlight.foreground6#DF69BA
  • editorCursor.foreground#5C6A72
  • editorError.foreground#F85552
  • editorGroup.border#e3e0d1
  • editorGroupHeader.tabsBackground#FDF6E3
  • editorGutter.addedBackground#8DA101
  • editorGutter.background#FDF6E3
  • editorGutter.deletedBackground#F85552
  • editorGutter.modifiedBackground#DFA000
  • editorHint.foreground#3A94C5
  • editorHoverWidget.background#f3eedc
  • editorHoverWidget.border#e3e0d1
  • editorHoverWidget.foreground#5C6A72
  • editorIndentGuide.activeBackground#8da10166
  • editorIndentGuide.background#e3e0d166
  • editorInfo.foreground#3A94C5
  • editorLineNumber.activeForeground#747f83
  • editorLineNumber.foreground#999f9d
  • editorLink.activeForeground#3A94C5
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#f85552cc
  • editorOverviewRuler.infoForeground#3a94c5cc
  • editorOverviewRuler.warningForeground#dfa000cc
  • editorSuggestWidget.background#f3eedc
  • editorSuggestWidget.border#e3e0d1
  • editorSuggestWidget.foreground#5C6A72
  • editorSuggestWidget.highlightForeground#8DA101
  • editorSuggestWidget.selectedBackground#e3e0d1
  • editorSuggestWidget.selectedForeground#5C6A72
  • editorWarning.foreground#DFA000
  • editorWhitespace.foreground#e3e0d180
  • editorWidget.background#f3eedc
  • editorWidget.border#e3e0d1
  • errorForeground#F85552
  • focusBorder#8da1018c
  • foreground#5C6A72
  • gitDecoration.addedResourceForeground#8DA101
  • gitDecoration.conflictingResourceForeground#DF69BA
  • gitDecoration.deletedResourceForeground#F85552
  • gitDecoration.modifiedResourceForeground#DFA000
  • gitDecoration.untrackedResourceForeground#35A77C
  • infoForeground#3A94C5
  • input.background#f3eedc
  • input.border#e3e0d1
  • input.foreground#5C6A72
  • input.placeholderForeground#8c9494
  • inputOption.activeBackground#8da1011f
  • inputOption.activeBorder#8DA101
  • inputValidation.errorBackground#f8555226
  • inputValidation.errorBorder#F85552
  • inputValidation.errorForeground#F85552
  • inputValidation.infoBackground#3a94c526
  • inputValidation.infoBorder#3A94C5
  • inputValidation.infoForeground#3A94C5
  • inputValidation.warningBackground#dfa00026
  • inputValidation.warningBorder#DFA000
  • inputValidation.warningForeground#DFA000
  • list.activeSelectionBackground#e3e0d1
  • list.activeSelectionForeground#5C6A72
  • list.focusAndSelectionBackground#e3e0d1
  • list.focusBackground#f0ebda
  • list.focusOutline#8DA101
  • list.highlightForeground#8DA101
  • list.hoverBackground#f0ebda
  • list.inactiveSelectionBackground#f0ebda
  • list.invalidItemForeground#F85552
  • listFilterWidget.background#f3eedc
  • listFilterWidget.outline#8DA101
  • menu.background#f3eedc
  • menu.border#e3e0d1
  • menu.foreground#5C6A72
  • menu.selectionBackground#e3e0d1
  • menu.selectionForeground#5C6A72
  • minimap.background#FDF6E3
  • minimap.errorHighlight#F85552
  • minimap.findMatchHighlight#8DA101
  • minimap.selectionHighlight#e3e0d1
  • minimap.warningHighlight#DFA000
  • minimapGutter.addedBackground#8DA101
  • minimapGutter.deletedBackground#F85552
  • minimapGutter.modifiedBackground#DFA000
  • notificationCenter.border#e3e0d1
  • notificationToast.border#e3e0d1
  • panel.background#FDF6E3
  • panel.border#e3e0d1
  • panelSection.border#e3e0d1
  • panelSectionHeader.background#f3eedc
  • panelSectionHeader.foreground#5C6A72
  • panelTitle.activeBorder#8DA101
  • panelTitle.activeForeground#5C6A72
  • panelTitle.inactiveForeground#8c9494
  • pickerGroup.border#e3e0d1
  • pickerGroup.foreground#8c9494
  • progressBar.background#8DA101
  • quickInput.background#f3eedc
  • quickInput.foreground#5C6A72
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#d3d2c6e6
  • scrollbarSlider.background#e3e0d199
  • scrollbarSlider.hoverBackground#e3e0d1e6
  • settings.headerForeground#5C6A72
  • settings.modifiedItemIndicator#DFA000
  • sideBar.background#f3eedc
  • sideBar.foreground#5C6A72
  • sideBarSectionHeader.background#f3eedc
  • sideBarSectionHeader.border#e3e0d1
  • sideBarSectionHeader.foreground#8c9494
  • sideBarTitle.foreground#5C6A72
  • statusBar.background#eae5d5
  • statusBar.border#eae5d5
  • statusBar.debuggingBackground#eec1b4
  • statusBar.debuggingForeground#5C6A72
  • statusBar.foreground#5C6A72
  • statusBar.noFolderBackground#eae5d5
  • statusBar.noFolderForeground#5C6A72
  • statusBarItem.activeBackground#e3e0d1
  • statusBarItem.hoverBackground#f0ebda
  • statusBarItem.prominentBackground#8DA101
  • statusBarItem.prominentForeground#FDF6E3
  • tab.activeBackground#FDF6E3
  • tab.activeBorder#8DA101
  • tab.activeForeground#5C6A72
  • tab.border#e3e0d1
  • tab.hoverBackground#f0ebda
  • tab.inactiveBackground#f3eedc
  • tab.inactiveForeground#8c9494
  • tab.unfocusedActiveBackground#FDF6E3
  • tab.unfocusedInactiveBackground#f3eedc
  • terminal.ansiBlack#5C6A72
  • terminal.ansiBlue#3A94C5
  • terminal.ansiBrightBlack#343F44
  • terminal.ansiBrightBlue#7FBBB3
  • terminal.ansiBrightCyan#83C092
  • terminal.ansiBrightGreen#A7C080
  • terminal.ansiBrightMagenta#D699B6
  • terminal.ansiBrightRed#E67E80
  • terminal.ansiBrightWhite#D3C6AA
  • terminal.ansiBrightYellow#DBBC7F
  • terminal.ansiCyan#35A77C
  • terminal.ansiGreen#8DA101
  • terminal.ansiMagenta#DF69BA
  • terminal.ansiRed#F85552
  • terminal.ansiWhite#DFDDC8
  • terminal.ansiYellow#DFA000
  • terminal.background#FDF6E3
  • terminal.foreground#5C6A72
  • terminalCursor.foreground#5C6A72
  • textBlockQuote.background#f0ebda
  • textBlockQuote.border#8da10180
  • textCodeBlock.background#f3eedc
  • textLink.activeForeground#8DA101
  • textLink.foreground#3A94C5
  • textPreformat.foreground#5C6A72
  • textSeparator.foreground#e3e0d1
  • titleBar.activeBackground#eae5d5
  • titleBar.activeForeground#5C6A72
  • titleBar.inactiveBackground#eae5d5
  • titleBar.inactiveForeground#8c9494
  • warningForeground#DFA000
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface, storage.type.property, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, storage.type.extends#F85552
keyword.other.debugger#F85552
storage, modifier, keyword.var, entity.name.tag, keyword.control.case, keyword.control.switch#ec7b29
keyword.operator#ec7b29
string, punctuation.definition.string.end, punctuation.definition.string.begin, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#DFA000
entity.other.attribute-name#DFA000
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, variable.interpolation#8DA101
entity.name.function, support.function, meta.function, meta.function-call, meta.definition.method#8DA101
keyword.control.at-rule, keyword.control.import, keyword.control.export, storage.type.namespace, punctuation.decorator, keyword.control.directive, keyword.preprocessor, punctuation.definition.preprocessor, punctuation.definition.directive, keyword.other.import, keyword.other.package, entity.name.type.namespace, entity.name.scope-resolution, keyword.other.using, keyword.package, keyword.import, keyword.map#35A77C
storage.type.annotation#35A77C
entity.name.label, constant.other.label#35A77C
support.module, support.node, support.other.module, support.type.object.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module#35A77C
storage.type, support.type, entity.name.type, keyword.type#3A94C5
entity.name.type.class, support.class, entity.name.class, entity.other.inherited-class, storage.class#3A94C5
constant.numeric#DF69BA
constant.language.boolean#DF69BA
variable.language.this, variable.language.self, variable.language.super, keyword.other.this, variable.language.special, constant.language.nu#DF69BA
constant.language, support.constant#DF69BA
variable, support.variable, meta.definition.variable#5C6A72
variable.object.property, support.variable.property, variable.other.property, variable.other.object.property, variable.other.enummember#5C6A72
punctuation.definition.tag, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.interpolation, punctuation.definition.template-expression#8c9494
comment, punctuation.definition.comment#8c9494italic
invalid, invalid.illegal#F85552
heading.1.markdown, markup.heading.setext.1.markdown#F85552bold
heading.2.markdown, markup.heading.setext.2.markdown#ec7b29bold
heading.3.markdown#DFA000bold
heading.4.markdown#8DA101bold
heading.5.markdown#3A94C5bold
heading.6.markdown#DF69BAbold
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown#DF69BA
markup.underline.link.image.markdown, markup.underline.link.markdown#8DA101underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#8c9494
markup.italicitalic
markup.boldbold
markup.bold.markdown markup.italic.markdownitalic bold
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#8DA101
punctuation.definition.raw.markdown, punctuation.definition.markdown#DFA000
punctuation.definition.list.begin.markdown#F85552
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#8DA101
support.type.property-name.css#35A77C
support.type.vendored.property-name.css#3A94C5
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#DFA000
entity.other.attribute-name.class.css#F85552
keyword.other.unit#ec7b29
entity.name.tag.css, keyword.control.at-rule.keyframes.css#DF69BA
support.type.property-name.json, support.type.object.key.json#DFA000
storage.type.js, storage.type.function.arrow.js#ec7b29
punctuation.accessor.js, punctuation.separator.key-value.js, keyword.operator.accessor.js#8c9494
punctuation.definition.block.tag.jsdoc#F85552
variable.parameter.function.python#5C6A72