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