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#d72638
  • activityBar.background#0a0b0d
  • activityBar.foreground#e0e2e5
  • activityBarBadge.background#d72638
  • activityBarBadge.foreground#0a0b0d
  • badge.background#d72638
  • badge.foreground#0a0b0d
  • button.background#d72638
  • button.foreground#ffffff
  • button.hoverBackground#d72638cc
  • dropdown.background#0f1114
  • dropdown.border#c5a058
  • dropdown.foreground#e0e2e5
  • editor.background#0a0b0d
  • editor.findMatchBackground#c5a05844
  • editor.findMatchHighlightBackground#c5a05822
  • editor.foreground#e0e2e5
  • editor.lineHighlightBackground#1a1b1f40
  • editor.lineHighlightBorder#1a1b1f80
  • editor.selectionBackground#d7263866
  • editor.selectionHighlightBackground#d7263833
  • editorBracketMatch.background#d7263333
  • editorBracketMatch.border#d72638
  • editorCursor.foreground#e0e2e5
  • editorGroupHeader.tabsBackground#0a0b0d
  • editorIndentGuide.activeBackground#c5a05888
  • editorIndentGuide.background#777a8055
  • editorLineNumber.activeForeground#d72638
  • editorLineNumber.foreground#777a80
  • editorWhitespace.foreground#777a80
  • focusBorder#d72638
  • gitDecoration.conflictingResourceForeground#c5a058
  • gitDecoration.deletedResourceForeground#a63f3f
  • gitDecoration.modifiedResourceForeground#d72638
  • gitDecoration.untrackedResourceForeground#5ebe99
  • input.background#0f1114
  • input.border#c5a058
  • input.foreground#e0e2e5
  • input.placeholderForeground#777a80
  • inputOption.activeBorder#d72638
  • list.activeSelectionBackground#111317
  • list.activeSelectionForeground#e0e2e5
  • list.focusBackground#111317
  • list.highlightForeground#d72638
  • list.hoverBackground#11131766
  • minimap.background#0a0b0d
  • minimapSlider.activeBackground#777a6666
  • minimapSlider.background#777a2222
  • minimapSlider.hoverBackground#777a4444
  • panel.background#0f1114
  • panel.border#111317
  • panelTitle.activeBorder#d72638
  • panelTitle.activeForeground#e0e2e5
  • panelTitle.inactiveForeground#777a80
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#d7263888
  • scrollbarSlider.background#777a8055
  • scrollbarSlider.hoverBackground#777a8088
  • sideBar.background#0f1114
  • sideBar.foreground#e0e2e5
  • sideBarSectionHeader.background#0a0b0d
  • sideBarSectionHeader.foreground#c5a058
  • sideBarTitle.foreground#e0e2e5
  • statusBar.background#111317
  • statusBar.debuggingBackground#d72638
  • statusBar.foreground#e0e2e5
  • statusBar.noFolderBackground#111317
  • statusBarItem.hoverBackground#d7263844
  • tab.activeBackground#111317
  • tab.activeBorder#d72638
  • tab.activeForeground#e0e2e5
  • tab.border#0a0b0d
  • tab.inactiveBackground#0f1114
  • tab.inactiveForeground#777a80
  • terminal.ansiBlue#3a7ca5
  • terminal.ansiBrightBlue#5faedc
  • terminal.ansiBrightCyan#20c9ff
  • terminal.ansiBrightGreen#78d9a9
  • terminal.ansiBrightMagenta#c96eb4
  • terminal.ansiBrightRed#f05a5a
  • terminal.ansiBrightYellow#e6b96a
  • terminal.ansiCyan#00b4d8
  • terminal.ansiGreen#5ebe99
  • terminal.ansiMagenta#a84f96
  • terminal.ansiRed#d72638
  • terminal.ansiYellow#c5a058
  • terminal.background#0a0b0d
  • terminal.foreground#e0e2e5
  • titleBar.activeBackground#111317
  • titleBar.activeForeground#e0e2e5
  • titleBar.inactiveBackground#0a0b0d
  • titleBar.inactiveForeground#777a80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5d66italic
string, string.quoted, string.template#00b4d8
keyword, storage.type, storage.modifier#d72638bold
keyword.operator, punctuation.accessor#c5a058
variable, variable.other#e0e2e5
variable.parameter#00b4d8italic
entity.name.function, support.function#c5a058
meta.function-call#e0e2e5
entity.name.class, entity.name.type.class, support.class#d72638bold
entity.name.type, support.type#c5a058
entity.name.type.interface#00b4d8italic
constant.numeric#c5a058
constant, constant.language, constant.character#d72638
constant.language.boolean#d72638bold
variable.other.property, support.variable.property#e0e2e5
meta.object-literal.key#c5a058
entity.name.tag, punctuation.definition.tag#d72638
entity.other.attribute-name#5a5d66italic
punctuation, meta.brace#e0e2e5
string.regexp#c5a058
constant.character.escape#d72638
meta.decorator, punctuation.decorator#c5a058
invalid, invalid.illegal#ff6f6fstrikethrough
markup.heading, entity.name.section#d72638bold
markup.bold#d72638bold
markup.italic#5a5d66italic
markup.underline.link#00b4d8
markup.inline.raw, markup.fenced_code#00b4d8
support.type.property-name.json#d72638
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c5a058
support.type.property-name.css#00b4d8
support.constant.property-value.css#d72638