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#05050A
  • activityBar.foreground#FBEAF1
  • activityBar.inactiveForeground#B99CB0
  • activityBarBadge.background#F4A7C8
  • activityBarBadge.foreground#180712
  • badge.background#F4A7C8
  • badge.foreground#180712
  • button.background#F4A7C8
  • button.foreground#180712
  • button.hoverBackground#FF8FAB
  • button.secondaryBackground#1B2B54
  • button.secondaryForeground#DCE8FF
  • button.secondaryHoverBackground#24396D
  • descriptionForeground#B99CB0
  • dropdown.background#151221
  • dropdown.border#3A2B52
  • dropdown.foreground#FBEAF1
  • editor.background#08060D
  • editor.findMatchBackground#8BB8FF55
  • editor.findMatchHighlightBackground#A78BFA44
  • editor.foreground#FBEAF1
  • editor.inactiveSelectionBackground#2B1D4E88
  • editor.selectionBackground#3F2B55AA
  • editor.wordHighlightBackground#2B1D4E88
  • editor.wordHighlightStrongBackground#3B5FFF55
  • editorBracketMatch.background#2B1D4E
  • editorBracketMatch.border#F4A7C8
  • editorCursor.foreground#F4A7C8
  • editorGroup.border#3A2B52
  • editorGroupHeader.tabsBackground#05050A
  • editorGutter.background#08060D
  • editorLineNumber.activeForeground#F4A7C8
  • editorLineNumber.foreground#4F3F5F
  • editorWidget.background#151221
  • editorWidget.border#3A2B52
  • editorWidget.foreground#FBEAF1
  • errorForeground#FF6B8A
  • focusBorder#8BB8FF
  • foreground#FBEAF1
  • input.background#241B35
  • input.border#3A2B52
  • input.foreground#FBEAF1
  • input.placeholderForeground#B99CB0
  • inputOption.activeBorder#8BB8FF
  • list.activeSelectionBackground#151B35
  • list.activeSelectionForeground#FBEAF1
  • list.highlightForeground#8BB8FF
  • list.hoverBackground#1B1726
  • list.hoverForeground#FBEAF1
  • list.inactiveSelectionBackground#11101A
  • list.inactiveSelectionForeground#FBEAF1
  • notificationCenter.border#3A2B52
  • notifications.background#151221
  • notifications.border#3A2B52
  • notifications.foreground#FBEAF1
  • notificationsErrorIcon.foreground#FF6B8A
  • notificationsInfoIcon.foreground#8BB8FF
  • notificationsWarningIcon.foreground#F6C177
  • panel.background#08060D
  • panel.border#3A2B52
  • panelTitle.activeForeground#F4A7C8
  • panelTitle.inactiveForeground#B99CB0
  • pickerGroup.border#3A2B52
  • pickerGroup.foreground#F4A7C8
  • progressBar.background#A78BFA
  • quickInput.background#151221
  • quickInput.foreground#FBEAF1
  • quickInputList.focusBackground#151B35
  • quickInputList.focusForeground#FBEAF1
  • selection.background#3F2B55AA
  • sideBar.background#05050A
  • sideBar.border#211832
  • sideBar.foreground#FBEAF1
  • sideBarSectionHeader.background#11101A
  • sideBarSectionHeader.border#211832
  • sideBarSectionHeader.foreground#F4A7C8
  • sideBarTitle.foreground#F4A7C8
  • statusBar.background#05050A
  • statusBar.border#211832
  • statusBar.foreground#FBEAF1
  • statusBarItem.remoteBackground#8BB8FF
  • statusBarItem.remoteForeground#08060D
  • tab.activeBackground#11101A
  • tab.activeBorder#F4A7C8
  • tab.activeForeground#FBEAF1
  • tab.border#211832
  • tab.inactiveBackground#08060D
  • tab.inactiveForeground#B99CB0
  • terminal.ansiBlack#0A0710
  • terminal.ansiBlue#8BB8FF
  • terminal.ansiBrightBlack#4F3F5F
  • terminal.ansiBrightBlue#A7C7FF
  • terminal.ansiBrightCyan#BAE6FD
  • terminal.ansiBrightGreen#A7F3D0
  • terminal.ansiBrightMagenta#D8B4FE
  • terminal.ansiBrightRed#FF8FAB
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD6A5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#7EE7B2
  • terminal.ansiMagenta#F4A7C8
  • terminal.ansiRed#FF6B8A
  • terminal.ansiWhite#EDE7F6
  • terminal.ansiYellow#F6C177
  • terminal.background#08060D
  • terminal.foreground#FBEAF1
  • terminal.selectionBackground#3F2B55AA
  • terminalCursor.foreground#F4A7C8
  • textLink.activeForeground#F4A7C8
  • textLink.foreground#8BB8FF
  • titleBar.activeBackground#05050A
  • titleBar.activeForeground#FBEAF1
  • titleBar.inactiveBackground#08060D
  • titleBar.inactiveForeground#B99CB0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B99CB0italic
string, constant.other.symbol#A7F3D0
constant.numeric, constant.language, support.constant#F6C177
keyword, storage, storage.type#F4A7C8
entity.name.function, support.function, meta.function-call#8BB8FF
entity.name.type, support.type, entity.name.class#D8B4FE
variable, variable.other, support.variable#FBEAF1
entity.name.tag, meta.tag#F4A7C8
entity.other.attribute-name#8BE9FD
invalid, invalid.illegal#FF6B8A