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#2a1a4d
  • activityBar.activeBorder#7dd3fc
  • activityBar.background#1a1333
  • activityBar.border#2a1a4d00
  • activityBar.foreground#f9a8d4
  • activityBar.inactiveForeground#3a3f5a
  • badge.background#7dd3fc
  • badge.foreground#1a1333
  • button.activeBorder#7dd3fc
  • button.background#7dd3fc
  • button.border#2a1a4d00
  • button.foreground#1a1333
  • button.hoverBackground#f9a8d4
  • dropdown.activeBorder#7dd3fc
  • dropdown.background#1a1333
  • dropdown.border#2a1a4d00
  • dropdown.foreground#e0e6f0
  • editor.background#1a1333
  • editor.foreground#e0e6f0
  • editor.lineHighlightBackground#2a1a4d
  • editor.selectionBackground#00f0ff55
  • editor.selectionHighlightBackground#00f0ff33
  • editor.wordHighlightBackground#f9a8d433
  • editorBracketMatch.background#00f0ff33
  • editorBracketMatch.border#86efac
  • editorCursor.foreground#86efac
  • editorError.border#2a1a4d00
  • editorGroup.border#2a1a4d00
  • editorGroupHeader.border#2a1a4d00
  • editorGroupHeader.tabsBackground#1a1333
  • editorIndentGuide.activeBackground#f9a8d4
  • editorIndentGuide.background#2a1a4d
  • editorInfo.border#2a1a4d00
  • editorLineNumber.activeForeground#86efac
  • editorLineNumber.foreground#3a3f5a
  • editorWarning.border#2a1a4d00
  • editorWhitespace.foreground#2a1a4d
  • input.activeBorder#7dd3fc
  • input.background#1a1333
  • input.border#2a1a4d00
  • input.foreground#e0e6f0
  • input.placeholderForeground#e0e6f0
  • list.activeSelectionBackground#00f0ff33
  • list.focusBackground#00f0ff33
  • list.hoverBackground#2a1a4d
  • list.inactiveSelectionBackground#2a1a4d
  • notification.background#1a1333
  • notification.buttonBackground#7dd3fc
  • notification.buttonForeground#1a1333
  • notification.buttonHoverBackground#f9a8d4
  • notification.errorBackground#1a1333
  • notification.errorForeground#f9a8d4
  • notification.foreground#e0e6f0
  • notification.infoBackground#1a1333
  • notification.infoForeground#7dd3fc
  • notification.warningBackground#1a1333
  • notification.warningForeground#86efac
  • panel.border#2a1a4d00
  • pickerGroup.border#2a1a4d00
  • pickerGroup.foreground#7dd3fc
  • quickInput.background#1a1333
  • quickInput.foreground#e0e6f0
  • scrollbarSlider.activeBackground#00f0ff33
  • scrollbarSlider.background#2a1a4d88
  • scrollbarSlider.hoverBackground#2a1a4d
  • sideBar.background#1a1333
  • sideBar.foreground#e0e6f0
  • sideBarSectionHeader.background#2a1a4d
  • sideBarSectionHeader.border#2a1a4d00
  • sideBarSectionHeader.foreground#e0e6f0
  • sideBarTitle.foreground#e0e6f0
  • statusBar.background#2a1a4d
  • statusBar.border#2a1a4d00
  • statusBar.debuggingBackground#00f0ff33
  • statusBar.debuggingForeground#86efac
  • statusBar.foreground#e0e6f0
  • statusBar.noFolderBackground#2a1a4d
  • statusBarItem.activeBackground#00f0ff33
  • statusBarItem.hoverBackground#2a1a4d
  • statusBarItem.prominentBackground#2a1a4d
  • statusBarItem.prominentHoverBackground#00f0ff33
  • tab.activeBackground#1a1333
  • tab.activeBorder#2a1a4d00
  • tab.border#2a1a4d00
  • tab.hoverBackground#2a1a4d
  • tab.inactiveBackground#1a1333
  • tab.inactiveBorder#2a1a4d00
  • titleBar.activeBackground#1a1333
  • titleBar.activeForeground#e0e6f0
  • titleBar.inactiveBackground#2a1a4d
  • titleBar.inactiveForeground#f9a8d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a869aitalic
string, constant.other.symbol#86efac
variable, variable.parameter#DE3F44
keyword, storage.type#a78bfa
constant.numeric, constant.language#86efac
entity.name.function, support.function#a78bfa
entity.name.type, support.type#a78bfa
entity.name.class, support.class#86efac
entity.name.tag, support.constant#fdba74
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#5CC1BC
entity.name.tag.style#7dd3fc
support.type.property-name.css#7dd3fc
support.constant.property-value.css#f9a8d4
ByteWave Themes by Codetown - VS Code Theme