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#D99A0B
  • activityBar.background#F5E6C4
  • activityBar.foreground#D99A0B
  • activityBarBadge.background#D99A0B
  • activityBarBadge.foreground#FFF8E1
  • badge.background#D99A0B
  • badge.foreground#FFF8E1
  • button.background#D99A0B
  • button.foreground#FFF8E1
  • button.hoverBackground#C88809
  • dropdown.background#F5E6C4
  • dropdown.border#D9C093
  • dropdown.foreground#5D4630
  • editor.background#FFF8E1
  • editor.findMatchBackground#D97742
  • editor.findMatchHighlightBackground#D97742AA
  • editor.foreground#5D4630
  • editor.lineHighlightBackground#F5E6C4AA
  • editor.lineHighlightBorder#D99A0B
  • editor.selectionBackground#D99A0B44
  • editor.selectionHighlightBackground#D99A0B22
  • editorBracketMatch.background#D99A0B33
  • editorBracketMatch.border#D99A0B
  • editorCursor.foreground#D99A0B
  • editorGroupHeader.tabsBackground#FFF8E1
  • editorIndentGuide.activeBackground#D99A0B88
  • editorIndentGuide.background#D9C09388
  • editorLineNumber.activeForeground#D99A0B
  • editorLineNumber.foreground#A09485
  • editorWhitespace.foreground#D9C093
  • focusBorder#D99A0B
  • gitDecoration.conflictingResourceForeground#C07F9A
  • gitDecoration.deletedResourceForeground#D97742
  • gitDecoration.modifiedResourceForeground#D99A0B
  • gitDecoration.untrackedResourceForeground#6B8E23
  • input.background#F5E6C4
  • input.border#D9C093
  • input.foreground#5D4630
  • input.placeholderForeground#A09485
  • inputOption.activeBorder#D99A0B
  • list.activeSelectionBackground#E8D8B0
  • list.activeSelectionForeground#5D4630
  • list.focusBackground#E8D8B0
  • list.highlightForeground#D99A0B
  • list.hoverBackground#E8D8B066
  • minimap.background#FFF8E1
  • minimapSlider.activeBackground#D99A0B66
  • minimapSlider.background#D99A0B22
  • minimapSlider.hoverBackground#D99A0B44
  • panel.background#FFF8E1
  • panel.border#D9C093
  • panelTitle.activeBorder#D99A0B
  • panelTitle.activeForeground#D99A0B
  • panelTitle.inactiveForeground#A09485
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#D99A0B88
  • scrollbarSlider.background#D9C09344
  • scrollbarSlider.hoverBackground#D9C09388
  • sideBar.background#F5E6C4
  • sideBar.foreground#5D4630
  • sideBarSectionHeader.background#E8D8B0
  • sideBarSectionHeader.foreground#D99A0B
  • sideBarTitle.foreground#D99A0B
  • statusBar.background#E8D8B0
  • statusBar.debuggingBackground#D97742
  • statusBar.foreground#5D4630
  • statusBar.noFolderBackground#F5E6C4
  • statusBarItem.hoverBackground#D9C093
  • tab.activeBackground#E8D8B0
  • tab.activeBorder#D99A0B
  • tab.activeForeground#5D4630
  • tab.border#D9C093
  • tab.inactiveBackground#FFF8E1
  • tab.inactiveForeground#A09485
  • terminal.ansiBlue#5A86D6
  • terminal.ansiBrightBlue#7AA0E6
  • terminal.ansiBrightCyan#68BFCF
  • terminal.ansiBrightGreen#89B549
  • terminal.ansiBrightMagenta#E48FB5
  • terminal.ansiBrightRed#E68B5B
  • terminal.ansiBrightYellow#E5B939
  • terminal.ansiCyan#4F9FAE
  • terminal.ansiGreen#6B8E23
  • terminal.ansiMagenta#C07F9A
  • terminal.ansiRed#D97742
  • terminal.ansiYellow#D99A0B
  • terminal.background#FFF8E1
  • terminal.foreground#5D4630
  • titleBar.activeBackground#F5E6C4
  • titleBar.activeForeground#5D4630
  • titleBar.inactiveBackground#FFF8E1
  • titleBar.inactiveForeground#A09485

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A09485italic
string, string.quoted, string.template#6B8E23
keyword, storage.type, storage.modifier#D99A0Bbold
keyword.operator, punctuation.accessor#5A86D6
variable, variable.other#5D4630
variable.parameter#5A86D6italic
entity.name.function, support.function#D99A0B
meta.function-call#5A86D6
entity.name.class, entity.name.type.class, support.class#D99A0Bbold
entity.name.type, support.type#D99A0B
entity.name.type.interface#5A86D6italic
constant.numeric#D99A0B
constant, constant.language, constant.character#D99A0B
constant.language.boolean#D99A0Bbold
variable.other.property, support.variable.property#5D4630
meta.object-literal.key#D99A0B
entity.name.tag, punctuation.definition.tag#6B8E23
entity.other.attribute-name#5A86D6italic
punctuation, meta.brace#5A86D6
string.regexp#D99A0B
constant.character.escape#6B8E23
meta.decorator, punctuation.decorator#D99A0B
invalid, invalid.illegal#D97742strikethrough
markup.heading, entity.name.section#D99A0Bbold
markup.bold#D99A0Bbold
markup.italic#5A86D6italic
markup.underline.link#5A86D6
markup.inline.raw, markup.fenced_code#6B8E23
support.type.property-name.json#D99A0B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5A86D6
support.type.property-name.css#D99A0B
support.constant.property-value.css#6B8E23