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.activeBackground#151a2a
  • activityBar.activeBorder#7dd3fc
  • activityBar.background#0a0f1c
  • activityBar.border#151a2a00
  • activityBar.foreground#7a7e9a
  • activityBar.inactiveForeground#3a3f5a
  • badge.background#7dd3fc
  • badge.foreground#0a0f1c
  • button.activeBorder#7dd3fc
  • button.background#7dd3fc
  • button.border#151a2a00
  • button.foreground#0a0f1c
  • button.hoverBackground#fed7aa
  • dropdown.activeBorder#7dd3fc
  • dropdown.background#0a0f1c
  • dropdown.border#151a2a00
  • dropdown.foreground#e0e6f0
  • editor.background#0a0f1c
  • editor.foreground#e0e6f0
  • editor.lineHighlightBackground#151a2a
  • editor.selectionBackground#2d2a55
  • editor.selectionHighlightBackground#2d2a55aa
  • editor.wordHighlightBackground#2d2a55aa
  • editorBracketMatch.background#2d2a55
  • editorBracketMatch.border#7dd3fc
  • editorCursor.foreground#fef3c7
  • editorError.border#151a2a00
  • editorGroup.border#151a2a00
  • editorGroupHeader.border#151a2a00
  • editorGroupHeader.tabsBackground#0a0f1c
  • editorIndentGuide.activeBackground#fef3c7
  • editorIndentGuide.background#151a2a
  • editorInfo.border#151a2a00
  • editorLineNumber.activeForeground#fef3c7
  • editorLineNumber.foreground#3a3f5a
  • editorWarning.border#151a2a00
  • editorWhitespace.foreground#151a2a
  • input.activeBorder#7dd3fc
  • input.background#0a0f1c
  • input.border#151a2a00
  • input.foreground#e0e6f0
  • input.placeholderForeground#7a7e9a
  • list.activeSelectionBackground#2d2a55
  • list.focusBackground#2d2a55
  • list.hoverBackground#151a2a
  • list.inactiveSelectionBackground#151a2a
  • notification.background#0a0f1c
  • notification.buttonBackground#7dd3fc
  • notification.buttonForeground#0a0f1c
  • notification.buttonHoverBackground#fed7aa
  • notification.errorBackground#0a0f1c
  • notification.errorForeground#f9a8d4
  • notification.foreground#e0e6f0
  • notification.infoBackground#0a0f1c
  • notification.infoForeground#7dd3fc
  • notification.warningBackground#0a0f1c
  • notification.warningForeground#fed7aa
  • panel.border#151a2a00
  • pickerGroup.border#151a2a00
  • pickerGroup.foreground#7dd3fc
  • quickInput.background#0a0f1c
  • quickInput.foreground#e0e6f0
  • scrollbarSlider.activeBackground#2d2a55
  • scrollbarSlider.background#151a2a88
  • scrollbarSlider.hoverBackground#151a2a
  • sideBar.background#0a0f1c
  • sideBar.foreground#e0e6f0
  • sideBarSectionHeader.background#151a2a
  • sideBarSectionHeader.border#151a2a00
  • sideBarSectionHeader.foreground#e0e6f0
  • sideBarTitle.foreground#e0e6f0
  • statusBar.background#151a2a
  • statusBar.border#151a2a00
  • statusBar.debuggingBackground#2d2a55
  • statusBar.debuggingForeground#fed7aa
  • statusBar.foreground#e0e6f0
  • statusBar.noFolderBackground#151a2a
  • statusBarItem.activeBackground#2d2a55
  • statusBarItem.hoverBackground#151a2a
  • statusBarItem.prominentBackground#151a2a
  • statusBarItem.prominentHoverBackground#2d2a55
  • tab.activeBackground#0a0f1c
  • tab.activeBorder#151a2a00
  • tab.border#151a2a00
  • tab.hoverBackground#151a2a
  • tab.inactiveBackground#0a0f1c
  • tab.inactiveBorder#151a2a00
  • titleBar.activeBackground#0a0f1c
  • titleBar.activeForeground#e0e6f0
  • titleBar.inactiveBackground#151a2a
  • titleBar.inactiveForeground#7a7e9a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7e9aitalic
string, constant.other.symbol#fef3c7
variable, variable.parameter#7dd3fc
keyword, storage.type#f9a8d4
constant.numeric, constant.language#fef3c7
entity.name.function, support.function#fed7aa
entity.name.type, support.type#f9a8d4
entity.name.class, support.class#fed7aa
entity.name.tag, support.constant#f9a8d4
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#7dd3fc
entity.name.tag.style#7dd3fc
support.type.property-name.css#fed7aa
support.constant.property-value.css#f9a8d4
ByteWave Themes by Codetown - VS Code Theme