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