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#FFFFFF
  • activityBar.background#FF9933
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#000080
  • activityBarBadge.foreground#FFFFFF
  • badge.background#000080
  • badge.foreground#FFFFFF
  • button.background#FF9933
  • button.foreground#FFFFFF
  • button.hoverBackground#FFB347
  • button.secondaryBackground#138808
  • button.secondaryForeground#FFFFFF
  • dropdown.background#0C1520
  • dropdown.border#FF993340
  • editor.background#0F1923
  • editor.foreground#E8E8E8
  • editor.lineHighlightBackground#1A2A3A40
  • editor.selectionBackground#FF993335
  • editor.wordHighlightBackground#13880825
  • editorBracketMatch.background#FFD70025
  • editorBracketMatch.border#FFD70080
  • editorCursor.foreground#FF9933
  • editorGroupHeader.tabsBackground#0A1018
  • editorLineNumber.activeForeground#FF9933
  • editorLineNumber.foreground#4A6070
  • editorWidget.background#0C1520
  • editorWidget.border#FF993340
  • focusBorder#FF9933
  • input.background#1A2A3A90
  • input.border#FF993350
  • input.foreground#E8E8E8
  • list.activeSelectionBackground#13880840
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF993325
  • list.hoverBackground#1A2A3A40
  • minimap.selectionHighlight#FF993360
  • panel.background#0C1520
  • panel.border#13880860
  • panelTitle.activeBorder#138808
  • panelTitle.activeForeground#FF9933
  • peekView.border#FF9933
  • peekViewEditor.background#0F1923
  • peekViewTitle.background#13880840
  • scrollbarSlider.background#FF993320
  • scrollbarSlider.hoverBackground#FF993340
  • sideBar.background#0C1520
  • sideBar.foreground#C8C8C8
  • sideBarSectionHeader.background#13880830
  • sideBarSectionHeader.foreground#4DB8FF
  • sideBarTitle.foreground#FF9933
  • statusBar.background#138808
  • statusBar.debuggingBackground#FF4500
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#333333
  • statusBarItem.hoverBackground#1AAF0A
  • tab.activeBackground#0F1923
  • tab.activeBorderTop#FF9933
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#0A1018
  • tab.inactiveForeground#6A7A8A
  • terminal.ansiBlue#000080
  • terminal.ansiCyan#4DB8FF
  • terminal.ansiGreen#138808
  • terminal.ansiRed#FF4500
  • terminal.ansiYellow#FF9933
  • terminal.background#0F1923
  • terminal.foreground#E8E8E8
  • titleBar.activeBackground#FF993390
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#CC7A2970

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#546E7Aitalic
string, string.quoted#66BB6A
string.regexp#138808
constant.numeric#FF9933
constant.language#FF6B35italic
constant.character.escape#4DB8FF
keyword, keyword.control#FF9933bold
keyword.operator#FFB347
storage.type, storage.modifier#FF8C00italic
entity.name.function, support.function#4DB8FF
entity.name.class#FFD700bold
entity.name.type#81D4FA
variable#E8E8E8
variable.parameter#FFCC80italic
variable.other.property#B0BEC5
punctuation#90A4AE
meta.function-call#4DB8FF
support.class#FFD700
markup.heading#FF9933bold
markup.boldbold
markup.italicitalic
markup.inline.raw#138808