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#00E5FF
  • activityBar.background#0F0F2A
  • activityBar.foreground#FF00AA
  • activityBarBadge.background#FF00AA
  • activityBarBadge.foreground#0B0C1E
  • badge.background#FF00AA
  • badge.foreground#0B0C1E
  • button.background#151632
  • button.foreground#E0E0FF
  • button.hoverBackground#1E1F4A
  • dropdown.background#10112A
  • dropdown.border#151632
  • dropdown.foreground#E0E0FF
  • editor.background#0B0C1E
  • editor.findMatchBackground#FF00AA40
  • editor.findMatchHighlightBackground#FF00AA20
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#1A1B5A40
  • editor.lineHighlightBorder#00E5FF20
  • editor.selectionBackground#3A3A6F80
  • editor.selectionHighlightBackground#3A3A6F40
  • editorBracketMatch.background#FF00AA20
  • editorBracketMatch.border#FF00AA
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B0C1E
  • editorIndentGuide.activeBackground#00E5FF40
  • editorIndentGuide.background#3A3A6F40
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#5A5A7A
  • editorWhitespace.foreground#3A3A6F
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFFF00
  • gitDecoration.deletedResourceForeground#FF3366
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A0FF00
  • input.background#10112A
  • input.border#151632
  • input.foreground#E0E0FF
  • input.placeholderForeground#5A5A7A
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#151632
  • list.activeSelectionForeground#E0E0FF
  • list.focusBackground#151632
  • list.highlightForeground#00E5FF
  • list.hoverBackground#15163266
  • minimap.background#0B0C1E
  • minimapSlider.activeBackground#FF00AA60
  • minimapSlider.background#FF00AA20
  • minimapSlider.hoverBackground#FF00AA40
  • panel.background#0B0C1E
  • panel.border#151632
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#7A7A9A
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#00E5FF80
  • scrollbarSlider.background#3A3A6F40
  • scrollbarSlider.hoverBackground#3A3A6F80
  • sideBar.background#10112A
  • sideBar.foreground#E0E0FF
  • sideBarSectionHeader.background#0F0F2A
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#151632
  • statusBar.debuggingBackground#FF00AA
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#0F0F2A
  • statusBarItem.hoverBackground#1E1F4A
  • tab.activeBackground#151632
  • tab.activeBorder#00E5FF
  • tab.activeForeground#E0E0FF
  • tab.border#0B0C1E
  • tab.inactiveBackground#10112A
  • tab.inactiveForeground#7A7A9A
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#00E5FF
  • terminal.ansiBrightCyan#00E5FF
  • terminal.ansiBrightGreen#A0FF00
  • terminal.ansiBrightMagenta#FF00AA
  • terminal.ansiBrightRed#FF6699
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A0FF00
  • terminal.ansiMagenta#FF00AA
  • terminal.ansiRed#FF3366
  • terminal.ansiYellow#FFFF00
  • terminal.background#0B0C1E
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#0F0F2A
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#0B0C1E
  • titleBar.inactiveForeground#7A7A9A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A7Aitalic
string, string.quoted, string.template#A0FF00
keyword, storage.type, storage.modifier#FF00AAbold
keyword.operator, punctuation.accessor#00E5FF
variable, variable.other#E0E0FF
variable.parameter#FF00AAitalic
entity.name.function, support.function#00E5FF
meta.function-call#E0E0FF
entity.name.class, entity.name.type.class, support.class#00E5FFbold
entity.name.type, support.type#00E5FF
entity.name.type.interface#A0FF00italic
constant.numeric#FF00AA
constant, constant.language, constant.character#FF00AA
constant.language.boolean#FF00AAbold
variable.other.property, support.variable.property#E0E0FF
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#FF00AA
entity.other.attribute-name#00E5FFitalic
punctuation, meta.brace#7A7A9A
string.regexp#FF00AA
constant.character.escape#00E5FF
meta.decorator, punctuation.decorator#FFFF00
invalid, invalid.illegal#FF3366strikethrough
markup.heading, entity.name.section#FF00AAbold
markup.bold#FFFF00bold
markup.italic#00E5FFitalic
markup.underline.link#A0FF00
markup.inline.raw, markup.fenced_code#A0FF00
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFFF00
support.type.property-name.css#00E5FF
support.constant.property-value.css#A0FF00