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#6EE7B7
  • activityBar.background#0C1A3A
  • activityBar.foreground#6EE7B7
  • activityBarBadge.background#6EE7B7
  • activityBarBadge.foreground#0A1228
  • badge.background#6EE7B7
  • badge.foreground#0A1228
  • button.background#152F5E
  • button.foreground#FFFFFF
  • button.hoverBackground#2A3E70
  • dropdown.background#0C1A3A
  • dropdown.border#152F5E
  • dropdown.foreground#E5ECF2
  • editor.background#0A1228
  • editor.findMatchBackground#6EE7B744
  • editor.findMatchHighlightBackground#6EE7B722
  • editor.foreground#E5ECF2
  • editor.lineHighlightBackground#152F5E40
  • editor.lineHighlightBorder#152F5E80
  • editor.selectionBackground#2B5D8C55
  • editor.selectionHighlightBackground#2B5D8C33
  • editorBracketMatch.background#6EE7B733
  • editorBracketMatch.border#6EE7B7
  • editorCursor.foreground#6EE7B7
  • editorGroupHeader.tabsBackground#0A1228
  • editorIndentGuide.activeBackground#2A3E7088
  • editorIndentGuide.background#2A3E7044
  • editorLineNumber.activeForeground#6EE7B7
  • editorLineNumber.foreground#4A5F85
  • editorWhitespace.foreground#2A3E70
  • focusBorder#6EE7B7
  • gitDecoration.conflictingResourceForeground#FFE56B
  • gitDecoration.deletedResourceForeground#FF8C8C
  • gitDecoration.modifiedResourceForeground#6EE7B7
  • gitDecoration.untrackedResourceForeground#7DE6A5
  • input.background#0C1A3A
  • input.border#152F5E
  • input.foreground#E5ECF2
  • input.placeholderForeground#4A5F85
  • inputOption.activeBorder#6EE7B7
  • list.activeSelectionBackground#152F5E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#152F5E
  • list.highlightForeground#6EE7B7
  • list.hoverBackground#152F5E66
  • minimap.background#0A1228
  • minimapSlider.activeBackground#6EE7B766
  • minimapSlider.background#6EE7B722
  • minimapSlider.hoverBackground#6EE7B744
  • panel.background#0A1228
  • panel.border#152F5E
  • panelTitle.activeBorder#6EE7B7
  • panelTitle.activeForeground#6EE7B7
  • panelTitle.inactiveForeground#A3B5CC
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6EE7B788
  • scrollbarSlider.background#4A5F8544
  • scrollbarSlider.hoverBackground#4A5F8588
  • sideBar.background#0C1A3A
  • sideBar.foreground#A3B5CC
  • sideBarSectionHeader.background#0C1A3A
  • sideBarSectionHeader.foreground#6EE7B7
  • sideBarTitle.foreground#6EE7B7
  • statusBar.background#152F5E
  • statusBar.debuggingBackground#FFB67A
  • statusBar.foreground#E5ECF2
  • statusBar.noFolderBackground#0C1A3A
  • statusBarItem.hoverBackground#2A3E70
  • tab.activeBackground#152F5E
  • tab.activeBorder#6EE7B7
  • tab.activeForeground#FFFFFF
  • tab.border#0A1228
  • tab.inactiveBackground#0C1A3A
  • tab.inactiveForeground#A3B5CC
  • terminal.ansiBlue#6EE7B7
  • terminal.ansiBrightBlue#9DFAFF
  • terminal.ansiBrightCyan#B0F9FF
  • terminal.ansiBrightGreen#A5F7C3
  • terminal.ansiBrightMagenta#E5B3FF
  • terminal.ansiBrightRed#FFB2B2
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#8BEEFF
  • terminal.ansiGreen#7DE6A5
  • terminal.ansiMagenta#CFA1FF
  • terminal.ansiRed#FF8C8C
  • terminal.ansiYellow#FFE56B
  • terminal.background#0A1228
  • terminal.foreground#E5ECF2
  • titleBar.activeBackground#0C1A3A
  • titleBar.activeForeground#E5ECF2
  • titleBar.inactiveBackground#0A1228
  • titleBar.inactiveForeground#A3B5CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6C8Aitalic
string, string.quoted, string.template#8BEEFF
keyword, storage.type, storage.modifier#6EE7B7bold
keyword.operator, punctuation.accessor#9DFAFF
variable, variable.other#C0D4F0
variable.parameter#FFB86Bitalic
entity.name.function, support.function#7DDFFB
meta.function-call#A3C8E8
entity.name.class, entity.name.type.class, support.class#9FC5FFbold
entity.name.type, support.type#9FC5FF
entity.name.type.interface#8BEEFFitalic
constant.numeric#FF9E80
constant, constant.language, constant.character#FFB86B
constant.language.boolean#FF9E80bold
variable.other.property, support.variable.property#A3C8E8
meta.object-literal.key#7DDFFB
entity.name.tag, punctuation.definition.tag#6EE7B7
entity.other.attribute-name#CFA1FFitalic
punctuation, meta.brace#9DFAFF
string.regexp#FF9E80
constant.character.escape#CFA1FF
meta.decorator, punctuation.decorator#FFE56B
invalid, invalid.illegal#FF8C8Cstrikethrough
markup.heading, entity.name.section#6EE7B7bold
markup.bold#FFB86Bbold
markup.italic#CFA1FFitalic
markup.underline.link#8BEEFF
markup.inline.raw, markup.fenced_code#7DE6A5
support.type.property-name.json#6EE7B7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE56B
support.type.property-name.css#7DDFFB
support.constant.property-value.css#8BEEFF