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#D32F2F
  • activityBar.background#0D0D17
  • activityBar.foreground#C5A3FF
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#0A0A13
  • badge.background#D32F2F
  • badge.foreground#0A0A13
  • button.background#14141F
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A34
  • dropdown.background#0C0C15
  • dropdown.border#14141F
  • dropdown.foreground#E0E0FF
  • editor.background#0A0A13
  • editor.findMatchBackground#D32F2F55
  • editor.findMatchHighlightBackground#D32F2F30
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#1E1E2A80
  • editor.lineHighlightBorder#1E1E2AB0
  • editor.selectionBackground#D32F2F40
  • editor.selectionHighlightBackground#D32F2F30
  • editorBracketMatch.background#C5A3FF33
  • editorBracketMatch.border#C5A3FF
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#0A0A13
  • editorIndentGuide.activeBackground#33334488
  • editorIndentGuide.background#33334444
  • editorLineNumber.activeForeground#C5A3FF
  • editorLineNumber.foreground#555566
  • editorWhitespace.foreground#333344
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#E0E0FF
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#C5A3FF
  • gitDecoration.untrackedResourceForeground#6CCC64
  • input.background#0C0C15
  • input.border#14141F
  • input.foreground#E0E0FF
  • input.placeholderForeground#555566
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#14141F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#14141F
  • list.highlightForeground#D32F2F
  • list.hoverBackground#1E1E2A66
  • minimap.background#0A0A13
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#D32F2F22
  • minimapSlider.hoverBackground#D32F2F44
  • panel.background#0A0A13
  • panel.border#14141F
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#D32F2F
  • panelTitle.inactiveForeground#B0B0C0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C5A3FF88
  • scrollbarSlider.background#55556644
  • scrollbarSlider.hoverBackground#55556688
  • sideBar.background#0C0C15
  • sideBar.foreground#B0B0C0
  • sideBarSectionHeader.background#0D0D17
  • sideBarSectionHeader.foreground#C5A3FF
  • sideBarTitle.foreground#C5A3FF
  • statusBar.background#14141F
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#0D0D17
  • statusBarItem.hoverBackground#2A2A34
  • tab.activeBackground#14141F
  • tab.activeBorder#D32F2F
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A13
  • tab.inactiveBackground#0C0C15
  • tab.inactiveForeground#B0B0C0
  • terminal.ansiBlue#6C5EB5
  • terminal.ansiBrightBlue#8A79D6
  • terminal.ansiBrightCyan#75D97A
  • terminal.ansiBrightGreen#75D97A
  • terminal.ansiBrightMagenta#E57373
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#F5F5F5
  • terminal.ansiCyan#6CCC64
  • terminal.ansiGreen#6CCC64
  • terminal.ansiMagenta#D32F2F
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#E0E0FF
  • terminal.background#0A0A13
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#0D0D17
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#0A0A13
  • titleBar.inactiveForeground#B0B0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555566italic
string, string.quoted, string.template#6CCC64
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#E0E0FF
variable, variable.other#E0E0FF
variable.parameter#C5A3FFitalic
entity.name.function, support.function#E0E0FF
meta.function-call#A0A0B0
entity.name.class, entity.name.type.class, support.class#C5A3FFbold
entity.name.type, support.type#C5A3FF
entity.name.type.interface#6CCC64italic
constant.numeric#D32F2F
constant, constant.language, constant.character#D32F2F
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#A0A0B0
meta.object-literal.key#E0E0FF
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#C5A3FFitalic
punctuation, meta.brace#A0A0B0
string.regexp#D32F2F
constant.character.escape#6CCC64
meta.decorator, punctuation.decorator#C5A3FF
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#C5A3FFitalic
markup.underline.link#6CCC64
markup.inline.raw, markup.fenced_code#6CCC64
support.type.property-name.json#E0E0FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D32F2F
support.type.property-name.css#E0E0FF
support.constant.property-value.css#6CCC64