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#090C2A
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#0B0F2B
  • badge.background#00E5FF
  • badge.foreground#0B0F2B
  • button.background#003344
  • button.foreground#D0D8E0
  • button.hoverBackground#004466
  • dropdown.background#080B25
  • dropdown.border#003344
  • dropdown.foreground#D0D8E0
  • editor.background#0B0F2B
  • editor.findMatchBackground#00E5FF44
  • editor.findMatchHighlightBackground#00E5FF22
  • editor.foreground#D0D8E0
  • editor.lineHighlightBackground#1A1E3F80
  • editor.lineHighlightBorder#1A1E3F
  • editor.selectionBackground#00334480
  • editor.selectionHighlightBackground#00334455
  • editorBracketMatch.background#00E5FF33
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#0B0F2B
  • editorIndentGuide.activeBackground#44486688
  • editorIndentGuide.background#44486644
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#7A7F8D
  • editorWhitespace.foreground#4A4F5E
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#33FFAA
  • input.background#080B25
  • input.border#003344
  • input.foreground#D0D8E0
  • input.placeholderForeground#7A7F8D
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#003344
  • list.activeSelectionForeground#D0D8E0
  • list.focusBackground#003344
  • list.highlightForeground#00E5FF
  • list.hoverBackground#00334466
  • minimap.background#0B0F2B
  • minimapSlider.activeBackground#00E5FF66
  • minimapSlider.background#00E5FF22
  • minimapSlider.hoverBackground#00E5FF44
  • panel.background#0B0F2B
  • panel.border#003344
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#D0D8E0
  • panelTitle.inactiveForeground#7A7F8D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00E5FF88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#080B25
  • sideBar.foreground#D0D8E0
  • sideBarSectionHeader.background#090C2A
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#11132F
  • statusBar.debuggingBackground#00E5FF
  • statusBar.foreground#D0D8E0
  • statusBar.noFolderBackground#11132F
  • statusBarItem.hoverBackground#003344
  • tab.activeBackground#11132F
  • tab.activeBorder#00E5FF
  • tab.activeForeground#D0D8E0
  • tab.border#0B0F2B
  • tab.inactiveBackground#080B25
  • tab.inactiveForeground#7A7F8D
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#66FFFF
  • terminal.ansiBrightCyan#99FFFF
  • terminal.ansiBrightGreen#33FFAA
  • terminal.ansiBrightMagenta#FF88FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFCC55
  • terminal.ansiCyan#66FFFF
  • terminal.ansiGreen#A0E7FF
  • terminal.ansiMagenta#FF6EDB
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFB86C
  • terminal.background#0B0F2B
  • terminal.foreground#D0D8E0
  • titleBar.activeBackground#090C2A
  • titleBar.activeForeground#D0D8E0
  • titleBar.inactiveBackground#0B0F2B
  • titleBar.inactiveForeground#7A7F8D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6170italic
string, string.quoted, string.template#FFB86C
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#FF6EDB
variable, variable.other#D0D8E0
variable.parameter#FF6EDBitalic
entity.name.function, support.function#00E5FF
meta.function-call#FF6EDB
entity.name.class, entity.name.type.class, support.class#A0E7FFbold
entity.name.type, support.type#A0E7FF
entity.name.type.interface#FF6EDBitalic
constant.numeric#FF9E64
constant, constant.language, constant.character#FF9E64
constant.language.boolean#FF9E64bold
variable.other.property, support.variable.property#D0D8E0
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#00E5FF
entity.other.attribute-name#FF6EDBitalic
punctuation, meta.brace#D0D8E0
string.regexp#FFB86C
constant.character.escape#FFB86C
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FFB86Cbold
markup.italic#FF6EDBitalic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#FFB86C
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6EDB
support.type.property-name.css#A0E7FF
support.constant.property-value.css#00E5FF