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#0a0a0f
  • activityBar.foreground#ff00ff
  • activityBar.inactiveForeground#3a1a3a
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#000000
  • badge.background#ff00ff
  • badge.foreground#000000
  • button.background#ff00ff
  • button.foreground#000000
  • button.hoverBackground#ff00aa
  • debugToolBar.background#1a0a2a
  • debugToolBar.border#ff00ff
  • editor.background#0a0a0f
  • editor.findMatchBackground#00ff0050
  • editor.findMatchHighlightBackground#00ff0020
  • editor.foreground#00ffff
  • editor.inactiveSelectionBackground#ff00ff15
  • editor.lineHighlightBackground#1a0a1f
  • editor.selectionBackground#ff00ff30
  • editor.wordHighlightBackground#ff00ff30
  • editor.wordHighlightStrongBackground#ff00ff50
  • editorBracketMatch.background#2a0a3f
  • editorBracketMatch.border#00ff00
  • editorCursor.foreground#00ff00
  • editorError.foreground#ff0080
  • editorGroupHeader.tabsBackground#0a0a0f
  • editorHint.foreground#00ff00
  • editorIndentGuide.activeBackground#3a1a3a
  • editorIndentGuide.background#1f0a1f
  • editorInfo.foreground#00ffff
  • editorLineNumber.activeForeground#ff00ff
  • editorLineNumber.foreground#3a1a3a
  • editorSuggestWidget.background#0d0d14
  • editorSuggestWidget.border#ff00ff
  • editorSuggestWidget.selectedBackground#2a0a3f
  • editorWarning.foreground#ffff00
  • editorWhitespace.foreground#2a1a2a
  • editorWidget.background#0d0d14
  • editorWidget.border#ff00ff
  • extensionButton.prominentBackground#00ff00
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#00ff80
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff0080
  • gitDecoration.ignoredResourceForeground#3a1a3a
  • gitDecoration.modifiedResourceForeground#ffff00
  • gitDecoration.untrackedResourceForeground#00ff00
  • input.background#1a0a1f
  • input.border#ff00ff
  • input.foreground#00ffff
  • inputOption.activeBackground#2a0a3f
  • inputOption.activeForeground#00ff00
  • list.activeSelectionBackground#2a0a3f
  • list.activeSelectionForeground#00ff00
  • list.hoverBackground#1a0a2a
  • list.hoverForeground#00ffff
  • list.inactiveSelectionBackground#1f0a2f
  • notificationCenter.border#ff00ff
  • notifications.background#0d0d14
  • notifications.border#ff00ff
  • notificationToast.border#ff00ff
  • panel.background#0a0a0f
  • panel.border#ff00ff40
  • panelTitle.activeBorder#00ff00
  • panelTitle.activeForeground#00ffff
  • panelTitle.inactiveForeground#4a2a4a
  • peekViewEditor.background#0d0d14
  • peekViewResult.background#0d0d14
  • peekViewTitle.background#1a0a2a
  • pickerGroup.border#ff00ff
  • pickerGroup.foreground#ff00ff
  • scrollbarSlider.activeBackground#ff00ff80
  • scrollbarSlider.background#ff00ff30
  • scrollbarSlider.hoverBackground#ff00ff50
  • sideBar.background#0d0d14
  • sideBar.foreground#00ffff
  • sideBarSectionHeader.background#1a0a1f
  • sideBarSectionHeader.foreground#ff00ff
  • sideBarTitle.foreground#ff00ff
  • statusBar.background#0a0a0f
  • statusBar.debuggingBackground#ff00ff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ff00ff
  • statusBar.noFolderBackground#0a0a0f
  • tab.activeBackground#1a0a2a
  • tab.activeForeground#00ffff
  • tab.border#ff00ff40
  • tab.inactiveBackground#0a0a0f
  • tab.inactiveForeground#4a2a4a
  • terminal.ansiBlack#0a0a0f
  • terminal.ansiBlue#0080ff
  • terminal.ansiBrightBlack#3a1a3a
  • terminal.ansiBrightBlue#00aaff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#00ff80
  • terminal.ansiBrightMagenta#ff00ff
  • terminal.ansiBrightRed#ff00aa
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff80
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff0080
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.background#0a0a0f
  • terminal.foreground#00ffff
  • titleBar.activeBackground#0a0a0f
  • titleBar.activeForeground#ff00ff
  • titleBar.inactiveBackground#0a0a0f
  • titleBar.inactiveForeground#3a1a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a2a4aitalic
keyword, storage.type, storage.modifier#ff00ff
keyword.control, keyword.operator#ff00aa
string, string.quoted#00ff00
constant.numeric, constant.language#ff0080
constant.character.escape#ffff00
entity.name.function, support.function#00ffff
entity.name.class, entity.name.type, support.class#0080ff
variable, variable.other#00ffff
variable.parameter#80ffff
entity.name.tag#ff00ff
entity.other.attribute-name#00ff80
support.type.property-name#00ffff
markup.heading#ff00ffbold
markup.bold#ff00ffbold
markup.italic#00ffffitalic
markup.underlineunderline
markup.inline.raw#00ff00
punctuation.definition.tag#4a2a4a
meta.function-call#00ffff
invalid#ff0080