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.activeBorder#9E7A5A
  • activityBar.background#F0EBE5
  • activityBar.foreground#B66A44
  • activityBarBadge.background#B66A44
  • activityBarBadge.foreground#FAF9F5
  • badge.background#B66A44
  • badge.foreground#FAF9F5
  • button.background#B66A44
  • button.foreground#FAF9F5
  • button.hoverBackground#9E7A5A
  • dropdown.background#F5F0EC
  • dropdown.border#9E7A5A
  • dropdown.foreground#5A4A3B
  • editor.background#FAF9F5
  • editor.findMatchBackground#9E7A44AA
  • editor.findMatchHighlightBackground#9E7A4499
  • editor.foreground#5A4A3B
  • editor.lineHighlightBackground#F2EDE5
  • editor.lineHighlightBorder#E2D9CF
  • editor.selectionBackground#B66A5533
  • editor.selectionHighlightBackground#B66A551A
  • editorBracketMatch.background#B66A5533
  • editorBracketMatch.border#B66A44
  • editorCursor.foreground#B66A44
  • editorGroupHeader.tabsBackground#FAF9F5
  • editorIndentGuide.activeBackground#9E7A5A
  • editorIndentGuide.background#C1B9AF
  • editorLineNumber.activeForeground#B66A44
  • editorLineNumber.foreground#9E8F81
  • editorWhitespace.foreground#B0A394
  • focusBorder#B66A44
  • gitDecoration.conflictingResourceForeground#B66A44
  • gitDecoration.deletedResourceForeground#A05544
  • gitDecoration.modifiedResourceForeground#B66A44
  • gitDecoration.untrackedResourceForeground#5A8A8B
  • input.background#F5F0EC
  • input.border#9E7A5A
  • input.foreground#5A4A3B
  • input.placeholderForeground#B0A394
  • inputOption.activeBorder#B66A44
  • list.activeSelectionBackground#9E7A5A
  • list.activeSelectionForeground#FAF9F5
  • list.focusBackground#9E7A5A
  • list.highlightForeground#B66A44
  • list.hoverBackground#B66A5533
  • minimap.background#FAF9F5
  • minimapSlider.activeBackground#B66A5555
  • minimapSlider.background#B66A5533
  • minimapSlider.hoverBackground#B66A5544
  • panel.background#FAF9F5
  • panel.border#9E7A5A
  • panelTitle.activeBorder#B66A44
  • panelTitle.activeForeground#B66A44
  • panelTitle.inactiveForeground#9E8F81
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B0A394B0
  • scrollbarSlider.background#B0A39444
  • scrollbarSlider.hoverBackground#B0A39488
  • sideBar.background#F5F0EC
  • sideBar.foreground#5A4A3B
  • sideBarSectionHeader.background#EEE9E4
  • sideBarSectionHeader.foreground#9E7A5A
  • sideBarTitle.foreground#B66A44
  • statusBar.background#B66A44
  • statusBar.debuggingBackground#C27D55
  • statusBar.foreground#FAF9F5
  • statusBar.noFolderBackground#F0EBE5
  • statusBarItem.hoverBackground#B66A4477
  • tab.activeBackground#FAF9F5
  • tab.activeBorder#B66A44
  • tab.activeForeground#5A4A3B
  • tab.border#D8D3CB
  • tab.inactiveBackground#F5F0EC
  • tab.inactiveForeground#9E8F81
  • terminal.ansiBlue#5A8A8B
  • terminal.ansiBrightBlue#7AA6A7
  • terminal.ansiBrightCyan#8DB5B0
  • terminal.ansiBrightGreen#A5B57F
  • terminal.ansiBrightMagenta#C88866
  • terminal.ansiBrightRed#B2745E
  • terminal.ansiBrightYellow#D6B270
  • terminal.ansiCyan#6C938F
  • terminal.ansiGreen#889E6A
  • terminal.ansiMagenta#B66A44
  • terminal.ansiRed#A05544
  • terminal.ansiYellow#C5A25C
  • terminal.background#FAF9F5
  • terminal.foreground#5A4A3B
  • titleBar.activeBackground#F5F0EC
  • titleBar.activeForeground#5A4A3B
  • titleBar.inactiveBackground#FAF9F5
  • titleBar.inactiveForeground#9E8F81

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E8F81italic
string, string.quoted, string.template#7A9A68
keyword, storage.type, storage.modifier#8C6239bold
keyword.operator, punctuation.accessor#8C6239
variable, variable.other#5A4A3B
variable.parameter#8C6239italic
entity.name.function, support.function#B66A44
meta.function-call#7A9A68
entity.name.class, entity.name.type.class, support.class#B66A44bold
entity.name.type, support.type#7A9A68
entity.name.type.interface#8C6239italic
constant.numeric#B66A44
constant, constant.language, constant.character#B66A44
constant.language.boolean#8C6239bold
variable.other.property, support.variable.property#7A9A68
meta.object-literal.key#8C6239
entity.name.tag, punctuation.definition.tag#B66A44
entity.other.attribute-name#7A9A68italic
punctuation, meta.brace#5A4A3B
string.regexp#7A9A68
constant.character.escape#B66A44
meta.decorator, punctuation.decorator#7A9A68
invalid, invalid.illegal#8C6239strikethrough
markup.heading, entity.name.section#B66A44bold
markup.bold#B66A44bold
markup.italic#7A9A68italic
markup.underline.link#6A8E50
markup.inline.raw, markup.fenced_code#7A9A68
support.type.property-name.json#B66A44
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7A9A68
support.type.property-name.css#6A8E50
support.constant.property-value.css#8C6239