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#050508
  • activityBar.border#0e0e1a
  • activityBar.foreground#8b6aff
  • activityBar.inactiveForeground#5858a0
  • activityBarBadge.background#8b6aff
  • activityBarBadge.foreground#050508
  • badge.background#8b6aff
  • badge.foreground#050508
  • breadcrumb.activeSelectionForeground#8b6aff
  • breadcrumb.focusForeground#d0d0e8
  • breadcrumb.foreground#7878a8
  • breadcrumbPicker.background#0a0a14
  • button.background#8b6aff
  • button.foreground#050508
  • button.hoverBackground#9d80ff
  • button.secondaryBackground#1a1a2e
  • button.secondaryForeground#d0d0e8
  • commandCenter.background#08080e
  • commandCenter.border#1a1a2e
  • commandCenter.foreground#d0d0e8
  • descriptionForeground#7878a8
  • dropdown.background#0a0a14
  • dropdown.border#1a1a2e
  • dropdown.foreground#d0d0e8
  • editor.background#06060b
  • editor.findMatchBackground#3dd8d830
  • editor.findMatchHighlightBackground#3dd8d818
  • editor.foreground#d0d0e8
  • editor.inactiveSelectionBackground#8b6aff15
  • editor.lineHighlightBackground#0c0c1808
  • editor.selectionBackground#8b6aff28
  • editor.wordHighlightBackground#8b6aff18
  • editorBracketMatch.background#8b6aff18
  • editorBracketMatch.border#8b6aff44
  • editorCursor.foreground#3dd8d8
  • editorGroupHeader.tabsBackground#050508
  • editorGroupHeader.tabsBorder#0e0e1a
  • editorGutter.addedBackground#3dd8d866
  • editorGutter.deletedBackground#f0608066
  • editorGutter.modifiedBackground#8b6aff66
  • editorIndentGuide.activeBackground1#1e1e32
  • editorIndentGuide.background1#12121e
  • editorLineNumber.activeForeground#8282a3
  • editorLineNumber.foreground#828298
  • editorOverviewRuler.border#0e0e1a
  • editorWhitespace.foreground#1a1a2e
  • errorForeground#f06080
  • focusBorder#8b6aff44
  • foreground#d0d0e8
  • gitDecoration.addedResourceForeground#3dd8a8
  • gitDecoration.conflictingResourceForeground#e4c85a
  • gitDecoration.deletedResourceForeground#f06080
  • gitDecoration.ignoredResourceForeground#5a5a6e
  • gitDecoration.modifiedResourceForeground#8b6aff
  • gitDecoration.untrackedResourceForeground#3dd8d8
  • input.background#0a0a14
  • input.border#1a1a2e
  • input.foreground#d0d0e8
  • input.placeholderForeground#636383
  • inputOption.activeBorder#8b6aff
  • list.activeSelectionBackground#8b6aff22
  • list.activeSelectionForeground#eaeaf8
  • list.focusBackground#8b6aff18
  • list.highlightForeground#3dd8d8
  • list.hoverBackground#0c0c1a
  • list.inactiveSelectionBackground#8b6aff12
  • minimap.findMatchHighlight#3dd8d844
  • minimap.selectionHighlight#8b6aff44
  • notifications.background#0a0a14
  • notifications.border#1a1a2e
  • notifications.foreground#d0d0e8
  • panel.background#06060b
  • panel.border#1a1a2e
  • panelTitle.activeBorder#8b6aff
  • panelTitle.activeForeground#d0d0e8
  • panelTitle.inactiveForeground#7070a0
  • peekView.border#8b6aff44
  • peekViewEditor.background#08080e
  • peekViewResult.background#08080e
  • peekViewTitle.background#0a0a14
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#8b6aff44
  • scrollbarSlider.background#8b6aff18
  • scrollbarSlider.hoverBackground#8b6aff30
  • selection.background#8b6aff33
  • sideBar.background#08080e
  • sideBar.border#0e0e1a
  • sideBar.foreground#d0d0e8
  • sideBarSectionHeader.background#0a0a14
  • sideBarSectionHeader.foreground#7070a0
  • sideBarTitle.foreground#8b6aff
  • statusBar.background#050508
  • statusBar.border#0e0e1a
  • statusBar.debuggingBackground#8b6aff
  • statusBar.debuggingForeground#050508
  • statusBar.foreground#3dd8d8
  • statusBar.noFolderBackground#050508
  • statusBarItem.hoverBackground#8b6aff22
  • statusBarItem.remoteBackground#8b6aff
  • statusBarItem.remoteForeground#050508
  • tab.activeBackground#0c0c16
  • tab.activeBorderTop#8b6aff
  • tab.activeForeground#eaeaf8
  • tab.border#0e0e1a
  • tab.hoverBackground#0e0e1c
  • tab.inactiveBackground#050508
  • tab.inactiveForeground#6868a0
  • terminal.ansiBlack#1a1a2e
  • terminal.ansiBlue#5a8af0
  • terminal.ansiBrightBlack#3a3a5e
  • terminal.ansiBrightBlue#78a8ff
  • terminal.ansiBrightCyan#5aeaea
  • terminal.ansiBrightGreen#5aeac0
  • terminal.ansiBrightMagenta#a88aff
  • terminal.ansiBrightRed#ff7898
  • terminal.ansiBrightWhite#eaeaf8
  • terminal.ansiBrightYellow#f0da78
  • terminal.ansiCyan#3dd8d8
  • terminal.ansiGreen#3dd8a8
  • terminal.ansiMagenta#8b6aff
  • terminal.ansiRed#f06080
  • terminal.ansiWhite#d0d0e8
  • terminal.ansiYellow#e4c85a
  • terminal.background#050508
  • terminal.foreground#d0d0e8
  • terminalCursor.foreground#3dd8d8
  • titleBar.activeBackground#050508
  • titleBar.activeForeground#8b6aff
  • titleBar.inactiveBackground#050508
  • titleBar.inactiveForeground#5858a0
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#797991italic
string, string.quoted#3dd8a8—
constant.numeric#e4c85a—
constant.language, constant.other#f0a060—
keyword, storage.type, storage.modifier#8b6aff—
keyword.control, keyword.operator.logical#a88aff—
keyword.operator#3dd8d8—
entity.name.function, support.function, meta.function-call#5abaff—
entity.name.type, entity.name.class, support.class, support.type#e4c85a—
entity.name.type.interface#3dd8d8—
variable, variable.other#d0d0e8—
variable.parameter#c0a8f0—
variable.other.property, variable.other.object.property#78a8e0—
entity.name.tag#f06080—
entity.other.attribute-name#e4c85aitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3dd8d8—
support.type.property-name.css#78a8e0—
support.constant.property-value.css, meta.property-value.css#d0d0e8—
variable.scss, variable.css#c0a8f0—
string.regexp#f0a060—
constant.character.escape#3dd8d8—
punctuation#7f7fa4—
support.type.property-name.json#78a8e0—
markup.heading, entity.name.section.markdown#8b6affbold
markup.bold#eaeaf8bold
markup.italic#c0a8f0italic
markup.underline.link#3dd8d8—
markup.inline.raw, markup.fenced_code#3dd8a8—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#f06080—
variable.other.php#c0a8f0—
entity.name.tag.yaml#78a8e0—
meta.decorator, punctuation.decorator#e4c85a—
variable.language.this, variable.language.self#f06080italic