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#0F0F1F
  • activityBar.border#00FFFF
  • activityBar.foreground#FF00FF
  • activityBar.inactiveForeground#AA66AA
  • activityBarBadge.background#00FFFF
  • activityBarBadge.foreground#0F0F1F
  • badge.background#00FFFF
  • badge.foreground#0F0F1F
  • breadcrumb.activeSelectionForeground#00FFFF
  • breadcrumb.background#0F0F1F
  • breadcrumb.focusForeground#FF00FF
  • breadcrumb.foreground#AA66AA
  • button.background#00FFFF
  • button.foreground#0F0F1F
  • button.hoverBackground#40FFFF
  • dropdown.background#0F0F1F
  • dropdown.border#00FFFF
  • dropdown.foreground#FF00FF
  • editor.background#0F0F1F
  • editor.findMatchBackground#FFFF0090
  • editor.findMatchHighlightBackground#FFFF0060
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1F1F2F
  • editor.selectionBackground#FF00FF80
  • editor.selectionHighlightBackground#00FFFF50
  • editor.wordHighlightBackground#00FF0060
  • editor.wordHighlightStrongBackground#FF006060
  • editorCursor.foreground#00FFFF
  • editorGroupHeader.tabsBackground#0F0F1F
  • editorGroupHeader.tabsBorder#00FFFF
  • editorIndentGuide.activeBackground#FF00FF
  • editorIndentGuide.background#444466
  • editorLineNumber.activeForeground#FF00FF
  • editorLineNumber.foreground#AA66AA
  • editorOverviewRuler.addedForeground#80FF00
  • editorOverviewRuler.border#0F0F1F
  • editorOverviewRuler.deletedForeground#FF0080
  • editorOverviewRuler.errorForeground#FF0080
  • editorOverviewRuler.infoForeground#00FFFF
  • editorOverviewRuler.modifiedForeground#FFFF00
  • editorOverviewRuler.warningForeground#FFFF00
  • editorRuler.foreground#444466
  • editorWhitespace.foreground#666688
  • gitDecoration.conflictingResourceForeground#FF8000
  • gitDecoration.deletedResourceForeground#FF0080
  • gitDecoration.ignoredResourceForeground#AA66AA
  • gitDecoration.modifiedResourceForeground#FFFF00
  • gitDecoration.submoduleResourceForeground#00FFFF
  • gitDecoration.untrackedResourceForeground#80FF00
  • input.background#0F0F1F
  • input.border#00FFFF
  • input.foreground#FF00FF
  • input.placeholderForeground#AA66AA
  • inputOption.activeBorder#00FFFF
  • list.activeSelectionBackground#FF00FF80
  • list.activeSelectionForeground#00FFFF
  • list.focusBackground#FF00FF80
  • list.hoverBackground#00FFFF50
  • list.inactiveSelectionBackground#FF00FF60
  • menu.background#0F0F1F
  • menu.foreground#FF00FF
  • menu.selectionBackground#FF00FF80
  • menu.selectionForeground#00FFFF
  • menu.separatorBackground#00FFFF
  • menubar.selectionBackground#FF00FF80
  • menubar.selectionForeground#00FFFF
  • minimap.background#0F0F1F
  • minimapSlider.activeBackground#FF00FFC0
  • minimapSlider.background#FF00FF80
  • minimapSlider.hoverBackground#FF00FFA0
  • panel.background#0F0F1F
  • panel.border#00FFFF
  • panelTitle.activeBorder#00FFFF
  • panelTitle.activeForeground#FF00FF
  • panelTitle.inactiveForeground#AA66AA
  • progressBar.background#00FFFF
  • scrollbar.shadow#0F0F1F
  • scrollbarSlider.activeBackground#FF00FFC0
  • scrollbarSlider.background#FF00FF80
  • scrollbarSlider.hoverBackground#FF00FFA0
  • sideBar.background#0F0F1F
  • sideBar.border#00FFFF
  • sideBar.foreground#FF00FF
  • sideBarSectionHeader.background#1F1F2F
  • sideBarSectionHeader.foreground#FF00FF
  • sideBarTitle.foreground#00FFFF
  • statusBar.background#0F0F1F
  • statusBar.border#00FFFF
  • statusBar.debuggingBackground#FF0080
  • statusBar.debuggingForeground#0F0F1F
  • statusBar.foreground#FF00FF
  • statusBar.nofolderBackground#0F0F1F
  • tab.activeBackground#0F0F1F
  • tab.activeBorder#00FFFF
  • tab.activeBorderTop#00FFFF
  • tab.activeForeground#FF00FF
  • tab.border#444466
  • tab.inactiveBackground#0F0F1F
  • tab.inactiveForeground#AA66AA
  • terminal.ansiBlack#0F0F1F
  • terminal.ansiBlue#0080FF
  • terminal.ansiBrightBlack#AA66AA
  • terminal.ansiBrightBlue#40A0FF
  • terminal.ansiBrightCyan#40FFFF
  • terminal.ansiBrightGreen#A0FF40
  • terminal.ansiBrightMagenta#FF40FF
  • terminal.ansiBrightRed#FF40A0
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF40
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#80FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0080
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFFF00
  • terminal.background#0F0F1F
  • terminal.foreground#FF00FF
  • titleBar.activeBackground#0F0F1F
  • titleBar.activeForeground#FF00FF
  • titleBar.border#00FFFF
  • titleBar.inactiveBackground#0F0F1F
  • titleBar.inactiveForeground#AA66AA
  • tree.indentGuidesStroke#00FFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#EE82EEitalic
string#7FFF00
constant.numeric#FFA500
keyword#FF1493bold
entity.name.function, support.function#00CED1bold
entity.name.class, entity.name.type#FFD700bold
variable#B0E0E6
variable.parameter#FFA07A
variable.other.property#98FB98
constant#BA55D3
keyword.operator#FF4500
entity.name.tag#DC143C
entity.other.attribute-name#4682B4
entity.name.tag.css#DA70D6
support.type.property-name.css#20B2AA
support.type.property-name.json#B22222
markup.heading#EE82EEbold
markup.underline.link#00BFFF
markup.inline.raw#32CD32