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#E8E4DB
  • activityBar.foreground#C5A028
  • activityBar.inactiveForeground#707070
  • activityBarBadge.background#C5A028
  • activityBarBadge.foreground#F5F1E8
  • badge.background#C5A028
  • badge.foreground#F5F1E8
  • button.background#C5A028
  • button.foreground#F5F1E8
  • button.hoverBackground#D4AF37
  • editor.background#F5F1E8
  • editor.findMatchBackground#C5A02860
  • editor.findMatchHighlightBackground#C5A02830
  • editor.foreground#2B2B2B
  • editor.selectionBackground#D4A57440
  • editor.selectionHighlightBackground#E0DCD3
  • editor.wordHighlightBackground#D4A57420
  • editor.wordHighlightStrongBackground#D4A57440
  • editorBracketMatch.background#D4A57440
  • editorBracketMatch.border#C5A028
  • editorCursor.foreground#C5A028
  • editorGroupHeader.tabsBackground#EBE7DE
  • editorHoverWidget.background#EBE7DE
  • editorHoverWidget.border#D0CCC3
  • editorIndentGuide.activeBackground#D0CCC3
  • editorIndentGuide.background#D0CCC340
  • editorLineNumber.activeForeground#C5A028
  • editorLineNumber.foreground#A0A0A0
  • editorSuggestWidget.background#EBE7DE
  • editorSuggestWidget.selectedBackground#D4A57440
  • editorWidget.background#EBE7DE
  • editorWidget.border#D0CCC3
  • focusBorder#C5A028
  • input.background#FFFFFF
  • input.border#D0CCC3
  • input.foreground#2B2B2B
  • inputOption.activeBorder#C5A028
  • list.activeSelectionBackground#D4A57440
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#D4A57440
  • list.hoverBackground#E0DCD3
  • list.inactiveSelectionBackground#E0DCD3
  • panel.background#F5F1E8
  • panel.border#D0CCC3
  • panelTitle.activeBorder#C5A028
  • panelTitle.activeForeground#C5A028
  • panelTitle.inactiveForeground#707070
  • progressBar.background#C5A028
  • scrollbarSlider.activeBackground#D0CCC3C0
  • scrollbarSlider.background#D0CCC380
  • scrollbarSlider.hoverBackground#D0CCC3A0
  • sideBar.background#EBE7DE
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E8E4DB
  • sideBarSectionHeader.foreground#C5A028
  • sideBarTitle.foreground#C5A028
  • statusBar.background#E8E4DB
  • statusBar.debuggingBackground#C5A028
  • statusBar.debuggingForeground#F5F1E8
  • statusBar.foreground#C5A028
  • statusBar.noFolderBackground#E8E4DB
  • tab.activeBackground#F5F1E8
  • tab.activeForeground#C5A028
  • tab.border#E8E4DB
  • tab.inactiveBackground#EBE7DE
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#2B2B2B
  • terminal.ansiBlue#5A7A8F
  • terminal.ansiBrightBlack#707070
  • terminal.ansiBrightBlue#6B8E9F
  • terminal.ansiBrightCyan#5A7A8F
  • terminal.ansiBrightGreen#6FA86F
  • terminal.ansiBrightMagenta#B88FD0
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#F5F1E8
  • terminal.ansiBrightYellow#D4AF37
  • terminal.ansiCyan#4A6A7A
  • terminal.ansiGreen#5A8F5A
  • terminal.ansiMagenta#9A6FB8
  • terminal.ansiRed#C74545
  • terminal.ansiWhite#E8E4DB
  • terminal.ansiYellow#C5A028
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E8E4DB
  • titleBar.activeForeground#C5A028
  • titleBar.inactiveBackground#EBE7DE
  • titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#5A8F5A
constant.numeric#5A7A8F
constant.language, constant.character, constant.other#5A7A8F
variable.other.constant#5A7A8F
keyword, storage.type, storage.modifier#C5A028bold
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#2B2B2B
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#C5A028
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9A6FB8
meta.block variable.other#2B2B2B
support.other.variable, string.other.link#2B2B2B
variable, variable.parameter, variable.other#2B2B2B
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#8F7AB8
support.type#4A6A7A
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#B8942D
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#2B2B2B
variable.language#C5A028italic
entity.name.method.js#9A6FB8
meta.class-method.js entity.name.function.js, variable.function.constructor#9A6FB8
entity.other.attribute-name#B8942D
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#B8942D
entity.other.attribute-name.class#B8942D
source.sass keyword.control#9A6FB8
markup.inserted#5A8F5A
markup.deleted#C74545
markup.changed#C5A028
string.regexp#4A6A7A
constant.character.escape#4A6A7A
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9A6FB8italic
source.js constant.other.object.key.js string.unquoted.label.js#2B2B2B
source.json meta.structure.dictionary.json support.type.property-name.json#B8942D
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9A6FB8
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#5A7A8F
text.html.markdown, punctuation.definition.list_item.markdown#2B2B2B
text.html.markdown markup.inline.raw.markdown#5A8F5A
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8A8A8A
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C5A028bold
markup.italic#9A6FB8italic
markup.bold, markup.bold string#C5A028bold
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#5A7A8Funderline
markup.quote punctuation.definition.blockquote.markdown#8A8A8A
markup.quote#5A8F5Aitalic
string.other.link.title.markdown#5A7A8F
string.other.link.description.title.markdown#9A6FB8
constant.other.reference.link.markdown#B8942D
markup.raw.block#5A8F5A
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#5A8F5A
variable.language.fenced.markdown#8A8A8A
meta.separator#8A8A8Abold
markup.table#2B2B2B