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#0A0A0A
  • activityBar.border#FF00FF
  • activityBar.foreground#00FFFF
  • activityBar.inactiveForeground#777777
  • activityBarBadge.background#FF00FF
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FF00FF
  • badge.foreground#0A0A0A
  • breadcrumb.activeSelectionForeground#FF00FF
  • breadcrumb.background#0A0A0A
  • breadcrumb.focusForeground#00FFFF
  • breadcrumb.foreground#777777
  • button.background#FF00FF
  • button.foreground#0A0A0A
  • button.hoverBackground#FF66FF
  • dropdown.background#0A0A0A
  • dropdown.border#FF00FF
  • dropdown.foreground#00FFFF
  • editor.background#0A0A0A
  • editor.findMatchBackground#FFFF0080
  • editor.findMatchHighlightBackground#FFFF0040
  • editor.foreground#C8C8C8
  • editor.lineHighlightBackground#1A1A1A
  • editor.selectionBackground#FF00FF40
  • editor.selectionHighlightBackground#00FFFF30
  • editor.wordHighlightBackground#00FF0040
  • editor.wordHighlightStrongBackground#FF006640
  • editorCursor.foreground#FF00FF
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorGroupHeader.tabsBorder#FF00FF
  • editorIndentGuide.activeBackground#00FFFF
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#00FFFF
  • editorLineNumber.foreground#777777
  • editorOverviewRuler.addedForeground#00FF66
  • editorOverviewRuler.border#0A0A0A
  • editorOverviewRuler.deletedForeground#FF0066
  • editorOverviewRuler.errorForeground#FF0066
  • editorOverviewRuler.infoForeground#00FFFF
  • editorOverviewRuler.modifiedForeground#FFFF00
  • editorOverviewRuler.warningForeground#FFFF00
  • editorRuler.foreground#444444
  • editorWhitespace.foreground#555555
  • gitDecoration.conflictingResourceForeground#FF6600
  • gitDecoration.deletedResourceForeground#FF0066
  • gitDecoration.ignoredResourceForeground#777777
  • gitDecoration.modifiedResourceForeground#FFFF00
  • gitDecoration.submoduleResourceForeground#00FFFF
  • gitDecoration.untrackedResourceForeground#00FF66
  • input.background#0A0A0A
  • input.border#FF00FF
  • input.foreground#00FFFF
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF00FF
  • list.activeSelectionBackground#FF00FF40
  • list.activeSelectionForeground#00FFFF
  • list.focusBackground#FF00FF40
  • list.hoverBackground#00FFFF20
  • list.inactiveSelectionBackground#FF00FF20
  • menu.background#0A0A0A
  • menu.foreground#00FFFF
  • menu.selectionBackground#FF00FF40
  • menu.selectionForeground#00FFFF
  • menu.separatorBackground#FF00FF
  • menubar.selectionBackground#FF00FF40
  • menubar.selectionForeground#00FFFF
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#FF00FF80
  • minimapSlider.background#FF00FF40
  • minimapSlider.hoverBackground#FF00FF60
  • panel.background#0A0A0A
  • panel.border#FF00FF
  • panelTitle.activeBorder#FF00FF
  • panelTitle.activeForeground#00FFFF
  • panelTitle.inactiveForeground#777777
  • progressBar.background#FF00FF
  • scrollbar.shadow#0A0A0A
  • scrollbarSlider.activeBackground#FF00FF80
  • scrollbarSlider.background#FF00FF40
  • scrollbarSlider.hoverBackground#FF00FF60
  • sideBar.background#0A0A0A
  • sideBar.border#FF00FF
  • sideBar.foreground#00FFFF
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#00FFFF
  • sideBarTitle.foreground#FF00FF
  • statusBar.background#0A0A0A
  • statusBar.border#FF00FF
  • statusBar.debuggingBackground#FF0066
  • statusBar.debuggingForeground#0A0A0A
  • statusBar.foreground#00FFFF
  • statusBar.nofolderBackground#0A0A0A
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#FF00FF
  • tab.activeBorderTop#FF00FF
  • tab.activeForeground#00FFFF
  • tab.border#444444
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#777777
  • terminal.ansiBlack#0A0A0A
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#33FF99
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF3399
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF66
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0066
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFFF00
  • terminal.background#0A0A0A
  • terminal.foreground#00FFFF
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#00FFFF
  • titleBar.border#FF00FF
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#777777
  • tree.indentGuidesStroke#FF00FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#777777italic
string#DA70D6
constant.numeric#FFA07A
keyword#FF69B4bold
entity.name.function, support.function#40E0D0bold
entity.name.class, entity.name.type#F0E68Cbold
variable#87CEFA
variable.parameter#FA8072
variable.other.property#98FB98
constant#FFDAB9
keyword.operator#DA70D6
entity.name.tag#FF7F50
entity.other.attribute-name#20B2AA
entity.name.tag.css#FF1493
support.type.property-name.css#4682B4
support.type.property-name.json#CD5C5C
markup.heading#8B4513bold
markup.underline.link#6495ED
markup.inline.raw#ADFF2F