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#c53d1f
  • activityBar.border#c53d1f
  • activityBar.foreground#f6fffe
  • activityBar.inactiveForeground#f6fffe80
  • activityBarBadge.background#f39b01
  • activityBarBadge.foreground#13120e
  • badge.background#f39b01
  • badge.foreground#13120e
  • button.background#f39b01
  • button.foreground#13120e
  • button.hoverBackground#c53d1f
  • disabledForeground#f6fffe80
  • dropdown.background#410103
  • dropdown.border#c53d1f
  • dropdown.foreground#f6fffe
  • editor.background#13120e
  • editor.findMatchBackground#f39b0180
  • editor.findMatchHighlightBackground#f39b0140
  • editor.foreground#f6fffe
  • editor.hoverHighlightBackground#41010380
  • editor.inactiveSelectionBackground#41010340
  • editor.selectionBackground#41010380
  • editor.selectionHighlightBackground#f39b0140
  • editor.wordHighlightBackground#c53d1f40
  • editor.wordHighlightStrongBackground#c53d1f80
  • editorBracketMatch.background#13120e
  • editorBracketMatch.border#f39b01
  • editorCursor.foreground#f39b01
  • editorGroupHeader.tabsBackground#410103
  • editorGroupHeader.tabsBorder#c53d1f
  • editorGutter.addedBackground#f6fffe80
  • editorGutter.background#13120e
  • editorGutter.deletedBackground#c53d1f
  • editorGutter.modifiedBackground#f39b01
  • editorIndentGuide.activeBackground#f6fffe80
  • editorIndentGuide.background#41010380
  • editorLineNumber.activeForeground#f6fffe
  • editorLineNumber.foreground#f6fffe80
  • editorOverviewRuler.border#ffffff00
  • editorOverviewRuler.errorForeground#c53d1f
  • editorOverviewRuler.findMatchForeground#f39b0180
  • editorOverviewRuler.infoForeground#f6fffe
  • editorOverviewRuler.warningForeground#f39b01
  • editorRuler.foreground#c53d1f80
  • editorWhitespace.foreground#f6fffe40
  • focusBorder#f39b01
  • foreground#f6fffe
  • input.background#410103
  • input.border#c53d1f
  • input.foreground#f6fffe
  • input.placeholderForeground#f6fffe80
  • list.activeSelectionBackground#f39b0180
  • list.activeSelectionForeground#13120e
  • list.errorForeground#c53d1f
  • list.focusBackground#f39b0180
  • list.focusForeground#13120e
  • list.highlightForeground#f39b01
  • list.hoverBackground#410103
  • list.hoverForeground#f6fffe
  • list.inactiveSelectionBackground#41010380
  • list.inactiveSelectionForeground#f6fffe
  • list.warningForeground#f39b01
  • panel.background#410103
  • panel.border#c53d1f
  • panelTitle.activeBorder#f39b01
  • panelTitle.activeForeground#f6fffe
  • panelTitle.inactiveForeground#f6fffe80
  • peekView.border#f39b01
  • peekViewEditor.background#13120e
  • peekViewEditor.matchHighlightBackground#f39b0180
  • peekViewResult.background#410103
  • peekViewResult.selectionBackground#f39b0180
  • peekViewTitle.background#c53d1f
  • progressBar.background#f39b01
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#c53d1f
  • scrollbarSlider.background#c53d1f40
  • scrollbarSlider.hoverBackground#c53d1f80
  • sideBar.background#410103
  • sideBar.border#c53d1f
  • sideBar.foreground#f6fffe
  • sideBarSectionHeader.background#c53d1f
  • sideBarSectionHeader.border#c53d1f
  • sideBarSectionHeader.foreground#f6fffe
  • sideBarTitle.foreground#f6fffe
  • statusBar.background#c53d1f
  • statusBar.border#c53d1f
  • statusBar.debuggingBackground#f39b01
  • statusBar.debuggingForeground#13120e
  • statusBar.foreground#f6fffe
  • statusBar.noFolderBackground#410103
  • statusBar.noFolderForeground#f6fffe
  • statusBarItem.remoteBackground#f39b01
  • statusBarItem.remoteForeground#13120e
  • tab.activeBackground#13120e
  • tab.activeBorderTop#f39b01
  • tab.activeForeground#f6fffe
  • tab.border#c53d1f
  • tab.inactiveBackground#410103
  • tab.inactiveForeground#f6fffe80
  • tab.unfocusedActiveBorderTop#f39b0180
  • terminal.ansiBlack#410103
  • terminal.ansiBlue#410103
  • terminal.ansiBrightBlack#f6fffe80
  • terminal.ansiBrightBlue#410103
  • terminal.ansiBrightCyan#f6fffe
  • terminal.ansiBrightGreen#f39b01
  • terminal.ansiBrightMagenta#c53d1f
  • terminal.ansiBrightRed#c53d1f
  • terminal.ansiBrightWhite#f6fffe
  • terminal.ansiBrightYellow#f39b01
  • terminal.ansiCyan#f6fffe
  • terminal.ansiGreen#f39b01
  • terminal.ansiMagenta#c53d1f
  • terminal.ansiRed#c53d1f
  • terminal.ansiWhite#f6fffe
  • terminal.ansiYellow#f39b01
  • terminal.background#13120e
  • terminal.foreground#f6fffe
  • terminalCursor.foreground#f39b01
  • titleBar.activeBackground#c53d1f
  • titleBar.activeForeground#f6fffe
  • titleBar.border#c53d1f
  • titleBar.inactiveBackground#410103
  • titleBar.inactiveForeground#f6fffe80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#F6FFFE80italic
string, punctuation.definition.string#F39B01—
constant.numeric#F39B01—
constant.language#C53D1Fbold
constant.character, constant.other#F39B01—
variable#F6FFFE—
variable.language#C53D1Fitalic
keyword#C53D1Fbold
storage#C53D1F
storage.type#F6FFFEitalic
entity.name.type, entity.name.class, support.class#F6FFFEbold underline
entity.other.inherited-class#F6FFFEitalic underline
entity.name.function, support.function#F6FFFEbold
variable.parameter#F6FFFEitalic
entity.name.tag#C53D1Fbold
entity.other.attribute-name#F39B01italic
support.function#F39B01bold
support.constant#F39B01—
support.type, support.class#F39B01italic
support.variable#F39B01—
invalid#F6FFFE—
invalid.deprecated#13120E—
support.type.property-name.json#C53D1F—
string.quoted.double.json#F39B01—
constant.language.json#F6FFFE—
markup.heading#C53D1Fbold
markup.underline.link#F39B01underline
markup.bold#F6FFFEbold
markup.italic#F6FFFEitalic
markup.inline.raw#F39B01—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—