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#050510
  • activityBar.border#FFDD00
  • activityBar.foreground#00DDFF
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#FFDD00
  • activityBarBadge.foreground#050510
  • badge.background#FFDD00
  • badge.foreground#050510
  • breadcrumb.activeSelectionForeground#FFDD00
  • breadcrumb.background#050510
  • breadcrumb.focusForeground#00DDFF
  • breadcrumb.foreground#999999
  • button.background#FFDD00
  • button.foreground#050510
  • button.hoverBackground#FFFF00
  • dropdown.background#050510
  • dropdown.border#FFDD00
  • dropdown.foreground#00DDFF
  • editor.background#050510
  • editor.findMatchBackground#FFFF00B0
  • editor.findMatchHighlightBackground#FFFF0070
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#151520
  • editor.selectionBackground#FFDD0080
  • editor.selectionHighlightBackground#00DDFF50
  • editor.wordHighlightBackground#00FF4470
  • editor.wordHighlightStrongBackground#FF440070
  • editorCursor.foreground#FFDD00
  • editorGroupHeader.tabsBackground#050510
  • editorGroupHeader.tabsBorder#FFDD00
  • editorIndentGuide.activeBackground#00DDFF
  • editorIndentGuide.background#555555
  • editorLineNumber.activeForeground#00DDFF
  • editorLineNumber.foreground#999999
  • editorOverviewRuler.addedForeground#00FF44
  • editorOverviewRuler.border#050510
  • editorOverviewRuler.deletedForeground#FF4400
  • editorOverviewRuler.errorForeground#FF4400
  • editorOverviewRuler.infoForeground#00DDFF
  • editorOverviewRuler.modifiedForeground#FFDD00
  • editorOverviewRuler.warningForeground#FFDD00
  • editorRuler.foreground#555555
  • editorWhitespace.foreground#777777
  • gitDecoration.conflictingResourceForeground#FF8800
  • gitDecoration.deletedResourceForeground#FF4400
  • gitDecoration.ignoredResourceForeground#999999
  • gitDecoration.modifiedResourceForeground#FFDD00
  • gitDecoration.submoduleResourceForeground#00DDFF
  • gitDecoration.untrackedResourceForeground#00FF44
  • input.background#050510
  • input.border#FFDD00
  • input.foreground#00DDFF
  • input.placeholderForeground#999999
  • inputOption.activeBorder#FFDD00
  • list.activeSelectionBackground#FFDD0080
  • list.activeSelectionForeground#00DDFF
  • list.focusBackground#FFDD0080
  • list.hoverBackground#00DDFF50
  • list.inactiveSelectionBackground#FFDD0050
  • menu.background#050510
  • menu.foreground#00DDFF
  • menu.selectionBackground#FFDD0080
  • menu.selectionForeground#00DDFF
  • menu.separatorBackground#FFDD00
  • menubar.selectionBackground#FFDD0080
  • menubar.selectionForeground#00DDFF
  • minimap.background#050510
  • minimapSlider.activeBackground#FFDD00C0
  • minimapSlider.background#FFDD0080
  • minimapSlider.hoverBackground#FFDD00A0
  • panel.background#050510
  • panel.border#FFDD00
  • panelTitle.activeBorder#FFDD00
  • panelTitle.activeForeground#00DDFF
  • panelTitle.inactiveForeground#999999
  • progressBar.background#FFDD00
  • scrollbar.shadow#050510
  • scrollbarSlider.activeBackground#FFDD00C0
  • scrollbarSlider.background#FFDD0080
  • scrollbarSlider.hoverBackground#FFDD00A0
  • sideBar.background#050510
  • sideBar.border#FFDD00
  • sideBar.foreground#00DDFF
  • sideBarSectionHeader.background#151520
  • sideBarSectionHeader.foreground#00DDFF
  • sideBarTitle.foreground#FFDD00
  • statusBar.background#050510
  • statusBar.border#FFDD00
  • statusBar.debuggingBackground#FF4400
  • statusBar.debuggingForeground#050510
  • statusBar.foreground#00DDFF
  • statusBar.nofolderBackground#050510
  • tab.activeBackground#050510
  • tab.activeBorder#FFDD00
  • tab.activeBorderTop#FFDD00
  • tab.activeForeground#00DDFF
  • tab.border#555555
  • tab.inactiveBackground#050510
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#050510
  • terminal.ansiBlue#0044FF
  • terminal.ansiBrightBlack#999999
  • terminal.ansiBrightBlue#0066FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#66FF00
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6600
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#00DDFF
  • terminal.ansiGreen#00FF44
  • terminal.ansiMagenta#FF00DD
  • terminal.ansiRed#FF4400
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFDD00
  • terminal.background#050510
  • terminal.foreground#00DDFF
  • titleBar.activeBackground#050510
  • titleBar.activeForeground#00DDFF
  • titleBar.border#FFDD00
  • titleBar.inactiveBackground#050510
  • titleBar.inactiveForeground#999999
  • tree.indentGuidesStroke#FFDD00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#888888italic
string#7FFFD4italic
constant.numeric#FFA500bold
keyword.control#FFD700bold underline
keyword.declaration#FFAA00bold
keyword.export, keyword.default#FF4500bold italic
entity.name.function, support.function#00BFFFbold underline
entity.name.class, entity.name.type#ADFF2Fbold
variable#ADD8E6
variable.parameter#F0E68Citalic
variable.other.property#98FB98underline
constant#DDA0DDbold
keyword.operator#FF6347bold
entity.name.tag#FF4500bold
entity.other.attribute-name#20B2AAitalic
entity.name.tag.css#FF1493bold
support.type.property-name.css#5F9EA0italic
support.type.property-name.json#FA8072bold
markup.heading#9370DBbold underline
markup.underline.link#4169E1underline
markup.inline.raw#7CFC00bold
Null Theme by kimberlycasamina - VS Code Theme