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.activeBackground#1a0a0a
  • activityBar.activeBorder#FF0000
  • activityBar.background#000000
  • activityBar.border#2a0a0a
  • activityBar.foreground#FF0000
  • activityBar.inactiveForeground#5a3a3a
  • activityBarBadge.background#CC0000
  • activityBarBadge.foreground#ffffff
  • badge.background#FF0066
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#9370DB
  • breadcrumb.focusForeground#FF0066
  • breadcrumb.foreground#7a7a9a
  • button.background#8b00ff
  • button.foreground#ffffff
  • button.hoverBackground#9370DB
  • button.secondaryBackground#3a3a5a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4a4a6a
  • debugExceptionWidget.background#1a0000
  • debugExceptionWidget.border#FF0066
  • debugToolBar.background#1a1a2e
  • debugToolBar.border#8b00ff
  • diffEditor.border#2a2a3e
  • diffEditor.insertedTextBackground#4169E120
  • diffEditor.removedTextBackground#FF006620
  • dropdown.background#1a1a2e
  • dropdown.border#8b00ff
  • dropdown.foreground#ffffff
  • editor.background#0a0000
  • editor.findMatchBackground#FF000080
  • editor.findMatchHighlightBackground#FF000040
  • editor.foreground#e8e8e8
  • editor.inactiveSelectionBackground#CC000030
  • editor.lineHighlightBackground#1a0a0a
  • editor.selectionBackground#CC000060
  • editor.selectionHighlightBackground#CC000025
  • editor.wordHighlightBackground#80000030
  • editor.wordHighlightStrongBackground#80000050
  • editorBracketMatch.background#8b00ff40
  • editorBracketMatch.border#9370DB
  • editorCursor.foreground#FF0000
  • editorError.background#1a000080
  • editorError.border#000000
  • editorError.foreground#1a0000
  • editorGroupHeader.tabsBackground#0a0a14
  • editorGroupHeader.tabsBorder#2a2a3e
  • editorHint.foreground#9370DB
  • editorIndentGuide.activeBackground1#8b00ff
  • editorIndentGuide.background1#2a2a3e
  • editorInfo.foreground#4169E1
  • editorLineNumber.activeForeground#FF0066
  • editorLineNumber.foreground#5a5a7a
  • editorSuggestWidget.background#1a1a2e
  • editorSuggestWidget.border#8b00ff
  • editorSuggestWidget.foreground#e8e8f0
  • editorSuggestWidget.highlightForeground#FF0066
  • editorSuggestWidget.selectedBackground#8b00ff40
  • editorWarning.foreground#FFD700
  • editorWhitespace.foreground#2a2a3e
  • editorWidget.background#1a1a2e
  • editorWidget.border#8b00ff
  • editorWidget.foreground#e8e8f0
  • focusBorder#FF0066
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#FF0066
  • gitDecoration.ignoredResourceForeground#5a5a7a
  • gitDecoration.modifiedResourceForeground#4169E1
  • gitDecoration.untrackedResourceForeground#8b00ff
  • input.background#1a1a2e
  • input.border#8b00ff
  • input.foreground#ffffff
  • input.placeholderForeground#5a5a7a
  • inputOption.activeBorder#FF0066
  • inputValidation.errorBackground#1a0000
  • inputValidation.errorBorder#000000
  • inputValidation.warningBackground#3a2a00
  • inputValidation.warningBorder#FFD700
  • list.activeSelectionBackground#8b00ff60
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff6b8a
  • list.focusBackground#8b00ff60
  • list.focusForeground#ffffff
  • list.highlightForeground#FF0066
  • list.hoverBackground#2a2a4a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3a3a5a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FFD700
  • merge.border#FF0066
  • merge.currentContentBackground#4169E120
  • merge.currentHeaderBackground#4169E150
  • merge.incomingContentBackground#8b00ff20
  • merge.incomingHeaderBackground#8b00ff50
  • notificationCenter.border#2a2a3e
  • notificationCenterHeader.background#1a1a2e
  • notificationLink.foreground#9370DB
  • notifications.background#1a1a2e
  • notifications.border#8b00ff
  • notifications.foreground#ffffff
  • panel.background#0a0a14
  • panel.border#2a2a3e
  • panelTitle.activeBorder#8b00ff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#7a7a9a
  • peekView.border#8b00ff
  • peekViewEditor.background#1a1a2e
  • peekViewEditor.matchHighlightBackground#8b00ff40
  • peekViewResult.background#0f0f1a
  • peekViewResult.matchHighlightBackground#8b00ff40
  • peekViewResult.selectionBackground#8b00ff60
  • peekViewTitle.background#1a1a2e
  • peekViewTitleDescription.foreground#7a7a9a
  • peekViewTitleLabel.foreground#9370DB
  • scrollbarSlider.activeBackground#9370DB80
  • scrollbarSlider.background#8b00ff40
  • scrollbarSlider.hoverBackground#8b00ff60
  • sideBar.background#0f0000
  • sideBar.border#2a0a0a
  • sideBar.foreground#c8c8c8
  • sideBarSectionHeader.background#1a0a0a
  • sideBarSectionHeader.border#2a0a0a
  • sideBarSectionHeader.foreground#FF0000
  • sideBarTitle.foreground#CC0000
  • statusBar.background#000000
  • statusBar.border#2a0a0a
  • statusBar.debuggingBackground#CC0000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#FF0000
  • statusBar.noFolderBackground#2a0a0a
  • statusBarItem.errorBackground#800000
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#CC0000
  • statusBarItem.prominentHoverBackground#FF0000
  • statusBarItem.warningBackground#FFD700
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#1a1a2e
  • tab.activeBorder#0a0a14
  • tab.activeBorderTop#8b00ff
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#1a1a2e
  • tab.hoverBorder#9370DB
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0f0f1a
  • tab.inactiveForeground#7a7a9a
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#4169E1
  • terminal.ansiBrightBlack#3a3a5a
  • terminal.ansiBrightBlue#5a8aff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#9a9aba
  • terminal.ansiBrightMagenta#9370DB
  • terminal.ansiBrightRed#ff3388
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffea00
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#7a7a9a
  • terminal.ansiMagenta#8b00ff
  • terminal.ansiRed#FF0066
  • terminal.ansiWhite#e8e8f0
  • terminal.ansiYellow#FFD700
  • terminal.background#0a0a14
  • terminal.foreground#e8e8f0
  • terminalCursor.foreground#FF0066
  • titleBar.activeBackground#0a0a14
  • titleBar.activeForeground#9370DB
  • titleBar.border#2a2a3e
  • titleBar.inactiveBackground#0a0a14
  • titleBar.inactiveForeground#5a5a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a7aitalic
