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#170e2a
  • activityBar.foreground#e84cf0
  • activityBar.inactiveForeground#7f7393
  • activityBarBadge.background#e84cf0
  • activityBarBadge.foreground#ffffff
  • badge.background#e84cf0
  • badge.foreground#ffffff
  • button.background#e84cf0
  • button.foreground#ffffff
  • button.hoverBackground#eb61f2
  • dropdown.background#170e2a
  • editor.background#20133a
  • editor.findMatchBackground#e84cf066
  • editor.findMatchHighlightBackground#e84cf038
  • editor.foreground#f3e9ff
  • editor.lineHighlightBackground#2d2146
  • editor.selectionBackground#e84cf042
  • editorBracketMatch.border#e84cf0
  • editorCursor.foreground#e84cf0
  • editorGroupHeader.tabsBackground#1d1134
  • editorIndentGuide.activeBackground1#f3e9ff38
  • editorIndentGuide.background1#f3e9ff14
  • editorLineNumber.activeForeground#e84cf0
  • editorLineNumber.foreground#7f7393
  • editorSuggestWidget.selectedBackground#e84cf042
  • editorWhitespace.foreground#f3e9ff1a
  • editorWidget.background#170e2a
  • focusBorder#e84cf0
  • input.background#170e2a
  • input.foreground#f3e9ff
  • input.placeholderForeground#7f7393
  • list.activeSelectionBackground#e84cf042
  • list.activeSelectionForeground#f3e9ff
  • list.hoverBackground#2d2146
  • list.inactiveSelectionBackground#e84cf024
  • panel.background#1c1032
  • panelTitle.activeForeground#e84cf0
  • scrollbarSlider.activeBackground#f3e9ff5c
  • scrollbarSlider.background#f3e9ff29
  • scrollbarSlider.hoverBackground#f3e9ff42
  • selection.background#e84cf04d
  • sideBar.background#1c1032
  • sideBar.foreground#f3e9ff
  • sideBarSectionHeader.background#20133a
  • sideBarTitle.foreground#e84cf0
  • statusBar.background#170e2a
  • statusBar.foreground#f3e9ff
  • statusBar.noFolderBackground#170e2a
  • tab.activeBackground#20133a
  • tab.activeBorderTop#e84cf0
  • tab.activeForeground#e84cf0
  • tab.border#1d1134
  • tab.inactiveBackground#1d1134
  • tab.inactiveForeground#7f7393
  • terminal.background#20133a
  • terminal.foreground#f3e9ff
  • titleBar.activeBackground#170e2a
  • titleBar.activeForeground#f3e9ff
  • titleBar.inactiveBackground#170e2a
  • titleBar.inactiveForeground#7f7393

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7c6f9eitalic
string, string.quoted, string.template#ff7b54
constant.numeric, constant.language, constant.character#f15bb5
keyword, keyword.control, storage, storage.type, storage.modifier#ffb84c
entity.name.function, support.function, meta.function-call.generic#4cc9f0
variable, meta.definition.variable.name, variable.other.readwrite#f3e9ff
variable.parameter, parameter#cdc2dc
entity.name.type, support.type, support.class, entity.name.namespace#ff5d8f
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#8ac926
keyword.operator#e84cf0
entity.name.tag, punctuation.definition.tag#ffb84c
entity.other.attribute-name#4cc9f0
constant.other.color, support.constant#f15bb5
entity.name.type.class#ff5d8fbold
markup.boldbold
markup.italicitalic
markup.heading#e84cf0bold
invalid#20133a