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#0A0A2A
  • activityBar.foreground#00F5FF
  • activityBarBadge.background#00F5FF
  • activityBarBadge.foreground#0B0C1F
  • badge.background#00F5FF
  • badge.foreground#0B0C1F
  • button.background#15163F
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A55
  • dropdown.background#0C0C2F
  • dropdown.border#15163F
  • dropdown.foreground#E0F7FF
  • editor.background#0B0C1F
  • editor.findMatchBackground#00F5FF44
  • editor.findMatchHighlightBackground#00F5FF22
  • editor.foreground#E0F7FF
  • editor.lineHighlightBackground#15163F80
  • editor.lineHighlightBorder#15163FBF
  • editor.selectionBackground#00F5FF33
  • editor.selectionHighlightBackground#00F5FF22
  • editorBracketMatch.background#00F5FF33
  • editorBracketMatch.border#00F5FF
  • editorCursor.foreground#00F5FF
  • editorGroupHeader.tabsBackground#0B0C1F
  • editorIndentGuide.activeBackground#34475A88
  • editorIndentGuide.background#34475A44
  • editorLineNumber.activeForeground#00F5FF
  • editorLineNumber.foreground#34475A
  • editorWhitespace.foreground#34475A
  • focusBorder#00F5FF
  • gitDecoration.conflictingResourceForeground#FFE66B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00F5FF
  • gitDecoration.untrackedResourceForeground#88FFAA
  • input.background#0C0C2F
  • input.border#15163F
  • input.foreground#E0F7FF
  • input.placeholderForeground#34475A
  • inputOption.activeBorder#00F5FF
  • list.activeSelectionBackground#15163F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#15163F
  • list.highlightForeground#00F5FF
  • list.hoverBackground#15163F66
  • minimap.background#0B0C1F
  • minimapSlider.activeBackground#00F5FF66
  • minimapSlider.background#00F5FF22
  • minimapSlider.hoverBackground#00F5FF44
  • panel.background#0B0C1F
  • panel.border#15163F
  • panelTitle.activeBorder#00F5FF
  • panelTitle.activeForeground#00F5FF
  • panelTitle.inactiveForeground#A8D8FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00F5FF88
  • scrollbarSlider.background#34475A44
  • scrollbarSlider.hoverBackground#34475A88
  • sideBar.background#0C0C2F
  • sideBar.foreground#A8D8FF
  • sideBarSectionHeader.background#0A0A2A
  • sideBarSectionHeader.foreground#00F5FF
  • sideBarTitle.foreground#00F5FF
  • statusBar.background#15163F
  • statusBar.debuggingBackground#00F5FF
  • statusBar.foreground#E0F7FF
  • statusBar.noFolderBackground#0A0A2A
  • statusBarItem.hoverBackground#2A2A55
  • tab.activeBackground#15163F
  • tab.activeBorder#00F5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C1F
  • tab.inactiveBackground#0C0C2F
  • tab.inactiveForeground#A8D8FF
  • terminal.ansiBlue#00F5FF
  • terminal.ansiBrightBlue#5A5AFF
  • terminal.ansiBrightCyan#C0E0FF
  • terminal.ansiBrightGreen#A0FFAA
  • terminal.ansiBrightMagenta#D4A8FF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#A8D8FF
  • terminal.ansiGreen#88FFAA
  • terminal.ansiMagenta#B588FF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE66B
  • terminal.background#0B0C1F
  • terminal.foreground#E0F7FF
  • titleBar.activeBackground#0A0A2A
  • titleBar.activeForeground#E0F7FF
  • titleBar.inactiveBackground#0B0C1F
  • titleBar.inactiveForeground#A8D8FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#88FFAA
keyword, storage.type, storage.modifier#00F5FFbold
keyword.operator, punctuation.accessor#5A5AFF
variable, variable.other#E0F7FF
variable.parameter#FFB86Bitalic
entity.name.function, support.function#5A5AFF
meta.function-call#A8D8FF
entity.name.class, entity.name.type.class, support.class#A8D8FFbold
entity.name.type, support.type#A8D8FF
entity.name.type.interface#C0E0FFitalic
constant.numeric#FF9B6B
constant, constant.language, constant.character#FFB86B
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#E0F7FF
meta.object-literal.key#5A5AFF
entity.name.tag, punctuation.definition.tag#00F5FF
entity.other.attribute-name#B588FFitalic
punctuation, meta.brace#5A5AFF
string.regexp#FF9B6B
constant.character.escape#B588FF
meta.decorator, punctuation.decorator#FFE66B
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00F5FFbold
markup.bold#FFB86Bbold
markup.italic#B588FFitalic
markup.underline.link#A8D8FF
markup.inline.raw, markup.fenced_code#88FFAA
support.type.property-name.json#00F5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B
support.type.property-name.css#5A5AFF
support.constant.property-value.css#A8D8FF