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.background#A59F89
  • activityBar.border#96907A
  • activityBar.foreground#26302F
  • activityBar.inactiveForeground#4E5857
  • activityBarBadge.background#D03D01
  • activityBarBadge.foreground#EBE5CF
  • badge.background#D03D01
  • badge.foreground#EBE5CF
  • button.background#D03D01
  • button.foreground#EBE5CF
  • button.hoverBackground#EE5B1F
  • button.secondaryBackground#CDC7B1
  • button.secondaryForeground#26302F
  • button.secondaryHoverBackground#C3BDA7
  • descriptionForeground#4E5857
  • diffEditor.insertedLineBackground#BBA14A15
  • diffEditor.insertedTextBackground#BBA14A22
  • diffEditor.removedLineBackground#D03D0115
  • diffEditor.removedTextBackground#D03D0122
  • disabledForeground#6C7675
  • dropdown.background#D7D1BB
  • dropdown.border#CDC7B1
  • dropdown.foreground#26302F
  • editor.background#EBE5CF
  • editor.findMatchBackground#D03D0160
  • editor.findMatchHighlightBackground#BBA14A40
  • editor.foreground#26302F
  • editor.inactiveSelectionBackground#CDC7B180
  • editor.lineHighlightBackground#D7D1BB
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#D03D0130
  • editor.selectionHighlightBackground#BBA14A30
  • editor.wordHighlightBackground#BBA14A25
  • editor.wordHighlightStrongBackground#D03D0130
  • editorBracketMatch.background#BBA14A30
  • editorBracketMatch.border#9D832C
  • editorCursor.foreground#D03D01
  • editorGroup.border#96907A
  • editorGroupHeader.tabsBackground#E1DBC5
  • editorGutter.addedBackground#9D832C
  • editorGutter.background#EBE5CF
  • editorGutter.deletedBackground#B21F00
  • editorGutter.modifiedBackground#D03D01
  • editorHoverWidget.background#A59F89
  • editorHoverWidget.border#96907A
  • editorIndentGuide.activeBackground1#9D832C
  • editorIndentGuide.background1#CDC7B1
  • editorLineNumber.activeForeground#26302F
  • editorLineNumber.foreground#6C7675
  • editorRuler.foreground#CDC7B1
  • editorSuggestWidget.background#A59F89
  • editorSuggestWidget.border#96907A
  • editorSuggestWidget.highlightForeground#D03D01
  • editorSuggestWidget.selectedBackground#D7D1BB
  • editorWhitespace.foreground#C3BDA7
  • editorWidget.background#A59F89
  • editorWidget.border#96907A
  • errorForeground#B21F00
  • focusBorder#D03D01
  • foreground#26302F
  • gitDecoration.addedResourceForeground#9D832C
  • gitDecoration.conflictingResourceForeground#B21F00
  • gitDecoration.deletedResourceForeground#B21F00
  • gitDecoration.ignoredResourceForeground#6C7675
  • gitDecoration.modifiedResourceForeground#D03D01
  • gitDecoration.untrackedResourceForeground#8A7226
  • icon.foreground#4E5857
  • input.background#D7D1BB
  • input.border#CDC7B1
  • input.foreground#26302F
  • input.placeholderForeground#6C7675
  • list.activeSelectionBackground#CDC7B1
  • list.activeSelectionForeground#26302F
  • list.dropBackground#CDC7B1
  • list.focusBackground#CDC7B1
  • list.focusForeground#26302F
  • list.highlightForeground#D03D01
  • list.hoverBackground#D7D1BB
  • list.inactiveSelectionBackground#D7D1BB
  • list.inactiveSelectionForeground#26302F
  • minimap.background#EBE5CF
  • minimap.selectionHighlight#B21F0080
  • notifications.background#A59F89
  • notifications.border#96907A
  • notifications.foreground#26302F
  • panel.background#A59F89
  • panel.border#96907A
  • panelTitle.activeBorder#D03D01
  • panelTitle.activeForeground#26302F
  • panelTitle.inactiveForeground#4E5857
  • peekView.border#D03D01
  • peekViewEditor.background#E1DBC5
  • peekViewResult.background#A59F89
  • peekViewTitle.background#A59F89
  • scrollbarSlider.activeBackground#D03D0180
  • scrollbarSlider.background#C3BDA780
  • scrollbarSlider.hoverBackground#B4AE98A0
  • sideBar.background#E1DBC5
  • sideBar.border#96907A
  • sideBar.foreground#26302F
  • sideBarSectionHeader.background#E1DBC5
  • sideBarSectionHeader.foreground#26302F
  • sideBarTitle.foreground#26302F
  • statusBar.background#A59F89
  • statusBar.border#96907A
  • statusBar.debuggingBackground#B21F00
  • statusBar.debuggingForeground#EBE5CF
  • statusBar.foreground#26302F
  • statusBar.noFolderBackground#A59F89
  • tab.activeBackground#EBE5CF
  • tab.activeBorderTop#D03D01
  • tab.activeForeground#26302F
  • tab.border#96907A
  • tab.inactiveBackground#E1DBC5
  • tab.inactiveForeground#6C7675
  • tab.unfocusedActiveForeground#4E5857
  • terminal.ansiBlack#26302F
  • terminal.ansiBlue#4E5857
  • terminal.ansiBrightBlack#6C7675
  • terminal.ansiBrightBlue#4E5857
  • terminal.ansiBrightCyan#6C7675
  • terminal.ansiBrightGreen#9D832C
  • terminal.ansiBrightMagenta#B21F00
  • terminal.ansiBrightRed#D03D01
  • terminal.ansiBrightWhite#26302F
  • terminal.ansiBrightYellow#BBA14A
  • terminal.ansiCyan#6C7675
  • terminal.ansiGreen#8A7226
  • terminal.ansiMagenta#D03D01
  • terminal.ansiRed#B21F00
  • terminal.ansiWhite#C3BDA7
  • terminal.ansiYellow#9D832C
  • terminal.background#EBE5CF
  • terminal.foreground#26302F
  • terminalCursor.foreground#D03D01
  • titleBar.activeBackground#A59F89
  • titleBar.activeForeground#26302F
  • titleBar.border#96907A
  • titleBar.inactiveBackground#A59F89
  • titleBar.inactiveForeground#4E5857

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7226italic
variable, string constant.other.placeholder#26302F
constant.other.color#26302F
invalid, invalid.illegal#B21F00bold underline
keyword, storage.type, storage.modifier#D03D01
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#4E5857
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D03D01
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8A7226
meta.block variable.other#26302F
support.other.variable, string.other.link#26302F
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#B21F00
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8A7226
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8A7226
support.type#4E5857
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#4E5857
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#B21F00
variable.language#D03D01italic
entity.name.method.js#8A7226italic
meta.class-method.js entity.name.function.js, variable.function.constructor#8A7226
entity.other.attribute-name#8A7226
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8A7226italic
entity.other.attribute-name.class#8A7226
source.sass keyword.control#D03D01
markup.inserted#8A7226
markup.deleted#D03D01
markup.changed#8A7226
string.regexp#8A7226
constant.character.escape#B21F00
*url*, *link*, *uri*#4E5857underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#D03D01italic
source.js constant.other.object.key.js string.unquoted.label.js#B21F00italic
source.json meta.structure.dictionary.json support.type.property-name.json#D03D01
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8A7226
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B21F00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#26302F
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D03D01
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8A7226
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B21F00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#26302F
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D03D01
text.html.markdown, punctuation.definition.list_item.markdown#26302F
text.html.markdown markup.inline.raw.markdown#8A7226
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6C7675
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#D03D01bold
markup.italic#26302Fitalic
markup.bold, markup.bold string#26302Fbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#26302Fbold
markup.underline#8A7226underline
markup.quote punctuation.definition.blockquote.markdown#6C7675
markup.quote#4E5857italic
string.other.link.title.markdown#8A7226
string.other.link.description.title.markdown#8A7226
constant.other.reference.link.markdown#D03D01
markup.raw.block#8A7226
markup.raw.block.fenced.markdown#6C7675
punctuation.definition.fenced.markdown#6C7675
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#26302F
variable.language.fenced.markdown#4E5857
meta.separator#6C7675bold
markup.table#26302F