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#5B2A2A
  • activityBar.background#2F2F2F
  • activityBar.foreground#C49E2F
  • activityBarBadge.background#5B2A2A
  • activityBarBadge.foreground#F5E8D0
  • badge.background#C49E2F
  • badge.foreground#1E1E1E
  • button.background#5B2A2A
  • button.foreground#F5E8D0
  • button.hoverBackground#7A3A3A
  • dropdown.background#2B2B2B
  • dropdown.border#5B2A2A
  • dropdown.foreground#E0D8C5
  • editor.background#1E1E1E
  • editor.findMatchBackground#C49E2F80
  • editor.findMatchHighlightBackground#C49E2F40
  • editor.foreground#E0D8C5
  • editor.lineHighlightBackground#2E4A2E30
  • editor.lineHighlightBorder#2E4A2E
  • editor.selectionBackground#5B2A2A80
  • editor.selectionHighlightBackground#5B2A2A40
  • editorBracketMatch.background#2E4A2E30
  • editorBracketMatch.border#2E4A2E
  • editorCursor.foreground#C49E2F
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorIndentGuide.activeBackground#5B2A2A
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#C49E2F
  • editorLineNumber.foreground#8A8A8A
  • editorWhitespace.foreground#555555
  • focusBorder#C49E2F
  • gitDecoration.conflictingResourceForeground#5B2A2A
  • gitDecoration.deletedResourceForeground#C44C4C
  • gitDecoration.modifiedResourceForeground#2E4A2E
  • gitDecoration.untrackedResourceForeground#C49E2F
  • input.background#2B2B2B
  • input.border#5B2A2A
  • input.foreground#E0D8C5
  • input.placeholderForeground#8A8A8A
  • inputOption.activeBorder#C49E2F
  • list.activeSelectionBackground#5B2A2A
  • list.activeSelectionForeground#F5E8D0
  • list.focusBackground#2E4A2E
  • list.highlightForeground#C49E2F
  • list.hoverBackground#2F2F2F
  • minimap.background#1E1E1E
  • minimapSlider.activeBackground#666666
  • minimapSlider.background#44444488
  • minimapSlider.hoverBackground#555555AA
  • panel.background#1E1E1E
  • panel.border#2B2B2B
  • panelTitle.activeBorder#5B2A2A
  • panelTitle.activeForeground#E0D8C5
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#44444488
  • scrollbarSlider.hoverBackground#555555AA
  • sideBar.background#2B2B2B
  • sideBar.foreground#E0D8C5
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.foreground#C49E2F
  • sideBarTitle.foreground#C49E2F
  • statusBar.background#5B2A2A
  • statusBar.debuggingBackground#2E4A2E
  • statusBar.foreground#F5E8D0
  • statusBar.noFolderBackground#2F2F2F
  • statusBarItem.hoverBackground#C49E2F44
  • tab.activeBackground#2F2F2F
  • tab.activeBorder#5B2A2A
  • tab.activeForeground#E0D8C5
  • tab.border#2B2B2B
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#2E4A6A
  • terminal.ansiBrightBlue#3B6EA5
  • terminal.ansiBrightCyan#3A9A9A
  • terminal.ansiBrightGreen#3F5F3F
  • terminal.ansiBrightMagenta#7A3A3A
  • terminal.ansiBrightRed#D96A6A
  • terminal.ansiBrightYellow#D1B04F
  • terminal.ansiCyan#2E6A6A
  • terminal.ansiGreen#2E4A2E
  • terminal.ansiMagenta#5B2A2A
  • terminal.ansiRed#C44C4C
  • terminal.ansiYellow#C49E2F
  • terminal.background#1E1E1E
  • terminal.foreground#E0D8C5
  • titleBar.activeBackground#2F2F2F
  • titleBar.activeForeground#E0D8C5
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#C49E2F
keyword, storage.type, storage.modifier#5B2A2Abold
keyword.operator, punctuation.accessor#2E4A2E
variable, variable.other#E0D8C5
variable.parameter#E0D8C5italic
entity.name.function, support.function#2E4A6A
meta.function-call#2E6A6A
entity.name.class, entity.name.type.class, support.class#2E4A2Ebold
entity.name.type, support.type#C49E2F
entity.name.type.interface#C49E2Fitalic
constant.numeric#C44C4C
constant, constant.language, constant.character#C44C4C
constant.language.boolean#5B2A2Abold
variable.other.property, support.variable.property#2E4A2E
meta.object-literal.key#2E4A6A
entity.name.tag, punctuation.definition.tag#5B2A2A
entity.other.attribute-name#C49E2Fitalic
punctuation, meta.brace#8A8A8A
string.regexp#2E6A6A
constant.character.escape#C44C4C
meta.decorator, punctuation.decorator#5B2A2A
invalid, invalid.illegal#C44C4Cstrikethrough
markup.heading, entity.name.section#C49E2Fbold
markup.bold#C49E2Fbold
markup.italic#E0D8C5italic
markup.underline.link#2E4A6A
markup.inline.raw, markup.fenced_code#2E4A2E
support.type.property-name.json#2E4A6A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5B2A2A
support.type.property-name.css#2E4A2E
support.constant.property-value.css#C49E2F