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#D97434
  • activityBar.background#15171B
  • activityBar.foreground#D97434
  • activityBarBadge.background#D97434
  • activityBarBadge.foreground#0F1115
  • badge.background#D97434
  • badge.foreground#0F1115
  • button.background#1A1C20
  • button.foreground#FFFFFF
  • button.hoverBackground#252830
  • dropdown.background#111317
  • dropdown.border#1A1C20
  • dropdown.foreground#C0C5D0
  • editor.background#0F1115
  • editor.findMatchBackground#D9743440
  • editor.findMatchHighlightBackground#D9743420
  • editor.foreground#C0C5D0
  • editor.lineHighlightBackground#1A1C20A0
  • editor.lineHighlightBorder#1A1C2090
  • editor.selectionBackground#3E8EA080
  • editor.selectionHighlightBackground#3E8EA050
  • editorBracketMatch.background#3E8EA050
  • editorBracketMatch.border#3E8EA0
  • editorCursor.foreground#D97434
  • editorGroupHeader.tabsBackground#0F1115
  • editorIndentGuide.activeBackground#3E8EA090
  • editorIndentGuide.background#25283060
  • editorLineNumber.activeForeground#D97434
  • editorLineNumber.foreground#555A6E
  • editorWhitespace.foreground#252830
  • focusBorder#D97434
  • gitDecoration.conflictingResourceForeground#D9A334
  • gitDecoration.deletedResourceForeground#D97434
  • gitDecoration.modifiedResourceForeground#D97434
  • gitDecoration.untrackedResourceForeground#8AB4C7
  • input.background#111317
  • input.border#1A1C20
  • input.foreground#C0C5D0
  • input.placeholderForeground#555A6E
  • inputOption.activeBorder#D97434
  • list.activeSelectionBackground#1A1C20
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1C20
  • list.highlightForeground#D97434
  • list.hoverBackground#1A1C2080
  • minimap.background#0F1115
  • minimapSlider.activeBackground#3E8EA066
  • minimapSlider.background#3E8EA022
  • minimapSlider.hoverBackground#3E8EA044
  • panel.background#0F1115
  • panel.border#1A1C20
  • panelTitle.activeBorder#D97434
  • panelTitle.activeForeground#D97434
  • panelTitle.inactiveForeground#A0A5B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3E8EA088
  • scrollbarSlider.background#555A6E44
  • scrollbarSlider.hoverBackground#555A6E88
  • sideBar.background#111317
  • sideBar.foreground#A0A5B0
  • sideBarSectionHeader.background#15171B
  • sideBarSectionHeader.foreground#D97434
  • sideBarTitle.foreground#D97434
  • statusBar.background#1A1C20
  • statusBar.debuggingBackground#D97434
  • statusBar.foreground#C0C5D0
  • statusBar.noFolderBackground#15171B
  • statusBarItem.hoverBackground#252830
  • tab.activeBackground#1A1C20
  • tab.activeBorder#D97434
  • tab.activeForeground#FFFFFF
  • tab.border#0F1115
  • tab.inactiveBackground#111317
  • tab.inactiveForeground#A0A5B0
  • terminal.ansiBlue#3E8EA0
  • terminal.ansiBrightBlue#4FA5B5
  • terminal.ansiBrightCyan#6BD2E0
  • terminal.ansiBrightGreen#9CCFD0
  • terminal.ansiBrightMagenta#C68BBC
  • terminal.ansiBrightRed#E2864F
  • terminal.ansiBrightYellow#E4A351
  • terminal.ansiCyan#5CC8D8
  • terminal.ansiGreen#8AB4C7
  • terminal.ansiMagenta#B58AB0
  • terminal.ansiRed#D97434
  • terminal.ansiYellow#D9A334
  • terminal.background#0F1115
  • terminal.foreground#C0C5D0
  • titleBar.activeBackground#15171B
  • titleBar.activeForeground#C0C5D0
  • titleBar.inactiveBackground#0F1115
  • titleBar.inactiveForeground#A0A5B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555A6Eitalic
string, string.quoted, string.template#5CC8D8—
keyword, storage.type, storage.modifier#D97434bold
keyword.operator, punctuation.accessor#C0C5D0—
variable, variable.other#C0C5D0—
variable.parameter#D9A334italic
entity.name.function, support.function#8AB4C7—
meta.function-call#A0B8C5—
entity.name.class, entity.name.type.class, support.class#6F9EBBbold
entity.name.type, support.type#6F9EBB—
entity.name.type.interface#6F9EBBitalic
constant.numeric#D9A334—
constant, constant.language, constant.character#D9A334—
constant.language.boolean#D9A334bold
variable.other.property, support.variable.property#A0B8C5—
meta.object-literal.key#8AB4C7—
entity.name.tag, punctuation.definition.tag#D97434—
entity.other.attribute-name#B58AB0italic
punctuation, meta.brace#A0B8C5—
string.regexp#D97434—
constant.character.escape#B58AB0—
meta.decorator, punctuation.decorator#D9A334—
invalid, invalid.illegal#D97434strikethrough
markup.heading, entity.name.section#D97434bold
markup.bold#D9A334bold
markup.italic#B58AB0italic
markup.underline.link#8AB4C7—
markup.inline.raw, markup.fenced_code#5CC8D8—
support.type.property-name.json#8AB4C7—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D9A334—
support.type.property-name.css#8AB4C7—
support.constant.property-value.css#A0B8C5—