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#140C07
  • activityBar.foreground#DDC4A9
  • activityBarBadge.background#C76F28
  • activityBarBadge.foreground#140C07
  • button.background#A85A22
  • diffEditor.insertedTextBackground#A47B5425
  • diffEditor.removedTextBackground#8B3A2B25
  • dropdown.background#1F130C
  • dropdown.border#311F14
  • editor.background#18110D
  • editor.findMatchBackground#C76F2860
  • editor.findMatchHighlightBackground#A85A2250
  • editor.foreground#DDC4A9
  • editor.lineHighlightBackground#22160F
  • editor.selectionBackground#452C1B
  • editorCursor.foreground#E5A95D
  • editorError.foreground#C94A30
  • editorGroup.border#311F14
  • editorGroupHeader.tabsBackground#110A06
  • editorHoverWidget.background#1F130C
  • editorHoverWidget.border#311F14
  • editorHoverWidget.highlightForeground#E5A95D
  • editorIndentGuide.background#271912
  • editorInlayHint.background#22160F
  • editorInlayHint.foreground#8E755D
  • editorLineNumber.foreground#5C4636
  • editorRuler.foreground#2B1A11
  • editorSuggestWidget.background#1F130C
  • editorSuggestWidget.border#311F14
  • editorSuggestWidget.selectedBackground#362215
  • editorWhitespace.foreground#2B1A11
  • editorWidget.background#1F130C
  • input.background#140C07
  • list.activeSelectionBackground#362215
  • list.activeSelectionForeground#DDC4A9
  • list.focusBackground#2B1A11
  • list.highlightForeground#E5A95D
  • list.hoverBackground#22160F
  • list.inactiveSelectionBackground#1F130C
  • list.inactiveSelectionForeground#A48B75
  • scrollbarSlider.activeBackground#5C3E2880
  • scrollbarSlider.background#311F1480
  • scrollbarSlider.hoverBackground#452C1B80
  • sideBar.background#140C07
  • sideBar.border#22160F
  • sideBarSectionHeader.background#1F130C
  • statusBar.background#110A06
  • statusBar.debuggingBackground#A85A22
  • statusBar.foreground#A48B75
  • statusBar.noFolderBackground#110A06
  • statusBarItem.hoverBackground#1F130C
  • tab.activeBackground#18110D
  • tab.activeBorderTop#C76F28
  • tab.border#110A06
  • tab.inactiveBackground#140C07
  • terminal.ansiBlack#140C07
  • terminal.ansiBlue#8F5E36
  • terminal.ansiBrightBlack#5C4636
  • terminal.ansiBrightBlue#A27147
  • terminal.ansiBrightCyan#D6A97A
  • terminal.ansiBrightGreen#B58C63
  • terminal.ansiBrightMagenta#C76F28
  • terminal.ansiBrightRed#D85E42
  • terminal.ansiBrightWhite#F0DFCA
  • terminal.ansiBrightYellow#E5A95D
  • terminal.ansiCyan#C2976D
  • terminal.ansiGreen#A47B54
  • terminal.ansiMagenta#A85A22
  • terminal.ansiRed#C94A30
  • terminal.ansiWhite#DDC4A9
  • terminal.ansiYellow#D09B66
  • terminal.background#140C07
  • terminal.foreground#DDC4A9
  • titleBar.activeBackground#110A06
  • titleBar.activeForeground#DDC4A9
  • titleBar.inactiveBackground#110A06
  • titleBar.inactiveForeground#755C48

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#DDC4A9
comment, string.comment#755C48italic
string#E5A95D
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C76F28
meta.string.template#D09B66
meta#DDC4A9
constant.numeric#B66228
string.embedded.begin, string.embedded.end#B66228
string.embedded#A47B54
constant.language#C76F28
constant.character, constant.other#C76F28
variable.language#A85A22italic
variable.readwrite, variable.readwrite.other.block#D09B66
keyword, keyword.operator.logical, keyword.operator.constructor#C76F28
keyword.operator#A85A22
storage#A85A22italic
storage.type#C2976D
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#B37C4B
meta.block.switch.c, variable.other.object#B37C4B
variable.other.property, variable.other.block#DDC4A9
entity.other.inherited-class#A47B54
entity.name.function, support.function#F2B872
support.function#D09B66
variable.parameter#8F5E36italic
entity.name.function-call#DDC4A9
function.support.builtin, function.support.core#F2B872
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#C76F28
entity.name.tag.class, entity.name.tag.id#D09B66
entity.other.attribute-name#E5A95D
support.constant#B37C4B
support.type, support.variable#B37C4B
support.dictionary.json#D09B66
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#C2976D
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#E5A95D
variable.css, variable.scss, variable.less, variable.sass#D09B66
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#F2B872
unit.css, unit.scss, unit.less, unit.sass#A85A22
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#B66228
function.css, function.scss, function.less, function.sass#C2976D
support.other.variable
invalid#DDC4A9
invalid.deprecated#DDC4A9
structure.dictionary.property-name.json#D09B66
string.detected-link#8F5E36
meta.diff, meta.diff.header#755C48
markup.deleted#8B3A2B
markup.inserted#A47B54
markup.changed#C76F28
constant.numeric.line-number.find-in-files - match#C2976D
entity.name.filename.find-in-files#F2B872
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#755C48
markup.underline.link.markdown#D09B66
markup.bold.markdownbold
punctuation.definition.bold.markdown#755C48
markup.heading.markdown#C76F28bold
punctuation.definition.heading.markdown#755C48
markup.quote.markdown#A47B54
meta.separator.markdown#8F5E36bold
markup.raw.inline.markdown, markup.raw.block.markdown#C2976D
punctuation.definition.list_item.markdown#DDC4A9bold
variable.other.jsdoc#96816D