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#E6D8C8
  • activityBar.foreground#2E1E12
  • activityBarBadge.background#A63B14
  • activityBarBadge.foreground#FAF5F0
  • button.background#9C5B28
  • diffEditor.insertedTextBackground#3A662C20
  • diffEditor.removedTextBackground#A82A1A20
  • dropdown.background#FAF5F0
  • dropdown.border#DBC6B1
  • editor.background#FAF5F0
  • editor.findMatchBackground#E6A87C80
  • editor.findMatchHighlightBackground#E6C1A160
  • editor.foreground#2E1E12
  • editor.lineHighlightBackground#F0EAE1
  • editor.selectionBackground#DBC6B1
  • editorCursor.foreground#9C3B1A
  • editorError.foreground#C94A30
  • editorGroup.border#DBC6B1
  • editorGroupHeader.tabsBackground#E6D8C8
  • editorHoverWidget.background#FAF5F0
  • editorHoverWidget.border#DBC6B1
  • editorHoverWidget.highlightForeground#9C3B1A
  • editorIndentGuide.background#E0D4C5
  • editorInlayHint.background#F0EAE1
  • editorInlayHint.foreground#8A7B6E
  • editorLineNumber.foreground#A39182
  • editorRuler.foreground#E0D4C5
  • editorSuggestWidget.background#FAF5F0
  • editorSuggestWidget.border#DBC6B1
  • editorSuggestWidget.selectedBackground#EAE0D5
  • editorWhitespace.foreground#E0D4C5
  • editorWidget.background#FAF5F0
  • input.background#FFFFFF
  • list.activeSelectionBackground#DBC6B1
  • list.activeSelectionForeground#2E1E12
  • list.focusBackground#EAE0D5
  • list.highlightForeground#9C3B1A
  • list.hoverBackground#F0EAE1
  • list.inactiveSelectionBackground#EAE0D5
  • list.inactiveSelectionForeground#4A3525
  • scrollbarSlider.activeBackground#A3918280
  • scrollbarSlider.background#DBC6B180
  • scrollbarSlider.hoverBackground#C2B2A380
  • sideBar.background#F0E6DA
  • sideBar.border#E6D8C8
  • sideBarSectionHeader.background#E6D8C8
  • statusBar.background#E6D8C8
  • statusBar.debuggingBackground#A63B14
  • statusBar.foreground#4A3525
  • statusBar.noFolderBackground#E6D8C8
  • statusBarItem.hoverBackground#DBC6B1
  • tab.activeBackground#FAF5F0
  • tab.activeBorderTop#9C5B28
  • tab.border#E6D8C8
  • tab.inactiveBackground#F0E6DA
  • terminal.ansiBlack#2E1E12
  • terminal.ansiBlue#4A6E8A
  • terminal.ansiBrightBlack#8A7B6E
  • terminal.ansiBrightBlue#6A8CAA
  • terminal.ansiBrightCyan#5C9A9A
  • terminal.ansiBrightGreen#5C8A4A
  • terminal.ansiBrightMagenta#A86A98
  • terminal.ansiBrightRed#C94A30
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#C2852A
  • terminal.ansiCyan#3A7A7A
  • terminal.ansiGreen#3A662C
  • terminal.ansiMagenta#8A4A7A
  • terminal.ansiRed#A82A1A
  • terminal.ansiWhite#EAE0D5
  • terminal.ansiYellow#A66314
  • terminal.background#FAF5F0
  • terminal.foreground#2E1E12
  • titleBar.activeBackground#E6D8C8
  • titleBar.activeForeground#2E1E12
  • titleBar.inactiveBackground#E6D8C8
  • titleBar.inactiveForeground#8A7B6E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#2E1E12
comment, string.comment#8A7B6Eitalic
string#476628
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#A63B14
meta.string.template#8A4A1C
meta#2E1E12
constant.numeric#B34700
string.embedded.begin, string.embedded.end#B34700
string.embedded#6B4A28
constant.language#A63B14
constant.character, constant.other#A63B14
variable.language#9C3B1Aitalic
variable.readwrite, variable.readwrite.other.block#4A3525
keyword, keyword.operator.logical, keyword.operator.constructor#A63B14
keyword.operator#9C3B1A
storage#9C3B1Aitalic
storage.type#6B4724
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#784C21
meta.block.switch.c, variable.other.object#784C21
variable.other.property, variable.other.block#2E1E12
entity.other.inherited-class#6B4A28
entity.name.function, support.function#8A4A1C
support.function#6B4724
variable.parameter#B34700italic
entity.name.function-call#2E1E12
function.support.builtin, function.support.core#8A4A1C
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#A63B14
entity.name.tag.class, entity.name.tag.id#8A4A1C
entity.other.attribute-name#6B4A28
support.constant#784C21
support.type, support.variable#784C21
support.dictionary.json#8A4A1C
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#6B4724
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#476628
variable.css, variable.scss, variable.less, variable.sass#8A4A1C
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#A85A22
unit.css, unit.scss, unit.less, unit.sass#9C3B1A
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#B34700
function.css, function.scss, function.less, function.sass#6B4724
support.other.variable
invalid#FFFFFF
invalid.deprecated#FFFFFF
structure.dictionary.property-name.json#8A4A1C
string.detected-link#5C3E28underline
meta.diff, meta.diff.header#8A7B6E
markup.deleted#A82A1A
markup.inserted#3A662C
markup.changed#A66314
constant.numeric.line-number.find-in-files - match#6B4724
entity.name.filename.find-in-files#8A4A1C
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#8A7B6E
markup.underline.link.markdown#8A4A1C
markup.bold.markdownbold
punctuation.definition.bold.markdown#8A7B6E
markup.heading.markdown#A63B14bold
punctuation.definition.heading.markdown#8A7B6E
markup.quote.markdown#6B4A28
meta.separator.markdown#5C3E28bold
markup.raw.inline.markdown, markup.raw.block.markdown#6B4724
punctuation.definition.list_item.markdown#2E1E12bold
variable.other.jsdoc#786556