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#b31212
  • activityBar.background#0f0f0f
  • activityBar.foreground#b31212
  • activityBarBadge.background#b31212
  • activityBarBadge.foreground#0b0b0b
  • badge.background#b31212
  • badge.foreground#0b0b0b
  • button.background#151515
  • button.foreground#ffffff
  • button.hoverBackground#212121
  • dropdown.background#111111
  • dropdown.border#151515
  • dropdown.foreground#d0d0d0
  • editor.background#0b0b0b
  • editor.findMatchBackground#b3121244
  • editor.findMatchHighlightBackground#b3121222
  • editor.foreground#d0d0d0
  • editor.lineHighlightBackground#1a1a1a80
  • editor.lineHighlightBorder#1a1a1aff
  • editor.selectionBackground#b3121244
  • editor.selectionHighlightBackground#b3121222
  • editorBracketMatch.background#b3121244
  • editorBracketMatch.border#b31212
  • editorCursor.foreground#b31212
  • editorGroupHeader.tabsBackground#0b0b0b
  • editorIndentGuide.activeBackground#33333388
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#b31212
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#b31212
  • gitDecoration.conflictingResourceForeground#cfa200
  • gitDecoration.deletedResourceForeground#b31212
  • gitDecoration.modifiedResourceForeground#b31212
  • gitDecoration.untrackedResourceForeground#5ab86c
  • input.background#111111
  • input.border#151515
  • input.foreground#d0d0d0
  • input.placeholderForeground#666666
  • inputOption.activeBorder#b31212
  • list.activeSelectionBackground#151515
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#151515
  • list.highlightForeground#b31212
  • list.hoverBackground#15151566
  • minimap.background#0b0b0b
  • minimapSlider.activeBackground#b3121266
  • minimapSlider.background#b3121222
  • minimapSlider.hoverBackground#b3121244
  • panel.background#0b0b0b
  • panel.border#151515
  • panelTitle.activeBorder#b31212
  • panelTitle.activeForeground#b31212
  • panelTitle.inactiveForeground#c0c0c0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#b3121288
  • scrollbarSlider.background#44444444
  • scrollbarSlider.hoverBackground#44444488
  • sideBar.background#111111
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#0f0f0f
  • sideBarSectionHeader.foreground#7a538d
  • sideBarTitle.foreground#7a538d
  • statusBar.background#151515
  • statusBar.debuggingBackground#8e44ad
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#0f0f0f
  • statusBarItem.hoverBackground#212121
  • tab.activeBackground#151515
  • tab.activeBorder#b31212
  • tab.activeForeground#ffffff
  • tab.border#0b0b0b
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#c0c0c0
  • terminal.ansiBlue#5a6abf
  • terminal.ansiBrightBlue#7a89d0
  • terminal.ansiBrightCyan#7ad0d0
  • terminal.ansiBrightGreen#7ad07a
  • terminal.ansiBrightMagenta#d07ad0
  • terminal.ansiBrightRed#d05858
  • terminal.ansiBrightYellow#e0c060
  • terminal.ansiCyan#5abfbf
  • terminal.ansiGreen#5abf5a
  • terminal.ansiMagenta#a062b8
  • terminal.ansiRed#b31212
  • terminal.ansiYellow#cfa200
  • terminal.background#0b0b0b
  • terminal.foreground#d0d0d0
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#d0d0d0
  • titleBar.inactiveBackground#0b0b0b
  • titleBar.inactiveForeground#c0c0c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#444444italic
string, string.quoted, string.template#58a06d
keyword, storage.type, storage.modifier#ff5c57bold
keyword.operator, punctuation.accessor#c9c9c9
variable, variable.other#c9c9c9
variable.parameter#c9a86aitalic
entity.name.function, support.function#c9c9c9
meta.function-call#a8a8a8
entity.name.class, entity.name.type.class, support.class#6b5b95bold
entity.name.type, support.type#6b5b95
entity.name.type.interface#58a06ditalic
constant.numeric#c9a86a
constant, constant.language, constant.character#c9a86a
constant.language.boolean#c9a86abold
variable.other.property, support.variable.property#a8a8a8
meta.object-literal.key#c9c9c9
entity.name.tag, punctuation.definition.tag#ff5c57
entity.other.attribute-name#6b5b95italic
punctuation, meta.brace#a8a8a8
string.regexp#ff5c57
constant.character.escape#58a06d
meta.decorator, punctuation.decorator#c9a86a
invalid, invalid.illegal#ff5c57strikethrough
markup.heading, entity.name.section#ff5c57bold
markup.bold#c9a86abold
markup.italic#6b5b95italic
markup.underline.link#58a06d
markup.inline.raw, markup.fenced_code#58a06d
support.type.property-name.json#ff5c57
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c9a86a
support.type.property-name.css#c9c9c9
support.constant.property-value.css#58a06d