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#D4A52C
  • activityBar.background#1A2A3B
  • activityBar.foreground#D4A75A
  • activityBarBadge.background#D4A52C
  • activityBarBadge.foreground#2F2F2F
  • badge.background#D4A52C
  • badge.foreground#2F2F2F
  • button.background#5C4020
  • button.foreground#F5F1E8
  • button.hoverBackground#7A5A20
  • dropdown.background#3A3A3A
  • dropdown.border#555555
  • dropdown.foreground#F5F1E8
  • editor.background#2F2F2F
  • editor.findMatchBackground#D4A52C
  • editor.findMatchHighlightBackground#E5B33D
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#3A3A3A
  • editor.lineHighlightBorder#D4A52C
  • editor.selectionBackground#3A6B7C
  • editor.selectionHighlightBackground#4A7B8C
  • editorBracketMatch.background#5C4020
  • editorBracketMatch.border#D4A52C
  • editorCursor.foreground#D4A75A
  • editorGroupHeader.tabsBackground#242424
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#D4A75A
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#D4A52C
  • gitDecoration.conflictingResourceForeground#7A5A7A
  • gitDecoration.deletedResourceForeground#B75E34
  • gitDecoration.modifiedResourceForeground#3A6B7C
  • gitDecoration.untrackedResourceForeground#5A9278
  • input.background#3A3A3A
  • input.border#555555
  • input.foreground#F5F1E8
  • input.placeholderForeground#777777
  • inputOption.activeBorder#D4A52C
  • list.activeSelectionBackground#4A4A4A
  • list.activeSelectionForeground#F5F1E8
  • list.focusBackground#3F3F3F
  • list.highlightForeground#D4A52C
  • list.hoverBackground#3F3F3F
  • minimap.background#2F2F2F
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#555555
  • minimapSlider.hoverBackground#777777
  • panel.background#2B2B2B
  • panel.border#444444
  • panelTitle.activeBorder#D4A52C
  • panelTitle.activeForeground#F5F1E8
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#999999
  • scrollbarSlider.background#555555
  • scrollbarSlider.hoverBackground#777777
  • sideBar.background#242424
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#2F2F2F
  • sideBarSectionHeader.foreground#E0E0E0
  • sideBarTitle.foreground#D4A75A
  • statusBar.background#3B2E2A
  • statusBar.debuggingBackground#C94F26
  • statusBar.foreground#F5F1E8
  • statusBar.noFolderBackground#3B2E2A
  • statusBarItem.hoverBackground#D4A52C
  • tab.activeBackground#2F2F2F
  • tab.activeBorder#D4A52C
  • tab.activeForeground#F5F1E8
  • tab.border#3A3A3A
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#3A6B7C
  • terminal.ansiBrightBlue#5A8BA0
  • terminal.ansiBrightCyan#71A68F
  • terminal.ansiBrightGreen#8AA64B
  • terminal.ansiBrightMagenta#93729D
  • terminal.ansiBrightRed#D07A45
  • terminal.ansiBrightYellow#E5B33D
  • terminal.ansiCyan#5A9278
  • terminal.ansiGreen#6F8230
  • terminal.ansiMagenta#7A5A7A
  • terminal.ansiRed#B75E34
  • terminal.ansiYellow#D4A52C
  • terminal.background#2F2F2F
  • terminal.foreground#F5F1E8
  • titleBar.activeBackground#3B2E2A
  • titleBar.activeForeground#F5F1E8
  • titleBar.inactiveBackground#2B2B2B
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3A6B7Citalic
string, string.quoted, string.template#D4A52C—
keyword, storage.type, storage.modifier#B75E34bold
keyword.operator, punctuation.accessor#B75E34—
variable, variable.other#F5F1E8—
variable.parameter#3A6B7Citalic
entity.name.function, support.function#B75E34—
meta.function-call#B75E34—
entity.name.class, entity.name.type.class, support.class#D4A75Abold
entity.name.type, support.type#D4A75A—
entity.name.type.interface#3A6B7Citalic
constant.numeric#D4A52C—
constant, constant.language, constant.character#3A6B7C—
constant.language.boolean#B75E34bold
variable.other.property, support.variable.property#3A6B7C—
meta.object-literal.key#D4A75A—
entity.name.tag, punctuation.definition.tag#B75E34—
entity.other.attribute-name#3A6B7Citalic
punctuation, meta.brace#777777—
string.regexp#6F8230—
constant.character.escape#7A5A7A—
meta.decorator, punctuation.decorator#B75E34—
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#D4A52Cbold
markup.bold#D4A52Cbold
markup.italic#3A6B7Citalic
markup.underline.link#3A6B7C—
markup.inline.raw, markup.fenced_code#777777—
support.type.property-name.json#D4A75A—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3A6B7C—
support.type.property-name.css#B75E34—
support.constant.property-value.css#6F8230—