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#FF5F57
  • activityBar.background#0A0A0C
  • activityBar.foreground#FF5F57
  • activityBarBadge.background#FF5F57
  • activityBarBadge.foreground#09090B
  • badge.background#FF5F57
  • badge.foreground#09090B
  • button.background#1A1A1C
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2E
  • dropdown.background#0D0D10
  • dropdown.border#1A1A1C
  • dropdown.foreground#E5E5E5
  • editor.background#09090B
  • editor.findMatchBackground#FF5F5744
  • editor.findMatchHighlightBackground#FF5F5722
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#1A1A1D55
  • editor.lineHighlightBorder#1A1A1D80
  • editor.selectionBackground#33334455
  • editor.selectionHighlightBackground#33334433
  • editorBracketMatch.background#FF5F5733
  • editorBracketMatch.border#FF5F57
  • editorCursor.foreground#FF5F57
  • editorGroupHeader.tabsBackground#09090B
  • editorIndentGuide.activeBackground#2A2A2E88
  • editorIndentGuide.background#2A2A2E44
  • editorLineNumber.activeForeground#FF5F57
  • editorLineNumber.foreground#4B4B58
  • editorWhitespace.foreground#2A2A2E
  • focusBorder#FF5F57
  • gitDecoration.conflictingResourceForeground#FF5F57
  • gitDecoration.deletedResourceForeground#FF5F57
  • gitDecoration.modifiedResourceForeground#5FA9FF
  • gitDecoration.untrackedResourceForeground#5FA9FF
  • input.background#0D0D10
  • input.border#1A1A1C
  • input.foreground#E5E5E5
  • input.placeholderForeground#4B4B58
  • inputOption.activeBorder#FF5F57
  • list.activeSelectionBackground#1A1A1C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A1C
  • list.highlightForeground#FF5F57
  • list.hoverBackground#1A1A1C66
  • minimap.background#09090B
  • minimapSlider.activeBackground#FF5F5766
  • minimapSlider.background#FF5F5722
  • minimapSlider.hoverBackground#FF5F5744
  • panel.background#09090B
  • panel.border#1A1A1C
  • panelTitle.activeBorder#FF5F57
  • panelTitle.activeForeground#FF5F57
  • panelTitle.inactiveForeground#B0B0B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF5F5888
  • scrollbarSlider.background#4B4B5844
  • scrollbarSlider.hoverBackground#4B4B5888
  • sideBar.background#0D0D10
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#0A0A0C
  • sideBarSectionHeader.foreground#FF5F57
  • sideBarTitle.foreground#FF5F57
  • statusBar.background#111113
  • statusBar.debuggingBackground#FF5F57
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#0A0A0C
  • statusBarItem.hoverBackground#1A1A1C
  • tab.activeBackground#111113
  • tab.activeBorder#FF5F57
  • tab.activeForeground#FFFFFF
  • tab.border#09090B
  • tab.inactiveBackground#0D0D10
  • tab.inactiveForeground#B0B0B0
  • terminal.ansiBlue#5FA9FF
  • terminal.ansiBrightBlue#5FA9FF
  • terminal.ansiBrightCyan#5FA9FF
  • terminal.ansiBrightGreen#71FF8A
  • terminal.ansiBrightMagenta#FF5F57
  • terminal.ansiBrightRed#FF5F57
  • terminal.ansiBrightYellow#FFFFFF
  • terminal.ansiCyan#5FA9FF
  • terminal.ansiGreen#71FF8A
  • terminal.ansiMagenta#FF5F57
  • terminal.ansiRed#FF5F57
  • terminal.ansiYellow#E5E5E5
  • terminal.background#09090B
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#0A0A0C
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#09090B
  • titleBar.inactiveForeground#B0B0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#71FF8A
keyword, storage.type, storage.modifier#FF5F57bold
keyword.operator, punctuation.accessor#E5E5E5
variable, variable.other#E5E5E5
variable.parameter#A0A0A0italic
entity.name.function, support.function#5FA9FF
meta.function-call#E5E5E5
entity.name.class, entity.name.type.class, support.class#FF5F57bold
entity.name.type, support.type#5FA9FF
entity.name.type.interface#5FA9FFitalic
constant.numeric#FF5F57
constant, constant.language, constant.character#5FA9FF
constant.language.boolean#FF5F57bold
variable.other.property, support.variable.property#E5E5E5
meta.object-literal.key#FF5F57
entity.name.tag, punctuation.definition.tag#FF5F57
entity.other.attribute-name#5FA9FFitalic
punctuation, meta.brace#A0A0A0
string.regexp#FF5F57
constant.character.escape#5FA9FF
meta.decorator, punctuation.decorator#FF5F57
invalid, invalid.illegal#FF5F57strikethrough
markup.heading, entity.name.section#FF5F57bold
markup.bold#5FA9FFbold
markup.italic#A0A0A0italic
markup.underline.link#5FA9FF
markup.inline.raw, markup.fenced_code#5FA9FF
support.type.property-name.json#FF5F57
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF5F57
support.type.property-name.css#5FA9FF
support.constant.property-value.css#E5E5E5