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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#F7EAC680italic
string, punctuation.definition.string#F2925C
constant.numeric#F2925C
constant.language#A93D20bold
constant.character, constant.other#F2925C
variable#F7EAC6
variable.language#A93D20italic
keyword#A93D20bold
storage#A93D20
storage.type#F7EAC6italic
entity.name.type, entity.name.class, support.class#F7EAC6bold underline
entity.other.inherited-class#F7EAC6italic underline
entity.name.function, support.function#F7EAC6bold
variable.parameter#F7EAC6italic
entity.name.tag#A93D20bold
entity.other.attribute-name#F2925Citalic
support.function#F2925Cbold
support.constant#F2925C
support.type, support.class#F2925Citalic
support.variable#F2925C
invalid#F7EAC6
invalid.deprecated#172628
support.type.property-name.json#A93D20
string.quoted.double.json#F2925C
constant.language.json#F7EAC6
markup.heading#A93D20bold
markup.underline.link#F2925Cunderline
markup.bold#F7EAC6bold
markup.italic#F7EAC6italic
markup.inline.raw#F2925C
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6