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.background#200B29
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#BB99FF
  • activityBarBadge.background#FF00A8
  • activityBarBadge.foreground#000000
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#BB99FF
  • breadcrumb.separatorForeground#FF00A8
  • button.background#FF00A8
  • button.border#FF00A8
  • button.foreground#000000
  • debugToolBar.background#260E34
  • dropdown.background#2F0D42
  • dropdown.border#3E0F55
  • editor.background#1A0A1F
  • editor.findMatchHighlightBackground#FF00A844
  • editor.foreground#EDEDED
  • editor.lineHighlightBackground#2F0D42
  • editor.selectionBackground#3E0F55
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#FF00A822
  • editorBracketHighlight.foreground1#FF00A8
  • editorBracketHighlight.foreground2#FFD000
  • editorBracketHighlight.foreground3#00FFF7
  • editorBracketHighlight.foreground4#FF00FF
  • editorBracketHighlight.foreground5#BB99FF
  • editorBracketHighlight.foreground6#FFD000
  • editorBracketMatch.background#3E0F55
  • editorBracketMatch.border#FF00A8
  • editorCursor.foreground#FF00FF
  • editorError.foreground#FF3C00
  • editorGroup.border#3E0F55
  • editorGroupHeader.tabsBackground#1A0A1F
  • editorGroupHeader.tabsBorder#1A0A1F
  • editorGutter.background#1A0A1F
  • editorGutter.modifiedBackground#FFD000
  • editorHoverWidget.background#1A0A1F
  • editorHoverWidget.border#3E0F55
  • editorHoverWidget.foreground#EDEDED
  • editorHoverWidget.highlightForeground#FF00FF
  • editorIndentGuide.background#3A1F46
  • editorInfo.foreground#00FFF7
  • editorLightBulb.foreground#00FFF7
  • editorLightBulbAutoFix.foreground#00E0FF
  • editorLink.activeForeground#00FFF7
  • editorOverviewRuler.border#3E0F55
  • editorOverviewRuler.bracketMatchForeground#FF00A888
  • editorOverviewRuler.errorForeground#FF3C0044
  • editorOverviewRuler.findMatchForeground#FF00A833
  • editorOverviewRuler.infoForeground#00FFF744
  • editorOverviewRuler.warningForeground#FFD00044
  • editorOverviewRuler.wordHighlightForeground#3E0F5522
  • editorOverviewRuler.wordHighlightStrongForeground#3E0F55AA
  • editorRuler.foreground#3A1F46
  • editorStickyScroll.background#1A0A1F
  • editorStickyScrollHover.background#2F0D42
  • editorSuggestWidget.background#200B29
  • editorSuggestWidget.foreground#EDEDED
  • editorSuggestWidget.highlightForeground#FF00A8
  • editorSuggestWidget.selectedBackground#3E0F55
  • editorSymbolHighlightBackground#FF00A822
  • editorUnicodeHighlight.background#FF3C0033
  • editorUnicodeHighlight.border#FF3C00
  • editorWarning.foreground#FFD000
  • editorWhitespace.foreground#4B2C57
  • editorWidget.background#200B29
  • editorWidget.foreground#F2F2F2
  • focusBorder#FF00A8
  • input.background#2F0D42
  • input.border#BB99FF
  • input.foreground#F2F2F2
  • input.placeholderForeground#BB99FF
  • inputOption.activeBackground#3E0F55
  • inputOption.activeBorder#FF00A8
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#3E0F55
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#3E0F55
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#2A0A3A
  • list.inactiveSelectionForeground#DADADA
  • minimap.background#1A0A1F
  • minimap.errorHighlight#FF3C0044
  • minimap.findMatchHighlight#FF00A833
  • minimap.selectionHighlight#3E0F5522
  • minimap.warningHighlight#FFD00044
  • panel.background#1A0A1F
  • panel.border#3E0F55
  • panelInput.border#3E0F55
  • panelTitle.activeBorder#FF00A8
  • panelTitle.activeForeground#FF00A8
  • panelTitle.inactiveForeground#BB99FF
  • peekViewEditor.background#1A0A1F
  • peekViewResult.background#200B29
  • peekViewTitle.background#200B29
  • scrollbarSlider.activeBackground#FF00A8
  • scrollbarSlider.background#3E0F55AA
  • scrollbarSlider.hoverBackground#3E0F55CC
  • settings.dropdownBackground#2F0D42
  • settings.dropdownBorder#3E0F55
  • settings.dropdownForeground#F2F2F2
  • settings.headerForeground#FF00A8
  • settings.modifiedItemIndicator#FFD000
  • settings.textInputBackground#2F0D42
  • settings.textInputBorder#3E0F55
  • settings.textInputForeground#F2F2F2
  • sideBar.background#200B29
  • sideBar.border#3E0F55
  • sideBar.foreground#EDEDED
  • sideBarSectionHeader.foreground#FF00A8
  • sideBarTitle.foreground#FF00A8
  • statusBar.background#260E34
  • statusBar.debuggingBackground#FF0055
  • statusBar.debuggingForeground#FFFFFF
  • tab.activeBackground#1A0A1F
  • tab.activeForeground#FFFFFF
  • tab.border#1A0A1F
  • tab.inactiveBackground#200B29
  • tab.inactiveForeground#BBBBBB
  • tab.unfocusedActiveForeground#CCCCCC
  • tab.unfocusedInactiveForeground#888888
  • terminal.background#1A0A1F
  • terminal.foreground#EDEDED
  • terminalCursor.foreground#FF00A8
  • titleBar.activeBackground#200B29
  • titleBar.activeForeground#F2F2F2
  • titleBar.inactiveBackground#200B29
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other#FF9800
constant.character.escape#FF3C00
constant.language.boolean#FF0080bold
keyword.operator#FF00A8
variable.language#00FFF7
entity.name.function.decorator, meta.decorator punctuation#BB99FF
meta.enum#BB99FF
meta.type.annotation, meta.type#00BFFF
markup.list#00E0FF
markup.raw, markup.inline.raw#FF7E00italic
markup.heading#FF3C00bold
markup.strikethrough#FF0055strikethrough
markup.inserted, meta.diff.header.from-file#00FFF7
markup.deleted, meta.diff.header.to-file#FF3C00
meta.diff.header#BB99FFbold
constant.other.color#FFD000
markup.inline.raw#FF7E00
entity.name.label#FFD000italic
support.variable#FF00FF
support.constant.handlebars#FFD000
storage.modifier#FF00A8
storage.type#00BFFFbold
storage#00BFFFbold
string, constant.other.symbol#00FFF7
constant.numeric#FFD000bold
constant.language.boolean, constant.language#FF0080bold
keyword, storage.type, storage.modifier#FF00FF
keyword.operator#FF7E00
variable, identifier, variable.language#FFFF00
entity.name.function, support.function, meta.function-call#00FF87
variable.parameter#FF82C8
entity.name.type, support.type, entity.name.class#00BFFF
support.constant, constant.other#FF9800
punctuation, punctuation.definition.parameters#FFDD57
invalid, invalid.illegal#FFFFFF
markup.heading#FF3C00bold
markup.list#00E0FF
markup.bold#FF00A8bold
markup.italic, markup.quote#BB99FFitalic
meta.object-literal.key#FFDD57
entity.name.tag, support.class.component#00E0FF
support.type.property-name#FF9900