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#00F5FF
  • activityBar.background#0D0D12
  • activityBar.foreground#00F5FF
  • activityBarBadge.background#00F5FF
  • activityBarBadge.foreground#0A0A0F
  • badge.background#00F5FF
  • badge.foreground#0A0A0F
  • button.background#1A1A22
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A32
  • dropdown.background#121218
  • dropdown.border#1A1A22
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0F
  • editor.findMatchBackground#00F5FF44
  • editor.findMatchHighlightBackground#00F5FF22
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#001F2F33
  • editor.lineHighlightBorder#001F2F66
  • editor.selectionBackground#00F5FF30
  • editor.selectionHighlightBackground#00F5FF20
  • editorBracketMatch.background#00F5FF33
  • editorBracketMatch.border#00F5FF
  • editorCursor.foreground#00F5FF
  • editorGroupHeader.tabsBackground#0A0A0F
  • editorIndentGuide.activeBackground#3A3A4488
  • editorIndentGuide.background#3A3A4444
  • editorLineNumber.activeForeground#00F5FF
  • editorLineNumber.foreground#4A4A58
  • editorWhitespace.foreground#3A3A44
  • focusBorder#00F5FF
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF453A
  • gitDecoration.modifiedResourceForeground#00F5FF
  • gitDecoration.untrackedResourceForeground#B2FF59
  • input.background#121218
  • input.border#1A1A22
  • input.foreground#E0E0E0
  • input.placeholderForeground#5A5A66
  • inputOption.activeBorder#00F5FF
  • list.activeSelectionBackground#001F2F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#001F2F
  • list.highlightForeground#00F5FF
  • list.hoverBackground#001F2F66
  • minimap.background#0A0A0F
  • minimapSlider.activeBackground#00F5FF66
  • minimapSlider.background#00F5FF22
  • minimapSlider.hoverBackground#00F5FF44
  • panel.background#0A0A0F
  • panel.border#1A1A22
  • panelTitle.activeBorder#00F5FF
  • panelTitle.activeForeground#00F5FF
  • panelTitle.inactiveForeground#B0B0B0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00F5FF88
  • scrollbarSlider.background#4A4A5444
  • scrollbarSlider.hoverBackground#4A4A5488
  • sideBar.background#0F0F14
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#121218
  • sideBarSectionHeader.foreground#00F5FF
  • sideBarTitle.foreground#00F5FF
  • statusBar.background#1A1A22
  • statusBar.debuggingBackground#00F5FF
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#0D0D12
  • statusBarItem.hoverBackground#2A2A32
  • tab.activeBackground#1A1A22
  • tab.activeBorder#00F5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A0F
  • tab.inactiveBackground#0F0F14
  • tab.inactiveForeground#B0B0B0
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#5CFDFE
  • terminal.ansiBrightGreen#D4FF91
  • terminal.ansiBrightMagenta#FF66B2
  • terminal.ansiBrightRed#FF695E
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00F5FF
  • terminal.ansiGreen#B2FF59
  • terminal.ansiMagenta#FF2E88
  • terminal.ansiRed#FF453A
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0A0A0F
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0D0D12
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0A0A0F
  • titleBar.inactiveForeground#B0B0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#B2FF59
keyword, storage.type, storage.modifier#00F5FFbold
keyword.operator, punctuation.accessor#00F5FF
variable, variable.other#E0E0E0
variable.parameter#FFEB3Bitalic
entity.name.function, support.function#FF2E88
meta.function-call#E0E0E0
entity.name.class, entity.name.type.class, support.class#00F5FFbold
entity.name.type, support.type#2196F3
entity.name.type.interface#00F5FFitalic
constant.numeric#FFEB3B
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#FFEB3Bbold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#00F5FF
entity.name.tag, punctuation.definition.tag#00F5FF
entity.other.attribute-name#FF2E88italic
punctuation, meta.brace#A0A0A0
string.regexp#FF453A
constant.character.escape#FF2E88
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF453Astrikethrough
markup.heading, entity.name.section#00F5FFbold
markup.bold#FFEB3Bbold
markup.italic#FF2E88italic
markup.underline.link#00F5FF
markup.inline.raw, markup.fenced_code#B2FF59
support.type.property-name.json#00F5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#00F5FF
support.constant.property-value.css#B2FF59