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—
themesmith by CyberBoost - VS Code Theme