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#0F0F0F
  • activityBar.border#AA7FAA
  • activityBar.foreground#7FAAAA
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#AA7FAA
  • activityBarBadge.foreground#0F0F0F
  • badge.background#AA7FAA
  • badge.foreground#0F0F0F
  • breadcrumb.activeSelectionForeground#AA7FAA
  • breadcrumb.background#0F0F0F
  • breadcrumb.focusForeground#7FAAAA
  • breadcrumb.foreground#666666
  • button.background#AA7FAA
  • button.foreground#0F0F0F
  • button.hoverBackground#CC99CC
  • dropdown.background#0F0F0F
  • dropdown.border#AA7FAA
  • dropdown.foreground#7FAAAA
  • editor.background#0F0F0F
  • editor.findMatchBackground#AAAA7F80
  • editor.findMatchHighlightBackground#AAAA7F50
  • editor.foreground#B0C4DE
  • editor.lineHighlightBackground#1F1F1F
  • editor.selectionBackground#AA7FAA60
  • editor.selectionHighlightBackground#7FAAAA40
  • editor.wordHighlightBackground#7FAA7F50
  • editor.wordHighlightStrongBackground#AA7F7F50
  • editorCursor.foreground#AA7FAA
  • editorGroupHeader.tabsBackground#0F0F0F
  • editorGroupHeader.tabsBorder#AA7FAA
  • editorIndentGuide.activeBackground#7FAAAA
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#7FAAAA
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.addedForeground#7FAA7F
  • editorOverviewRuler.border#0F0F0F
  • editorOverviewRuler.deletedForeground#AA7F7F
  • editorOverviewRuler.errorForeground#AA7F7F
  • editorOverviewRuler.infoForeground#7FAAAA
  • editorOverviewRuler.modifiedForeground#AAAA7F
  • editorOverviewRuler.warningForeground#AAAA7F
  • editorRuler.foreground#333333
  • editorWhitespace.foreground#444444
  • gitDecoration.conflictingResourceForeground#AA997F
  • gitDecoration.deletedResourceForeground#AA7F7F
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#AAAA7F
  • gitDecoration.submoduleResourceForeground#7FAAAA
  • gitDecoration.untrackedResourceForeground#7FAA7F
  • input.background#0F0F0F
  • input.border#AA7FAA
  • input.foreground#7FAAAA
  • input.placeholderForeground#666666
  • inputOption.activeBorder#AA7FAA
  • list.activeSelectionBackground#AA7FAA60
  • list.activeSelectionForeground#7FAAAA
  • list.focusBackground#AA7FAA60
  • list.hoverBackground#7FAAAA30
  • list.inactiveSelectionBackground#AA7FAA40
  • menu.background#0F0F0F
  • menu.foreground#7FAAAA
  • menu.selectionBackground#AA7FAA60
  • menu.selectionForeground#7FAAAA
  • menu.separatorBackground#AA7FAA
  • menubar.selectionBackground#AA7FAA60
  • menubar.selectionForeground#7FAAAA
  • minimap.background#0F0F0F
  • minimapSlider.activeBackground#AA7FAAA0
  • minimapSlider.background#AA7FAA60
  • minimapSlider.hoverBackground#AA7FAA80
  • panel.background#0F0F0F
  • panel.border#AA7FAA
  • panelTitle.activeBorder#AA7FAA
  • panelTitle.activeForeground#7FAAAA
  • panelTitle.inactiveForeground#666666
  • progressBar.background#AA7FAA
  • scrollbar.shadow#0F0F0F
  • scrollbarSlider.activeBackground#AA7FAAA0
  • scrollbarSlider.background#AA7FAA60
  • scrollbarSlider.hoverBackground#AA7FAA80
  • sideBar.background#0F0F0F
  • sideBar.border#AA7FAA
  • sideBar.foreground#7FAAAA
  • sideBarSectionHeader.background#1F1F1F
  • sideBarSectionHeader.foreground#7FAAAA
  • sideBarTitle.foreground#AA7FAA
  • statusBar.background#0F0F0F
  • statusBar.border#AA7FAA
  • statusBar.debuggingBackground#AA7F7F
  • statusBar.debuggingForeground#0F0F0F
  • statusBar.foreground#7FAAAA
  • statusBar.nofolderBackground#0F0F0F
  • tab.activeBackground#0F0F0F
  • tab.activeBorder#AA7FAA
  • tab.activeBorderTop#AA7FAA
  • tab.activeForeground#7FAAAA
  • tab.border#333333
  • tab.inactiveBackground#0F0F0F
  • tab.inactiveForeground#666666
  • terminal.ansiBlack#0F0F0F
  • terminal.ansiBlue#7F7FAA
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#9999CC
  • terminal.ansiBrightCyan#99CCCC
  • terminal.ansiBrightGreen#99CC99
  • terminal.ansiBrightMagenta#CC99CC
  • terminal.ansiBrightRed#CC9999
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#CCCC99
  • terminal.ansiCyan#7FAAAA
  • terminal.ansiGreen#7FAA7F
  • terminal.ansiMagenta#AA7FAA
  • terminal.ansiRed#AA7F7F
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#AAAA7F
  • terminal.background#0F0F0F
  • terminal.foreground#7FAAAA
  • titleBar.activeBackground#0F0F0F
  • titleBar.activeForeground#7FAAAA
  • titleBar.border#AA7FAA
  • titleBar.inactiveBackground#0F0F0F
  • titleBar.inactiveForeground#666666
  • tree.indentGuidesStroke#AA7FAA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#888888italic
string#8FCF8F
constant.numeric#BBA07F
keyword#BB99CCbold
entity.name.function, support.function#7FBFCCbold
entity.name.class, entity.name.type#BBB77Fbold
variable#A0CCCC
variable.parameter#CCAAAA
variable.other.property#99CC99
constant#CCAABB
keyword.operator#BB99CC
entity.name.tag#BB99CC
entity.other.attribute-name#7FBFCC
entity.name.tag.css#BB99CC
support.type.property-name.css#7FBFCC
support.type.property-name.json#BB99CC
markup.heading#BB99CCbold
markup.underline.link#7FBFCC
markup.inline.raw#8FCF8F