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#1a0030
  • activityBar.border#330055
  • activityBar.foreground#ff00ff
  • activityBar.inactiveForeground#660066
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#000000
  • badge.background#ff00ff
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#f0e0ff
  • breadcrumb.focusForeground#ff00ff
  • breadcrumb.foreground#553366
  • button.background#cc00cc
  • button.foreground#ffffff
  • button.hoverBackground#aa00aa
  • commandCenter.activeBackground#1a0030
  • commandCenter.background#0d0015
  • commandCenter.border#ff00ff
  • commandCenter.foreground#ff00ff
  • debugIcon.breakpointForeground#ff0066
  • debugIcon.continueForeground#aa00ff
  • debugIcon.pauseForeground#ff00ff
  • debugIcon.startForeground#aa00ff
  • debugIcon.stopForeground#ff0066
  • diffEditor.insertedTextBackground#aa00ff15
  • diffEditor.removedTextBackground#ff006615
  • dropdown.background#150028
  • dropdown.border#330055
  • dropdown.foreground#f0e0ff
  • editor.background#0d0015
  • editor.findMatchBackground#ff00ff55
  • editor.findMatchHighlightBackground#ff00ff30
  • editor.foreground#f0e0ff
  • editor.lineHighlightBackground#150028
  • editor.lineHighlightBorder#220040
  • editor.selectionBackground#ff00ff25
  • editor.selectionHighlightBackground#ff00ff15
  • editorBracketHighlight.foreground1#ff00ff
  • editorBracketHighlight.foreground2#aa00ff
  • editorBracketHighlight.foreground3#ff0066
  • editorBracketHighlight.foreground4#dd00ff
  • editorBracketHighlight.foreground5#ff44cc
  • editorBracketHighlight.foreground6#8800ff
  • editorBracketMatch.background#ff00ff20
  • editorBracketMatch.border#ff00ff
  • editorCursor.foreground#ff00ff
  • editorError.foreground#ff0066
  • editorGroupHeader.tabsBackground#0a0018
  • editorHoverWidget.background#150028
  • editorHoverWidget.border#330055
  • editorIndentGuide.activeBackground#ff00ff55
  • editorIndentGuide.background#220040
  • editorInfo.foreground#aa00ff
  • editorLineNumber.activeForeground#ff00ff
  • editorLineNumber.foreground#330055
  • editorRuler.foreground#1f0040
  • editorSuggestWidget.background#150028
  • editorSuggestWidget.border#330055
  • editorSuggestWidget.highlightForeground#ff00ff
  • editorWarning.foreground#ff00ff
  • editorWidget.background#150028
  • editorWidget.border#330055
  • errorForeground#ff0066
  • focusBorder#ff00ff
  • foreground#f0e0ff
  • gitDecoration.addedResourceForeground#aa00ff
  • gitDecoration.deletedResourceForeground#ff0066
  • gitDecoration.ignoredResourceForeground#443355
  • gitDecoration.modifiedResourceForeground#ff00ff
  • gitDecoration.untrackedResourceForeground#dd66ff
  • icon.foreground#553366
  • input.background#150028
  • input.border#330055
  • input.foreground#f0e0ff
  • inputValidation.errorBorder#ff0066
  • inputValidation.infoBorder#aa00ff
  • inputValidation.warningBorder#ff00ff
  • list.activeSelectionBackground#ff00ff20
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff0066
  • list.highlightForeground#ff00ff
  • list.hoverBackground#1f0038
  • list.inactiveSelectionBackground#1a0030
  • list.warningForeground#ff00ff
  • menu.background#150028
  • menu.border#330055
  • menu.foreground#f0e0ff
  • menu.selectionBackground#ff00ff20
  • menu.selectionForeground#ffffff
  • minimap.background#0d0015
  • minimap.errorHighlight#ff0066
  • minimap.findMatchHighlight#ff00ff
  • minimap.selectionHighlight#aa00ff
  • notifications.background#150028
  • notifications.foreground#f0e0ff
  • notificationToast.border#ff00ff
  • panel.background#0a0018
  • panel.border#1a0030
  • panelTitle.activeBorder#ff00ff
  • panelTitle.activeForeground#f0e0ff
  • panelTitle.inactiveForeground#553366
  • peekView.border#ff00ff
  • peekViewEditor.background#0f001a
  • peekViewResult.background#0d0015
  • peekViewTitle.background#150028
  • progressBar.background#ff00ff
  • scrollbarSlider.activeBackground#ff00ff70
  • scrollbarSlider.background#ff00ff18
  • scrollbarSlider.hoverBackground#ff00ff40
  • selection.background#ff00ff40
  • sideBar.background#0f0020
  • sideBar.border#1f0040
  • sideBar.foreground#cc99ff
  • sideBarSectionHeader.background#150028
  • sideBarSectionHeader.border#2a0050
  • sideBarSectionHeader.foreground#dd66ff
  • sideBarTitle.foreground#ff00ff
  • statusBar.background#cc00cc
  • statusBar.border#aa00aa
  • statusBar.debuggingBackground#ff6600
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#440066
  • statusBar.noFolderForeground#ff99ff
  • statusBarItem.hoverBackground#aa00aa40
  • statusBarItem.remoteBackground#ff00ff
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#150028
  • tab.activeBorder#ff00ff
  • tab.activeBorderTop#ff00ff
  • tab.activeForeground#f0e0ff
  • tab.border#1a0030
  • tab.hoverBackground#1a0030
  • tab.inactiveBackground#0a0018
  • tab.inactiveForeground#553366
  • terminal.ansiBlack#1a0030
  • terminal.ansiBlue#8800ff
  • terminal.ansiBrightBlack#553366
  • terminal.ansiBrightBlue#aa33ff
  • terminal.ansiBrightCyan#ee44ff
  • terminal.ansiBrightGreen#bb44ff
  • terminal.ansiBrightMagenta#ff77ff
  • terminal.ansiBrightRed#ff3388
  • terminal.ansiBrightWhite#f0e0ff
  • terminal.ansiBrightYellow#ff55ff
  • terminal.ansiCyan#dd00ff
  • terminal.ansiGreen#aa00ff
  • terminal.ansiMagenta#ff44ff
  • terminal.ansiRed#ff0066
  • terminal.ansiWhite#cc99ff
  • terminal.ansiYellow#ff00ff
  • terminal.background#0d0015
  • terminal.foreground#f0e0ff
  • terminalCursor.foreground#ff00ff
  • titleBar.activeBackground#0d0015
  • titleBar.activeForeground#f0e0ff
  • titleBar.border#ff00ff
  • titleBar.inactiveBackground#0a0010
  • titleBar.inactiveForeground#553366

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#553366italic
variable, string constant.other.placeholder#f0e0ff
variable.language#dd66ffitalic
invalid, invalid.illegal#ff0066bold
keyword, storage.type, storage.modifier#ff00ffbold
keyword.control#ff44ccbold
keyword.operator#ff0066
punctuation#774488
entity.name.tag#ff0066
entity.other.attribute-name#ff00ff
entity.name.function, variable.function, support.function#ffffffbold
entity.name, entity.name.class, support.class#dd66ffbold
support.type, entity.name.type#aa00ff
constant.numeric#ff44cc
constant.language#ff0066bold
constant, support.constant#ff44cc
string#cc66ff
constant.character.escape, string.regexp#ff00ff
source.css support.type.property-name#ff44cc
meta.decorator#ff0066italic
markup.heading#ff00ffbold
markup.bold#ff44ccbold
source.json meta.structure.dictionary.json support.type.property-name.json#ff00ff