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#FFC400
  • activityBar.background#050511
  • activityBar.foreground#FF6AFF
  • activityBarBadge.background#FF6AFF
  • activityBarBadge.foreground#0A0B1F
  • badge.background#FF6AFF
  • badge.foreground#0A0B1F
  • button.background#1A1A3D
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A45
  • dropdown.background#050511
  • dropdown.border#1A1A3D
  • dropdown.foreground#E1E1F0
  • editor.background#0A0B1F
  • editor.findMatchBackground#FF6AFF44
  • editor.findMatchHighlightBackground#FFC40022
  • editor.foreground#E1E1F0
  • editor.lineHighlightBackground#1A1A3D60
  • editor.lineHighlightBorder#1A1A3D90
  • editor.selectionBackground#FF6AFF33
  • editor.selectionHighlightBackground#FFC40022
  • editorBracketMatch.background#FFC40033
  • editorBracketMatch.border#FFC400
  • editorCursor.foreground#FF6AFF
  • editorGroupHeader.tabsBackground#0A0B1F
  • editorIndentGuide.activeBackground#2A2A4488
  • editorIndentGuide.background#2A2A4455
  • editorLineNumber.activeForeground#FF6AFF
  • editorLineNumber.foreground#4A4A6A
  • editorWhitespace.foreground#2A2A45
  • focusBorder#FF6AFF
  • gitDecoration.conflictingResourceForeground#FFE066
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#FF6AFF
  • gitDecoration.untrackedResourceForeground#A6FF00
  • input.background#050511
  • input.border#1A1A3D
  • input.foreground#E1E1F0
  • input.placeholderForeground#4A4A6A
  • inputOption.activeBorder#FF6AFF
  • list.activeSelectionBackground#1A1A3D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A3D
  • list.highlightForeground#FF6AFF
  • list.hoverBackground#1A1A3D66
  • minimap.background#0A0B1F
  • minimapSlider.activeBackground#FF6AFF66
  • minimapSlider.background#FF6AFF22
  • minimapSlider.hoverBackground#FF6AFF44
  • panel.background#0A0B1F
  • panel.border#1A1A3D
  • panelTitle.activeBorder#FF6AFF
  • panelTitle.activeForeground#FF6AFF
  • panelTitle.inactiveForeground#C1C1D0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6AFF88
  • scrollbarSlider.background#4A4A6A44
  • scrollbarSlider.hoverBackground#4A4A6A88
  • sideBar.background#050511
  • sideBar.foreground#C1C1D0
  • sideBarSectionHeader.background#050511
  • sideBarSectionHeader.foreground#FFC400
  • sideBarTitle.foreground#FF6AFF
  • statusBar.background#1A1A3D
  • statusBar.debuggingBackground#FFC400
  • statusBar.foreground#E1E1F0
  • statusBar.noFolderBackground#050511
  • statusBarItem.hoverBackground#2A2A50
  • tab.activeBackground#1A1A3D
  • tab.activeBorder#FF6AFF
  • tab.activeForeground#FFFFFF
  • tab.border#0A0B1F
  • tab.inactiveBackground#050511
  • tab.inactiveForeground#C1C1D0
  • terminal.ansiBlue#FF6AFF
  • terminal.ansiBrightBlue#FF9EFF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#C0FF6B
  • terminal.ansiBrightMagenta#FFDD55
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF89B
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#A6FF00
  • terminal.ansiMagenta#FFC400
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE066
  • terminal.background#0A0B1F
  • terminal.foreground#E1E1F0
  • titleBar.activeBackground#050511
  • titleBar.activeForeground#E1E1F0
  • titleBar.inactiveBackground#0A0B1F
  • titleBar.inactiveForeground#C1C1D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A6FF00—
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#80D8FF—
variable, variable.other#E0E0E0—
variable.parameter#FFB86Bitalic
entity.name.function, support.function#80D8FF—
meta.function-call#A8A8B8—
entity.name.class, entity.name.type.class, support.class#C084FCbold
entity.name.type, support.type#C084FC—
entity.name.type.interface#A6FF00italic
constant.numeric#FF9B6B—
constant, constant.language, constant.character#FFB86B—
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#A8A8B8—
meta.object-literal.key#80D8FF—
entity.name.tag, punctuation.definition.tag#00E5FF—
entity.other.attribute-name#C084FCitalic
punctuation, meta.brace#80D8FF—
string.regexp#FF9B6B—
constant.character.escape#C084FC—
meta.decorator, punctuation.decorator#FFE66B—
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FFB86Bbold
markup.italic#C084FCitalic
markup.underline.link#A6FF00—
markup.inline.raw, markup.fenced_code#A6FF00—
support.type.property-name.json#00E5FF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B—
support.type.property-name.css#80D8FF—
support.constant.property-value.css#A6FF00—