Skip to main content
CodingTheme

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#171717
  • activityBar.border#4D937533
  • activityBar.foreground#4D9375
  • activityBarBadge.background#4D9375
  • activityBarBadge.foreground#171717
  • button.background#4D9375
  • button.foreground#171717
  • button.hoverBackground#4D9375cc
  • dropdown.background#1A1A1A
  • dropdown.border#4D937522
  • editor.background#1E1E1E
  • editor.findMatchBackground#4D937544
  • editor.findMatchHighlightBackground#4D937522
  • editor.foreground#4D9375
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#4D937511
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#264F7850
  • editorGroup.border#4D937522
  • editorGroup.dropBackground#4D937522
  • editorGroupHeader.tabsBackground#1A1A1A
  • extensionButton.prominentBackground#4D9375
  • extensionButton.prominentForeground#171717
  • extensionButton.prominentHoverBackground#4D9375cc
  • input.background#1A1A1A
  • input.border#4D937522
  • input.foreground#D4D4D4
  • inputOption.activeBorder#4D9375
  • list.activeSelectionBackground#4D937533
  • list.activeSelectionForeground#D4D4D4
  • list.focusBackground#4D937544
  • list.focusForeground#D4D4D4
  • list.hoverBackground#4D937522
  • list.hoverForeground#D4D4D4
  • list.inactiveSelectionBackground#4D937522
  • list.inactiveSelectionForeground#D4D4D4
  • notificationCenter.border#4D937522
  • notificationCenterHeader.background#1A1A1A
  • notificationCenterHeader.foreground#4D9375
  • notifications.background#1A1A1A
  • notifications.border#4D937522
  • panel.background#1A1A1A
  • panel.border#4D937522
  • panelTitle.activeBorder#4D9375
  • panelTitle.activeForeground#4D9375
  • panelTitle.inactiveForeground#8B8B8B
  • progressBar.background#4D9375
  • scrollbarSlider.activeBackground#4D937566
  • scrollbarSlider.background#4D937533
  • scrollbarSlider.hoverBackground#4D937544
  • sideBar.background#1A1A1A
  • sideBar.border#4D937522
  • sideBar.foreground#8B8B8B
  • sideBarSectionHeader.background#1D1D1D
  • sideBarSectionHeader.border#4D937522
  • sideBarTitle.foreground#4D9375
  • statusBar.background#171717
  • statusBar.border#4D937533
  • statusBar.debuggingBackground#4D9375
  • statusBar.debuggingForeground#171717
  • statusBar.foreground#4D9375
  • statusBar.noFolderBackground#171717
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#4D9375
  • tab.activeForeground#4D9375
  • tab.border#4D937511
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#8B8B8B
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#8B8B8B
  • titleBar.border#4D937522
  • titleBar.inactiveBackground#171717cc
  • titleBar.inactiveForeground#8B8B8B99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#4D9375bold
entity.name.function, support.function, meta.function-call#61AFEFbold
entity.name.type.class, entity.other.inherited-class, support.class#E5C07Bbold
variable, variable.other#D4D4D4
constant, variable.other.constant#D19A66
string#98C379
comment#5C6370italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...