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#00CFF5
  • activityBar.background#141C28
  • activityBar.foreground#00CFF5
  • activityBarBadge.background#00CFF5
  • activityBarBadge.foreground#0B0F14
  • badge.background#00CFF5
  • badge.foreground#0B0F14
  • button.background#141C28
  • button.foreground#D8E2EC
  • button.hoverBackground#00CFF444
  • dropdown.background#10171F
  • dropdown.border#141C28
  • dropdown.foreground#D8E2EC
  • editor.background#0B0F14
  • editor.findMatchBackground#8A6FFF55
  • editor.findMatchHighlightBackground#8A6FFF33
  • editor.foreground#D8E2EC
  • editor.lineHighlightBackground#00CFF510
  • editor.lineHighlightBorder#00CFF530
  • editor.selectionBackground#00CFF540
  • editor.selectionHighlightBackground#00CFF520
  • editorBracketMatch.background#00CFF522
  • editorBracketMatch.border#00CFF588
  • editorCursor.foreground#00CFF5
  • editorGroupHeader.tabsBackground#0B0F14
  • editorIndentGuide.activeBackground#00CFF588
  • editorIndentGuide.background#5A6A7A44
  • editorLineNumber.activeForeground#00CFF5
  • editorLineNumber.foreground#A6B4C2
  • editorWhitespace.foreground#5A6A7A
  • focusBorder#00CFF5
  • gitDecoration.conflictingResourceForeground#FFEB6D
  • gitDecoration.deletedResourceForeground#FF6D6D
  • gitDecoration.modifiedResourceForeground#00CFF5
  • gitDecoration.untrackedResourceForeground#6FFFE0
  • input.background#10171F
  • input.border#141C28
  • input.foreground#D8E2EC
  • input.placeholderForeground#5A6A7A
  • inputOption.activeBorder#00CFF5
  • list.activeSelectionBackground#141C28AA
  • list.activeSelectionForeground#D8E2EC
  • list.focusBackground#141C2888
  • list.highlightForeground#00CFF5
  • list.hoverBackground#141C2866
  • minimap.background#0B0F14
  • minimapSlider.activeBackground#00CFF566
  • minimapSlider.background#00CFF522
  • minimapSlider.hoverBackground#00CFF544
  • panel.background#0C1119
  • panel.border#141C28
  • panelTitle.activeBorder#00CFF5
  • panelTitle.activeForeground#00CFF5
  • panelTitle.inactiveForeground#A6B4C2
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00CFF588
  • scrollbarSlider.background#5A6A7A44
  • scrollbarSlider.hoverBackground#5A6A7A88
  • sideBar.background#11181F
  • sideBar.foreground#D8E2EC
  • sideBarSectionHeader.background#141C28
  • sideBarSectionHeader.foreground#00CFF5
  • sideBarTitle.foreground#00CFF5
  • statusBar.background#141C28
  • statusBar.debuggingBackground#00CFF5
  • statusBar.foreground#D8E2EC
  • statusBar.noFolderBackground#141C28
  • statusBarItem.hoverBackground#00CFF533
  • tab.activeBackground#141C28
  • tab.activeBorder#00CFF5
  • tab.activeForeground#D8E2EC
  • tab.border#0B0F14
  • tab.inactiveBackground#0F151D
  • tab.inactiveForeground#A6B4C2
  • terminal.ansiBlue#00CFF5
  • terminal.ansiBrightBlue#33DFFF
  • terminal.ansiBrightCyan#7FFFD0
  • terminal.ansiBrightGreen#AAFFAA
  • terminal.ansiBrightMagenta#FFAAFF
  • terminal.ansiBrightRed#FFAAAA
  • terminal.ansiBrightYellow#FFFFAA
  • terminal.ansiCyan#6FFFE0
  • terminal.ansiGreen#8DFF88
  • terminal.ansiMagenta#FF8DFF
  • terminal.ansiRed#FF6D6D
  • terminal.ansiYellow#FFEB6D
  • terminal.background#0B0F14
  • terminal.foreground#D8E2EC
  • titleBar.activeBackground#141C28
  • titleBar.activeForeground#D8E2EC
  • titleBar.inactiveBackground#0F141D
  • titleBar.inactiveForeground#A6B4C2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#5FFFD7
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#00E5FF
variable, variable.other#E0E0E0
variable.parameter#AAAAAAitalic
entity.name.function, support.function#00D5FF
meta.function-call#00D5FF
entity.name.class, entity.name.type.class, support.class#2C3E50bold
entity.name.type, support.type#2C3E50
entity.name.type.interface#2C3E50italic
constant.numeric#FFAA00
constant, constant.language, constant.character#FFAA00
constant.language.boolean#FFAA00bold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#00E5FF
entity.other.attribute-name#FF5FFFitalic
punctuation, meta.brace#E0E0E0
string.regexp#5FFFD7
constant.character.escape#FF5FFF
meta.decorator, punctuation.decorator#FFE066
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#00E5FFbold
markup.italic#AAAAAAitalic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#5FFFD7
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00E5FF
support.type.property-name.css#2C3E50
support.constant.property-value.css#5FFFD7