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#D28B4E
  • activityBar.background#11151C
  • activityBar.foreground#D28B4E
  • activityBarBadge.background#D28B4E
  • activityBarBadge.foreground#0B0F15
  • badge.background#D28B4E
  • badge.foreground#0B0F15
  • button.background#16202A
  • button.foreground#FFFFFF
  • button.hoverBackground#1B2634
  • dropdown.background#11151C
  • dropdown.border#16202A
  • dropdown.foreground#D8C8B4
  • editor.background#0B0F15
  • editor.findMatchBackground#D28B4E44
  • editor.findMatchHighlightBackground#D28B4E22
  • editor.foreground#D8C8B4
  • editor.lineHighlightBackground#16202A40
  • editor.lineHighlightBorder#16202A80
  • editor.selectionBackground#6A9A71AA
  • editor.selectionHighlightBackground#6A9A7166
  • editorBracketMatch.background#D28B4E33
  • editorBracketMatch.border#D28B4E
  • editorCursor.foreground#D28B4E
  • editorGroupHeader.tabsBackground#0B0F15
  • editorIndentGuide.activeBackground#5A574F88
  • editorIndentGuide.background#5A574F44
  • editorLineNumber.activeForeground#D28B4E
  • editorLineNumber.foreground#5A574F
  • editorWhitespace.foreground#5A574F44
  • focusBorder#D28B4E
  • gitDecoration.conflictingResourceForeground#E1A163
  • gitDecoration.deletedResourceForeground#B4534D
  • gitDecoration.modifiedResourceForeground#D28B4E
  • gitDecoration.untrackedResourceForeground#8FCB9B
  • input.background#11151C
  • input.border#16202A
  • input.foreground#D8C8B4
  • input.placeholderForeground#5A574F
  • inputOption.activeBorder#D28B4E
  • list.activeSelectionBackground#16202A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#16202A
  • list.highlightForeground#D28B4E
  • list.hoverBackground#16202A66
  • minimap.background#0B0F15
  • minimapSlider.activeBackground#D28B4E66
  • minimapSlider.background#D28B4E22
  • minimapSlider.hoverBackground#D28B4E44
  • panel.background#0B0F15
  • panel.border#16202A
  • panelTitle.activeBorder#D28B4E
  • panelTitle.activeForeground#D28B4E
  • panelTitle.inactiveForeground#C2B5A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D28B4E88
  • scrollbarSlider.background#5A574F44
  • scrollbarSlider.hoverBackground#5A574F88
  • sideBar.background#11151C
  • sideBar.foreground#C2B5A0
  • sideBarSectionHeader.background#11151C
  • sideBarSectionHeader.foreground#D28B4E
  • sideBarTitle.foreground#D28B4E
  • statusBar.background#16202A
  • statusBar.debuggingBackground#D28B4E
  • statusBar.foreground#D8C8B4
  • statusBar.noFolderBackground#11151C
  • statusBarItem.hoverBackground#1B2634
  • tab.activeBackground#16202A
  • tab.activeBorder#D28B4E
  • tab.activeForeground#FFFFFF
  • tab.border#0B0F15
  • tab.inactiveBackground#11151C
  • tab.inactiveForeground#C2B5A0
  • terminal.ansiBlue#6A9A71
  • terminal.ansiBrightBlue#7CAB84
  • terminal.ansiBrightCyan#A5D7A9
  • terminal.ansiBrightGreen#A5D7A9
  • terminal.ansiBrightMagenta#D8C8B4
  • terminal.ansiBrightRed#C96A5E
  • terminal.ansiBrightYellow#E1A163
  • terminal.ansiCyan#8FCB9B
  • terminal.ansiGreen#8FCB9B
  • terminal.ansiMagenta#C2B5A0
  • terminal.ansiRed#B4534D
  • terminal.ansiYellow#D28B4E
  • terminal.background#0B0F15
  • terminal.foreground#D8C8B4
  • titleBar.activeBackground#11151C
  • titleBar.activeForeground#D8C8B4
  • titleBar.inactiveBackground#0B0F15
  • titleBar.inactiveForeground#C2B5A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A574Fitalic
string, string.quoted, string.template#8FCB9B
keyword, storage.type, storage.modifier#D28B4Ebold
keyword.operator, punctuation.accessor#D8C8B4
variable, variable.other#C2B5A0
variable.parameter#D4A76Citalic
entity.name.function, support.function#A1C5A9
meta.function-call#D8C8B4
entity.name.class, entity.name.type.class, support.class#D28B4Ebold
entity.name.type, support.type#A9C78F
entity.name.type.interface#6A9A71italic
constant.numeric#D4A76C
constant, constant.language, constant.character#D28B4E
constant.language.boolean#D28B4Ebold
variable.other.property, support.variable.property#C2B5A0
meta.object-literal.key#D4A76C
entity.name.tag, punctuation.definition.tag#D28B4E
entity.other.attribute-name#6A9A71italic
punctuation, meta.brace#D8C8B4
string.regexp#D4A76C
constant.character.escape#6A9A71
meta.decorator, punctuation.decorator#D4A76C
invalid, invalid.illegal#B4534Dstrikethrough
markup.heading, entity.name.section#D28B4Ebold
markup.bold#D4A76Cbold
markup.italic#6A9A71italic
markup.underline.link#6A9A71
markup.inline.raw, markup.fenced_code#8FCB9B
support.type.property-name.json#D28B4E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A76C
support.type.property-name.css#D28B4E
support.constant.property-value.css#8FCB9B