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.activeBorder#00ff00
  • activityBar.background#000000
  • activityBar.border#00ff00
  • activityBar.foreground#00ff00
  • activityBar.inactiveForeground#00ff0080
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#000000
  • badge.background#ff00ff
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#00ff00
  • breadcrumb.focusForeground#00ff00
  • breadcrumb.foreground#6a6d72
  • breadcrumbPicker.background#000000
  • button.background#00ff00
  • button.foreground#000000
  • button.hoverBackground#00ff00
  • button.secondaryBackground#3a3d42
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4a4d52
  • dropdown.background#000000
  • dropdown.border#00ff00
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#ff00ffb0
  • editor.findMatchHighlightBackground#ff00ff60
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#3a3d42
  • editor.lineHighlightBackground#1a1d22
  • editor.selectionBackground#00ff0070
  • editorBracketMatch.background#00ff0060
  • editorBracketMatch.border#00ff00
  • editorCursor.foreground#00ff00
  • editorError.foreground#ff0000
  • editorGroup.border#00ff00
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#00ff00
  • editorHint.foreground#00ff00
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#00ff00
  • editorIndentGuide.activeBackground#00ff0080
  • editorIndentGuide.background#2a2d32
  • editorInfo.foreground#00ffff
  • editorLineNumber.activeForeground#00ff00
  • editorLineNumber.foreground#4a4d52
  • editorRuler.foreground#2a2d32
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#00ff00
  • editorSuggestWidget.highlightForeground#00ff00
  • editorSuggestWidget.selectedBackground#00ff0050
  • editorWarning.foreground#ffff00
  • editorWhitespace.foreground#3a3d42
  • editorWidget.background#000000
  • editorWidget.border#00ff00
  • focusBorder#00ff00
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#ffff00
  • gitDecoration.untrackedResourceForeground#00ff00
  • input.background#000000
  • input.border#00ff00
  • input.foreground#ffffff
  • input.placeholderForeground#6a6d72
  • inputOption.activeBackground#00ff0050
  • inputOption.activeBorder#00ff00
  • list.activeSelectionBackground#00ff0050
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#00ff00
  • list.hoverBackground#2a2d32
  • list.inactiveSelectionBackground#3a3d42
  • menu.background#000000
  • menu.foreground#ffffff
  • menu.selectionBackground#00ff0060
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#00ff00
  • menubar.selectionBackground#00ff0060
  • menubar.selectionForeground#ffffff
  • notificationCenter.border#00ff00
  • notificationCenterHeader.background#000000
  • notificationLink.foreground#00ff00
  • notifications.background#000000
  • notifications.border#00ff00
  • panel.background#000000
  • panel.border#00ff00
  • panelTitle.activeBorder#00ff00
  • panelTitle.activeForeground#00ff00
  • panelTitle.inactiveForeground#6a6d72
  • peekView.border#00ff00
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • scrollbarSlider.activeBackground#00ff00a0
  • scrollbarSlider.background#00ff0060
  • scrollbarSlider.hoverBackground#00ff0080
  • sideBar.background#000000
  • sideBar.border#00ff00
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#00ff00
  • sideBarSectionHeader.foreground#00ff00
  • sideBarTitle.foreground#00ff00
  • statusBar.background#000000
  • statusBar.border#00ff00
  • statusBar.debuggingBackground#ff00ff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#00ff00
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#00ff00
  • tab.activeBorderTop#00ff00
  • tab.activeForeground#00ff00
  • tab.border#00ff00
  • tab.hoverBackground#1a1d22
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6a6d72
  • tab.unfocusedActiveBorder#6a6d72
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#0000ff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#00ff00
  • terminal.ansiBrightMagenta#ff00ff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.background#000000
  • terminal.foreground#ffffff
  • terminal.selectionBackground#00ff0070
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00ff00
  • titleBar.border#00ff00
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6a6d72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
string, string.quoted#00ff00
string.template#00ff88
constant.numeric#ffff00
constant.language.boolean#ff00ffbold
constant.language, constant.character#ff0088
keyword, keyword.control#ff00ddbold
storage, storage.type, storage.modifier#ff00ffbold
keyword.operator#ff00dd
entity.name.function, support.function#00ffffbold
entity.name.class, support.class#ffff00bold
entity.name.type, support.type#00ddff
variable, variable.other, variable.parameter#ffffff
variable.language#ff88ffitalic bold
variable.other.property#ffcc00
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator#ff00ffbold
keyword.control.import, keyword.control.from#ff00dd
entity.name.tag#ff0088
entity.other.attribute-name#ffaa00
punctuation#aaaaaa
invalid, invalid.illegal#ff0000bold underline
support.constant, support.variable#ffaa00
support.type.property-name.json#00ddff