keyword, storage.type, storage.modifier#FF0066bold
keyword.control, keyword.operator#8b00ffbold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#9370DB
string, string.quoted#4169E1
string.template, string.quoted.template#5a8aff
constant.character.escape#00CED1bold
string.regexp#9370DB
constant.numeric, constant.language#FFD700
constant.language.boolean#ff3388bold
variable, variable.other#e8e8f0
variable.parameter#b8b8d8italic
variable.other.property, support.variable.property#c8c8dc
entity.name.function, support.function#9370DBbold
meta.function-call#8b7ddb
entity.name.type, entity.name.class, support.class#FF0066
entity.other.inherited-class#ff3388italic
entity.name.tag#8b00ffbold
entity.other.attribute-name#9370DBitalic
entity.name.tag.css, entity.other.attribute-name.class.css#FF0066
support.type.property-name.css#4169E1
support.constant.property-value.css#FFD700
support.type, support.class#8b7ddb
support.constant#ff3388
support.type.property-name.json#9370DB
keyword.operator#FF0066
punctuation#8a8aaa
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#7a7a9a
meta.brace, punctuation.section#c8c8dc
invalid#ffffff
invalid.deprecated#5a5a7astrikethrough
markup.heading#FF0066bold
markup.bold#8b00ffbold
markup.italic#9370DBitalic
markup.inline.raw#4169E1
markup.underline.link#00CED1underline
markup.list#FFD700
markup.inserted#4169E1
markup.deleted#FF0066
markup.changed#FFD700
variable.language.this#FF0066italic
entity.name.type.ts, entity.name.type.tsx#ff3388
meta.decorator, punctuation.decorator#8b00ffbold
variable.language.special.self.python#FF0066italic
entity.name.function.decorator.python#8b00ff