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#2B2B2B
  • activityBar.foreground#D4A574
  • activityBar.inactiveForeground#707070
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#1E1E1E
  • badge.background#D4AF37
  • badge.foreground#1E1E1E
  • button.background#D4A574
  • button.foreground#1E1E1E
  • button.hoverBackground#E6B87D
  • editor.background#1E1E1E
  • editor.findMatchBackground#D4AF3740
  • editor.findMatchHighlightBackground#D4AF3720
  • editor.foreground#E8E4DB
  • editor.selectionBackground#3A3A3A
  • editor.selectionHighlightBackground#2F2F2F
  • editor.wordHighlightBackground#3A3A3A80
  • editor.wordHighlightStrongBackground#3A3A3A
  • editorBracketMatch.background#3A3A3A
  • editorBracketMatch.border#D4A574
  • editorCursor.foreground#D4A574
  • editorGroupHeader.tabsBackground#252525
  • editorHoverWidget.background#252525
  • editorHoverWidget.border#3A3A3A
  • editorIndentGuide.activeBackground#3A3A3A
  • editorIndentGuide.background#3A3A3A40
  • editorLineNumber.activeForeground#D4A574
  • editorLineNumber.foreground#5A5A5A
  • editorSuggestWidget.background#252525
  • editorSuggestWidget.selectedBackground#3A3A3A
  • editorWidget.background#252525
  • editorWidget.border#3A3A3A
  • focusBorder#D4A574
  • input.background#252525
  • input.border#3A3A3A
  • input.foreground#E8E4DB
  • inputOption.activeBorder#D4A574
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#D4A574
  • list.focusBackground#3A3A3A
  • list.hoverBackground#2F2F2F
  • list.inactiveSelectionBackground#2F2F2F
  • panel.background#1E1E1E
  • panel.border#3A3A3A
  • panelTitle.activeBorder#D4A574
  • panelTitle.activeForeground#D4A574
  • panelTitle.inactiveForeground#707070
  • progressBar.background#D4A574
  • scrollbarSlider.activeBackground#3A3A3AC0
  • scrollbarSlider.background#3A3A3A80
  • scrollbarSlider.hoverBackground#3A3A3AA0
  • sideBar.background#252525
  • sideBar.foreground#E8E4DB
  • sideBarSectionHeader.background#2B2B2B
  • sideBarSectionHeader.foreground#D4A574
  • sideBarTitle.foreground#D4A574
  • statusBar.background#2B2B2B
  • statusBar.debuggingBackground#D4AF37
  • statusBar.debuggingForeground#1E1E1E
  • statusBar.foreground#D4A574
  • statusBar.noFolderBackground#2B2B2B
  • tab.activeBackground#1E1E1E
  • tab.activeForeground#D4A574
  • tab.border#2B2B2B
  • tab.inactiveBackground#252525
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#7B9FB8
  • terminal.ansiBrightBlack#5A5A5A
  • terminal.ansiBrightBlue#8FB0C8
  • terminal.ansiBrightCyan#7B9FB8
  • terminal.ansiBrightGreen#A8D5A8
  • terminal.ansiBrightMagenta#D8B4E8
  • terminal.ansiBrightRed#E88388
  • terminal.ansiBrightWhite#F5F1E8
  • terminal.ansiBrightYellow#E6B87D
  • terminal.ansiCyan#6B8E9F
  • terminal.ansiGreen#8FBC8F
  • terminal.ansiMagenta#C9A0DC
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#E8E4DB
  • terminal.ansiYellow#D4AF37
  • terminal.foreground#E8E4DB
  • titleBar.activeBackground#2B2B2B
  • titleBar.activeForeground#D4A574
  • titleBar.inactiveBackground#252525
  • titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#707070italic
string, string.quoted, string.template#8FBC8F
constant.numeric#7B9FB8
constant.language, constant.character, constant.other#7B9FB8
variable.other.constant#7B9FB8
keyword, storage.type, storage.modifier#D4A574bold
keyword.operator, 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#E8E4DB
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D4A574
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#C9A0DC
meta.block variable.other#E8E4DB
support.other.variable, string.other.link#E8E4DB
variable, variable.parameter, variable.other#E8E4DB
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#B8A4D4
support.type#6B8E9F
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#D4AF37
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E8E4DB
variable.language#D4A574italic
entity.name.method.js#C9A0DC
meta.class-method.js entity.name.function.js, variable.function.constructor#C9A0DC
entity.other.attribute-name#D4AF37
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#D4AF37
entity.other.attribute-name.class#D4AF37
source.sass keyword.control#C9A0DC
markup.inserted#8FBC8F
markup.deleted#E06C75
markup.changed#D4A574
string.regexp#6B8E9F
constant.character.escape#6B8E9F
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#C9A0DCitalic
source.js constant.other.object.key.js string.unquoted.label.js#E8E4DB
source.json meta.structure.dictionary.json support.type.property-name.json#D4AF37
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C9A0DC
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#7B9FB8
text.html.markdown, punctuation.definition.list_item.markdown#E8E4DB
text.html.markdown markup.inline.raw.markdown#8FBC8F
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#707070
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#D4A574bold
markup.italic#C9A0DCitalic
markup.bold, markup.bold string#D4A574bold
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 stringbold italic
markup.underline#7B9FB8underline
markup.quote punctuation.definition.blockquote.markdown#707070
markup.quote#8FBC8Fitalic
string.other.link.title.markdown#7B9FB8
string.other.link.description.title.markdown#C9A0DC
constant.other.reference.link.markdown#D4AF37
markup.raw.block#8FBC8F
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#8FBC8F
variable.language.fenced.markdown#707070
meta.separator#707070bold
markup.table#E8E4DB