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#330000
  • activityBar.foreground#FFF8E1
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#F44336
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFF8E1
  • breadcrumb.foreground#F8BBD0
  • breadcrumbPicker.background#2B0000
  • button.background#F44336
  • button.foreground#FFFFFF
  • button.hoverBackground#D32F2F
  • debugToolBar.background#2B0000
  • dropdown.background#2B0000
  • dropdown.foreground#FFF8E1
  • editor.background#330000
  • editor.bracketMatch.background#4D0000
  • editor.bracketMatch.border#F44336
  • editor.cursor.foreground#FF5722
  • editor.findMatchBackground#F4433650
  • editor.findMatchHighlightBackground#F4433630
  • editor.foldBackground#4D0000
  • editor.foreground#FFF8E1
  • editor.inactiveSelectionBackground#4D000050
  • editor.lineHighlightBackground#4D000050
  • editor.selectionBackground#4D000080
  • editor.wordHighlightBackground#F8BBD050
  • editor.wordHighlightStrongBackground#F8BBD080
  • editorGroupHeader.tabsBackground#2B0000
  • editorGutter.foldingControlForeground#FFF8E1
  • editorHoverWidget.background#2B0000
  • editorHoverWidget.border#F44336
  • editorLineNumber.foreground#FFCDD2
  • editorOverviewRuler.errorForeground#D32F2F
  • editorOverviewRuler.infoForeground#F06292
  • editorOverviewRuler.warningForeground#ff3bc1
  • extensionButton.prominentBackground#F44336
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#D32F2F
  • gitDecoration.conflictingResourceForeground#E91E63
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.errorResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#FF5722
  • gitDecoration.untrackedResourceForeground#ff8597
  • input.background#2B0000
  • input.foreground#FFF8E1
  • input.placeholderForeground#F8BBD080
  • list.activeSelectionBackground#4D0000
  • list.errorForeground#cf0176
  • list.foreground#FFF8E1
  • list.hoverBackground#4D0000
  • list.inactiveSelectionBackground#4D0000
  • list.warningForeground#a10a3f
  • menu.background#2B0000
  • menu.foreground#FFF8E1
  • menu.selectionBackground#4D0000
  • menu.selectionForeground#FFF8E1
  • notificationCenterHeader.background#2B0000
  • notificationCenterHeader.foreground#FFF8E1
  • notificationToast.background#330000
  • notificationToast.foreground#FFF8E1
  • panel.background#2B0000
  • panelTitle.activeBorder#F44336
  • panelTitle.activeForeground#FFF8E1
  • panelTitle.inactiveForeground#F8BBD0
  • peekView.border#F44336
  • peekViewEditor.background#2B0000
  • peekViewResult.background#2B0000
  • peekViewTitle.background#2B0000
  • pickerGroup.border#4D0000
  • pickerGroup.foreground#FFF8E1
  • progressBar.background#F44336
  • quickInput.background#2B0000
  • quickInput.foreground#FFF8E1
  • quickInput.titleBackground#4D0000
  • quickInputList.focusBackground#4D0000
  • quickInputList.focusForeground#FFF8E1
  • quickInputList.focusIconForeground#FFF8E1
  • quickInputList.hoverBackground#4D000050
  • quickInputList.hoverForeground#FFF8E1
  • quickInputList.hoverIconForeground#FFF8E1
  • scrollbarSlider.activeBackground#F8BBD0
  • scrollbarSlider.background#F8BBD050
  • scrollbarSlider.hoverBackground#F8BBD080
  • settings.checkboxBackground#2B0000
  • settings.checkboxForeground#FFF8E1
  • settings.dropdownBackground#2B0000
  • settings.dropdownForeground#FFF8E1
  • settings.headerForeground#FFF8E1
  • settings.modifiedItemIndicator#F44336
  • settings.numberInputBackground#2B0000
  • settings.numberInputForeground#FFF8E1
  • settings.textInputBackground#2B0000
  • settings.textInputForeground#FFF8E1
  • sideBar.background#2B0000
  • sideBar.foreground#FFF8E1
  • sideBarSectionHeader.background#4D0000
  • sideBarSectionHeader.foreground#FFF8E1
  • statusBar.background#330000
  • statusBar.debuggingBackground#D32F2F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFF8E1
  • tab.activeBackground#330000
  • tab.activeForeground#FFF8E1
  • tab.border#2B0000
  • tab.inactiveBackground#2B0000
  • tab.inactiveForeground#F8BBD0
  • terminal.ansiBlack#1A0000
  • terminal.ansiBlue#F06292
  • terminal.ansiBrightBlack#A1887F
  • terminal.ansiBrightBlue#EC407A
  • terminal.ansiBrightCyan#FF8A65
  • terminal.ansiBrightGreen#CDDC39
  • terminal.ansiBrightMagenta#C2185B
  • terminal.ansiBrightRed#F44336
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#FFB366
  • terminal.ansiGreen#FFEB3B
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#D32F2F
  • terminal.ansiWhite#FFF8E1
  • terminal.ansiYellow#FFC107
  • terminal.background#1A0000
  • terminal.foreground#FFF8E1
  • titleBar.activeBackground#4D0000
  • titleBar.activeForeground#F8BBD0
  • titleBar.inactiveBackground#4D0000
  • titleBar.inactiveForeground#F8BBD0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A1887F
string, punctuation.definition.string#ff3b72
keyword, storage.type, storage.modifier#E91E63
number, constant.numeric#FF5722
variable, support.variable#F44336
function, entity.name.function, meta.function-call#9C27B0
entity.name.type, support.class, support.type#f1126b
operator, keyword.operator#FFF8E1
punctuation, delimiter#FFF8E1
invalid, invalid.deprecated#D32F2F
Pixelated Prism by almzau - VS Code Theme