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