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#721212
  • activityBar.border#721212
  • activityBar.foreground#e3eceb
  • activityBar.inactiveForeground#e3eceb80
  • activityBarBadge.background#2a3655
  • activityBarBadge.foreground#e3eceb
  • badge.background#2a3655
  • badge.foreground#e3eceb
  • button.background#2a3655
  • button.foreground#e3eceb
  • button.hoverBackground#721212
  • disabledForeground#e3eceb80
  • dropdown.background#221e3e
  • dropdown.border#721212
  • dropdown.foreground#e3eceb
  • editor.background#232524
  • editor.findMatchBackground#e3eceb40
  • editor.findMatchHighlightBackground#e3eceb20
  • editor.foreground#e3eceb
  • editor.hoverHighlightBackground#2a365580
  • editor.inactiveSelectionBackground#2a365540
  • editor.selectionBackground#2a365580
  • editor.selectionHighlightBackground#72121240
  • editor.wordHighlightBackground#72121240
  • editor.wordHighlightStrongBackground#72121280
  • editorBracketMatch.background#232524
  • editorBracketMatch.border#721212
  • editorCursor.foreground#721212
  • editorGroupHeader.tabsBackground#221e3e
  • editorGroupHeader.tabsBorder#721212
  • editorGutter.addedBackground#e3eceb80
  • editorGutter.background#232524
  • editorGutter.deletedBackground#721212
  • editorGutter.modifiedBackground#2a3655
  • editorIndentGuide.activeBackground#e3eceb80
  • editorIndentGuide.background#2a365580
  • editorLineNumber.activeForeground#e3eceb
  • editorLineNumber.foreground#e3eceb80
  • editorOverviewRuler.border#ffffff00
  • editorOverviewRuler.errorForeground#721212
  • editorOverviewRuler.findMatchForeground#e3eceb40
  • editorOverviewRuler.infoForeground#e3eceb
  • editorOverviewRuler.warningForeground#2a3655
  • editorRuler.foreground#72121280
  • editorWhitespace.foreground#e3eceb40
  • focusBorder#721212
  • foreground#e3eceb
  • input.background#221e3e
  • input.border#721212
  • input.foreground#e3eceb
  • input.placeholderForeground#e3eceb80
  • list.activeSelectionBackground#2a365580
  • list.activeSelectionForeground#e3eceb
  • list.errorForeground#721212
  • list.focusBackground#2a365580
  • list.focusForeground#e3eceb
  • list.highlightForeground#e3eceb
  • list.hoverBackground#221e3e
  • list.hoverForeground#e3eceb
  • list.inactiveSelectionBackground#221e3e80
  • list.inactiveSelectionForeground#e3eceb
  • list.warningForeground#2a3655
  • panel.background#221e3e
  • panel.border#721212
  • panelTitle.activeBorder#e3eceb
  • panelTitle.activeForeground#e3eceb
  • panelTitle.inactiveForeground#e3eceb80
  • peekView.border#721212
  • peekViewEditor.background#232524
  • peekViewEditor.matchHighlightBackground#e3eceb40
  • peekViewResult.background#221e3e
  • peekViewResult.selectionBackground#2a365580
  • peekViewTitle.background#721212
  • progressBar.background#721212
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#721212
  • scrollbarSlider.background#72121240
  • scrollbarSlider.hoverBackground#72121280
  • sideBar.background#221e3e
  • sideBar.border#721212
  • sideBar.foreground#e3eceb
  • sideBarSectionHeader.background#721212
  • sideBarSectionHeader.border#721212
  • sideBarSectionHeader.foreground#e3eceb
  • sideBarTitle.foreground#e3eceb
  • statusBar.background#721212
  • statusBar.border#721212
  • statusBar.debuggingBackground#2a3655
  • statusBar.debuggingForeground#e3eceb
  • statusBar.foreground#e3eceb
  • statusBar.noFolderBackground#221e3e
  • statusBar.noFolderForeground#e3eceb
  • statusBarItem.remoteBackground#2a3655
  • statusBarItem.remoteForeground#e3eceb
  • tab.activeBackground#232524
  • tab.activeBorderTop#e3eceb
  • tab.activeForeground#e3eceb
  • tab.border#721212
  • tab.inactiveBackground#221e3e
  • tab.inactiveForeground#e3eceb80
  • tab.unfocusedActiveBorderTop#e3eceb80
  • terminal.ansiBlack#221e3e
  • terminal.ansiBlue#2a3655
  • terminal.ansiBrightBlack#e3eceb80
  • terminal.ansiBrightBlue#2a3655
  • terminal.ansiBrightCyan#e3eceb
  • terminal.ansiBrightGreen#2a3655
  • terminal.ansiBrightMagenta#721212
  • terminal.ansiBrightRed#721212
  • terminal.ansiBrightWhite#e3eceb
  • terminal.ansiBrightYellow#e3eceb
  • terminal.ansiCyan#e3eceb
  • terminal.ansiGreen#2a3655
  • terminal.ansiMagenta#721212
  • terminal.ansiRed#721212
  • terminal.ansiWhite#e3eceb
  • terminal.ansiYellow#e3eceb80
  • terminal.background#232524
  • terminal.foreground#e3eceb
  • terminalCursor.foreground#721212
  • titleBar.activeBackground#721212
  • titleBar.activeForeground#e3eceb
  • titleBar.border#721212
  • titleBar.inactiveBackground#221e3e
  • titleBar.inactiveForeground#e3eceb80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#E3ECEB80italic
string, punctuation.definition.string, constant.numeric, constant.character, constant.other#E3ECEB—
constant.language#721212bold
variable#E3ECEB—
variable.language#721212italic
keyword, storage#721212bold
storage.type#E3ECEBitalic
entity.name.type, entity.name.class, support.class, entity.name.function, support.function#E3ECEBbold
entity.other.inherited-class#E3ECEBitalic
variable.parameter#E3ECEBitalic
entity.name.tag#721212bold
entity.other.attribute-name#E3ECEBitalic
support.function, support.constant, support.type, support.class, support.variable#5C6A8D
invalid#E3ECEB—
invalid.deprecated#E3ECEB—
support.type.property-name.json#721212—
string.quoted.double.json#E3ECEB—
constant.language.json#E3ECEB—
markup.heading#721212bold
markup.underline.link#5C6A8Dunderline
markup.bold#E3ECEBbold
markup.italic#E3ECEBitalic
markup.inline.raw#5C6A8D—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—