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#034972
  • activityBar.border#D4A853
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#D4A853
  • activityBarBadge.foreground#0F1D2E
  • badge.background#034972
  • badge.foreground#FFFFFF
  • button.background#023556
  • button.foreground#FFFFFF
  • dropdown.background#FFFFFF
  • dropdown.border#03497270
  • dropdown.foreground#0F1D2E
  • editor.background#FFFFFF
  • editor.findMatchBackground#D4A85366
  • editor.findMatchHighlightBackground#D4A85340
  • editor.foreground#0F1D2E
  • editor.inactiveSelectionBackground#03497218
  • editor.lineHighlightBackground#E8F2FA
  • editor.selectionBackground#03497240
  • editor.selectionHighlightBackground#03497228
  • editor.wordHighlightBackground#D4E4F4
  • editor.wordHighlightStrongBackground#03497235
  • editorBracketMatch.background#03497225
  • editorBracketMatch.border#D4A853
  • editorCursor.foreground#034972
  • editorGroup.border#03497250
  • editorGroupHeader.tabsBackground#EEF3F9
  • editorGutter.background#F8FBFF
  • editorIndentGuide.activeBackground#034972
  • editorIndentGuide.background#C5D5E3
  • editorLineNumber.activeForeground#034972
  • editorLineNumber.foreground#6B8299
  • editorWidget.background#FFFFFF
  • editorWidget.border#D4A853
  • editorWidget.foreground#0F1D2E
  • focusBorder#0D9488
  • input.background#FFFFFF
  • input.border#03497270
  • input.foreground#0F1D2E
  • list.activeSelectionBackground#034972
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D4A853
  • list.hoverBackground#E8F2FA
  • list.inactiveSelectionBackground#03497220
  • notificationCenter.border#D4A853
  • notificationsErrorIcon.foreground#C42B1C
  • panel.background#F8FBFF
  • panel.border#03497245
  • panelTitle.activeForeground#034972
  • panelTitle.inactiveForeground#5C7086
  • peekView.border#D4A853
  • progressBar.background#D4A853
  • sash.hoverBorder#0D9488
  • scrollbarSlider.activeBackground#03497280
  • sideBar.background#F0F6FC
  • sideBar.border#03497245
  • sideBar.foreground#0F1D2E
  • sideBarTitle.foreground#034972
  • statusBar.background#023556
  • statusBar.border#D4A853
  • statusBar.foreground#FFFFFF
  • statusBarItem.prominentBackground#034972
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D4A853
  • tab.activeBorderTop#D4A853
  • tab.activeForeground#0F1D2E
  • tab.inactiveBackground#EEF3F9
  • tab.inactiveForeground#3D556D
  • terminal.ansiBlack#0F1D2E
  • terminal.ansiBlue#034972
  • terminal.ansiBrightBlue#0568A6
  • terminal.ansiBrightCyan#0D9488
  • terminal.ansiBrightGreen#1B8A4A
  • terminal.ansiBrightMagenta#9333EA
  • terminal.ansiBrightRed#E03E2D
  • terminal.ansiBrightWhite#0F1D2E
  • terminal.ansiBrightYellow#B8923A
  • terminal.ansiCyan#0D6E6E
  • terminal.ansiGreen#15703A
  • terminal.ansiMagenta#7C3AED
  • terminal.ansiRed#C42B1C
  • terminal.ansiWhite#3D556D
  • terminal.ansiYellow#9A6700
  • terminal.background#F8FBFF
  • terminal.foreground#0F1D2E
  • titleBar.activeBackground#034972
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#EEF3F9
  • titleBar.inactiveForeground#3D556D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C7086italic
string, punctuation.definition.string, constant.other.symbol#B42318
constant.numeric, constant.language#9A6700bold
keyword, keyword.control, keyword.operator.new#023556bold
storage.type, storage.modifier#034972
entity.name.function, support.function, meta.function-call#C2410Cbold
variable, variable.other, variable.parameter#0F2744
entity.name.type, entity.other.inherited-class, support.type, support.class#7C5C00
entity.name.tag, punctuation.definition.tag#15703Abold
entity.other.attribute-name#0D6E6E
entity.name.section, markup.heading#034972bold
markup.bold#0F1D2Ebold
markup.italic, markup.quote#3D556Ditalic
markup.underline.link, string.other.link#0568A6underline
constant.character.escape, string.regexp#9333EA
punctuation, meta.brace#3D556D
keyword.operator#023556
support.constant, constant.other.color#9A6700
invalid, invalid.illegal#C42B1Cunderline
token.info-token#034972
token.warn-token#9A6700
token.error-token#C42B1C
token.debug-token#0D6E6E