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#C41E3A
  • activityBar.background#141414
  • activityBar.foreground#A0A0A0
  • activityBarBadge.background#C41E3A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C41E3A
  • badge.foreground#FFFFFF
  • button.background#3A3A3A
  • button.foreground#E0E0E0
  • button.hoverBackground#4A4A4A
  • dropdown.background#1A1A1A
  • dropdown.border#3A3A3A
  • dropdown.foreground#E0E0E0
  • editor.background#0D0D0D
  • editor.findMatchBackground#C41E3A
  • editor.findMatchHighlightBackground#8A2F2F
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#3A3A3A
  • editor.selectionBackground#5A5A5A
  • editor.selectionHighlightBackground#3A3A3A
  • editorBracketMatch.background#3A3A3A
  • editorBracketMatch.border#C41E3A
  • editorCursor.foreground#E0E0E0
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#E0E0E0
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#C41E3A
  • gitDecoration.conflictingResourceForeground#A074A0
  • gitDecoration.deletedResourceForeground#C41E3A
  • gitDecoration.modifiedResourceForeground#5A9A5A
  • gitDecoration.untrackedResourceForeground#4A6EA9
  • input.background#1A1A1A
  • input.border#3A3A3A
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#C41E3A
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#2A2A2A
  • list.highlightForeground#C41E3A
  • list.hoverBackground#2A2A2A
  • minimap.background#151515
  • minimapSlider.activeBackground#777777
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#555555
  • panel.background#151515
  • panel.border#2A2A2A
  • panelTitle.activeBorder#C41E3A
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#151515
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#C0C0C0
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#141414
  • statusBar.debuggingBackground#5A5A5A
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#0D0D0D
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#151515
  • tab.activeBorder#C41E3A
  • tab.activeForeground#E0E0E0
  • tab.border#2A2A2A
  • tab.inactiveBackground#0D0D0D
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A6EA9
  • terminal.ansiBrightBlue#6B8FBF
  • terminal.ansiBrightCyan#78BFCF
  • terminal.ansiBrightGreen#78C878
  • terminal.ansiBrightMagenta#C994D5
  • terminal.ansiBrightRed#E04A4A
  • terminal.ansiBrightYellow#D8C973
  • terminal.ansiCyan#5A8FA1
  • terminal.ansiGreen#5A9A5A
  • terminal.ansiMagenta#A074A0
  • terminal.ansiRed#C41E3A
  • terminal.ansiYellow#B5A041
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#5A9A5A—
keyword, storage.type, storage.modifier#C41E3Abold
keyword.operator, punctuation.accessor#A074A0—
variable, variable.other#E0E0E0—
variable.parameter#8A8A8Aitalic
entity.name.function, support.function#4A6EA9—
meta.function-call#6B8FBF—
entity.name.class, entity.name.type.class, support.class#78C878bold
entity.name.type, support.type#78BFCF—
entity.name.type.interface#78C878italic
constant.numeric#D8C973—
constant, constant.language, constant.character#A074A0—
constant.language.boolean#C41E3Abold
variable.other.property, support.variable.property#5A5A5A—
meta.object-literal.key#5A5A5A—
entity.name.tag, punctuation.definition.tag#C41E3A—
entity.other.attribute-name#C41E3Aitalic
punctuation, meta.brace#777777—
string.regexp#5A9A5A—
constant.character.escape#C41E3A—
meta.decorator, punctuation.decorator#4A6EA9—
invalid, invalid.illegal#E53E53strikethrough
markup.heading, entity.name.section#E0E0E0bold
markup.bold#E0E0E0bold
markup.italic#E0E0E0italic
markup.underline.link#4A6EA9—
markup.inline.raw, markup.fenced_code#5A9A5A—
support.type.property-name.json#5A9A5A—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4A6EA9—
support.type.property-name.css#5A9A5A—
support.constant.property-value.css#D8C973—