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#00F5E0
  • activityBar.background#0B1428
  • activityBar.foreground#6FAFFF
  • activityBarBadge.background#0098A6
  • activityBarBadge.foreground#0F1A2E
  • badge.background#0098A6
  • badge.foreground#0F1A2E
  • button.background#152E5C
  • button.foreground#FFFFFF
  • button.hoverBackground#1A3A70
  • dropdown.background#0C1620
  • dropdown.border#152E5C
  • dropdown.foreground#D0E8FF
  • editor.background#0F1A2E
  • editor.findMatchBackground#00F5E044
  • editor.findMatchHighlightBackground#00F5E022
  • editor.foreground#D0E8FF
  • editor.lineHighlightBackground#152E5C80
  • editor.lineHighlightBorder#152E5CA0
  • editor.selectionBackground#0098A680
  • editor.selectionHighlightBackground#0098A640
  • editorBracketMatch.background#0098A640
  • editorBracketMatch.border#0098A6
  • editorCursor.foreground#00F5E0
  • editorGroupHeader.tabsBackground#0F1A2E
  • editorIndentGuide.activeBackground#1A3A7088
  • editorIndentGuide.background#1A3A7044
  • editorLineNumber.activeForeground#6FAFFF
  • editorLineNumber.foreground#4A6A94
  • editorWhitespace.foreground#1A3A70
  • focusBorder#0098A6
  • gitDecoration.conflictingResourceForeground#FFE66B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#6FAFFF
  • gitDecoration.untrackedResourceForeground#7FFFD4
  • input.background#0C1620
  • input.border#152E5C
  • input.foreground#D0E8FF
  • input.placeholderForeground#4A6A94
  • inputOption.activeBorder#00F5E0
  • list.activeSelectionBackground#152E5C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#152E5C
  • list.highlightForeground#6FAFFF
  • list.hoverBackground#152E5C66
  • minimap.background#0F1A2E
  • minimapSlider.activeBackground#0098A766
  • minimapSlider.background#0098A722
  • minimapSlider.hoverBackground#0098A744
  • panel.background#0F1A2E
  • panel.border#152E5C
  • panelTitle.activeBorder#00F5E0
  • panelTitle.activeForeground#00F5E0
  • panelTitle.inactiveForeground#9AB4D4
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0098A788
  • scrollbarSlider.background#4A6A9444
  • scrollbarSlider.hoverBackground#4A6A9488
  • sideBar.background#0C1620
  • sideBar.foreground#9AB4D4
  • sideBarSectionHeader.background#0B1428
  • sideBarSectionHeader.foreground#6FAFFF
  • sideBarTitle.foreground#6FAFFF
  • statusBar.background#152E5C
  • statusBar.debuggingBackground#0098A6
  • statusBar.foreground#D0E8FF
  • statusBar.noFolderBackground#0B1428
  • statusBarItem.hoverBackground#1A3A70
  • tab.activeBackground#152E5C
  • tab.activeBorder#00F5E0
  • tab.activeForeground#FFFFFF
  • tab.border#0F1A2E
  • tab.inactiveBackground#0C1620
  • tab.inactiveForeground#9AB4D4
  • terminal.ansiBlue#6FAFFF
  • terminal.ansiBrightBlue#8FB8FF
  • terminal.ansiBrightCyan#9ED8F3
  • terminal.ansiBrightGreen#9EF8C3
  • terminal.ansiBrightMagenta#E8AFFF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#00F5E0
  • terminal.ansiGreen#7FFFD4
  • terminal.ansiMagenta#C78EFA
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE66B
  • terminal.background#0F1A2E
  • terminal.foreground#D0E8FF
  • titleBar.activeBackground#0B1428
  • titleBar.activeForeground#D0E8FF
  • titleBar.inactiveBackground#0F1A2E
  • titleBar.inactiveForeground#9AB4D4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A7Aitalic
string, string.quoted, string.template#7FFFD4—
keyword, storage.type, storage.modifier#00F5E0bold
keyword.operator, punctuation.accessor#6FAFFF—
variable, variable.other#D0E8FF—
variable.parameter#8FB8FFitalic
entity.name.function, support.function#6FAFFF—
meta.function-call#8FB8FF—
entity.name.class, entity.name.type.class, support.class#C78EFAbold
entity.name.type, support.type#C78EFA—
entity.name.type.interface#00F5E0italic
constant.numeric#FF9B6B—
constant, constant.language, constant.character#FFB86B—
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#8FB8FF—
meta.object-literal.key#6FAFFF—
entity.name.tag, punctuation.definition.tag#00F5E0—
entity.other.attribute-name#C78EFAitalic
punctuation, meta.brace#6FAFFF—
string.regexp#FF9B6B—
constant.character.escape#C78EFA—
meta.decorator, punctuation.decorator#FFE66B—
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00F5E0bold
markup.bold#FFB86Bbold
markup.italic#C78EFAitalic
markup.underline.link#00F5E0—
markup.inline.raw, markup.fenced_code#7FFFD4—
support.type.property-name.json#00F5E0—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B—
support.type.property-name.css#6FAFFF—
support.constant.property-value.css#00F5E0—