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#C1121F
  • activityBar.background#111214
  • activityBar.foreground#D0D0D0
  • activityBarBadge.background#C1121F
  • activityBarBadge.foreground#0B0C0D
  • badge.background#C1121F
  • badge.foreground#0B0C0D
  • button.background#C1121F
  • button.foreground#0B0C0D
  • button.hoverBackground#A01015
  • dropdown.background#0E0F10
  • dropdown.border#3C3F41
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C0D
  • editor.findMatchBackground#FF6F0040
  • editor.findMatchHighlightBackground#FF6F0030
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#1A1B1C80
  • editor.lineHighlightBorder#C1121F
  • editor.selectionBackground#C1121F40
  • editor.selectionHighlightBackground#C1121F30
  • editorBracketMatch.background#C1121F22
  • editorBracketMatch.border#C1121F
  • editorCursor.foreground#C1121F
  • editorGroupHeader.tabsBackground#0B0C0D
  • editorIndentGuide.activeBackground#3C3F4188
  • editorIndentGuide.background#3C3F4144
  • editorLineNumber.activeForeground#D0D0D0
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#3C3F41
  • focusBorder#C1121F
  • gitDecoration.conflictingResourceForeground#FF6F00
  • gitDecoration.deletedResourceForeground#C1121F
  • gitDecoration.modifiedResourceForeground#4A90E2
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#0E0F10
  • input.border#3C3F41
  • input.foreground#D0D0D0
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#C1121F
  • list.activeSelectionBackground#151618
  • list.activeSelectionForeground#D0D0D0
  • list.focusBackground#151618
  • list.highlightForeground#C1121F
  • list.hoverBackground#15161866
  • minimap.background#0B0C0D
  • minimapSlider.activeBackground#C1121F66
  • minimapSlider.background#3C3F4122
  • minimapSlider.hoverBackground#3C3F4144
  • panel.background#0B0C0D
  • panel.border#3C3F41
  • panelTitle.activeBorder#C1121F
  • panelTitle.activeForeground#D0D0D0
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C1121F88
  • scrollbarSlider.background#3C3F4144
  • scrollbarSlider.hoverBackground#3C3F4188
  • sideBar.background#0E0F10
  • sideBar.foreground#C6C6C6
  • sideBarSectionHeader.background#151618
  • sideBarSectionHeader.foreground#D0D0D0
  • sideBarTitle.foreground#D0D0D0
  • statusBar.background#151618
  • statusBar.debuggingBackground#C1121F
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0E0F10
  • statusBarItem.hoverBackground#232425
  • tab.activeBackground#0E0F10
  • tab.activeBorder#C1121F
  • tab.activeForeground#D0D0D0
  • tab.border#0B0C0D
  • tab.inactiveBackground#0B0C0D
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#6EBEFF
  • terminal.ansiBrightCyan#71F2F2
  • terminal.ansiBrightGreen#B8E0A6
  • terminal.ansiBrightMagenta#DE9BDE
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFB74D
  • terminal.ansiCyan#5FD0D0
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#C794C5
  • terminal.ansiRed#C1121F
  • terminal.ansiYellow#FF6F00
  • terminal.background#0B0C0D
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#0E0F10
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0C0D
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#FFB300
keyword, storage.type, storage.modifier#C1121Fbold
keyword.operator, punctuation.accessor#C794C5
variable, variable.other#C6C6C6
variable.parameter#FFB300italic
entity.name.function, support.function#4A90E2
meta.function-call#8BC34A
entity.name.class, entity.name.type.class, support.class#5FD0D0bold
entity.name.type, support.type#5FD0D0
entity.name.type.interface#FF6F00italic
constant.numeric#FFB300
constant, constant.language, constant.character#C794C5
constant.language.boolean#C1121Fbold
variable.other.property, support.variable.property#8BC34A
meta.object-literal.key#4A90E2
entity.name.tag, punctuation.definition.tag#C1121F
entity.other.attribute-name#C794C5italic
punctuation, meta.brace#D0D0D0
string.regexp#FF6F00
constant.character.escape#C794C5
meta.decorator, punctuation.decorator#4A90E2
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#C1121Fbold
markup.bold#C1121Fbold
markup.italic#FF6F00italic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#FF6F00
support.type.property-name.json#4A90E2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C1121F
support.type.property-name.css#4A90E2
support.constant.property-value.css#FF6F00