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#f0f4f8
  • activityBar.foreground#1a2e42
  • activityBarBadge.background#b8900b
  • activityBarBadge.foreground#f0f4f8
  • badge.background#2968a8
  • badge.foreground#f0f4f8
  • button.background#b8900b
  • button.foreground#f0f4f8
  • button.hoverBackground#2968a8
  • dropdown.background#ffffff
  • dropdown.border#8499ad5c
  • editor.background#f0f4f8
  • editor.findMatchBackground#b8900b61
  • editor.findMatchHighlightBackground#2968a838
  • editor.foreground#1a2e42
  • editor.inactiveSelectionBackground#2968a824
  • editor.lineHighlightBackground#1a2e4214
  • editor.selectionBackground#2968a83d
  • editorCursor.foreground#b8900b
  • editorIndentGuide.activeBackground1#2968a86b
  • editorIndentGuide.background1#8499ad33
  • editorLineNumber.activeForeground#1a2e42
  • editorLineNumber.foreground#8499ad
  • editorWidget.background#ffffff
  • editorWidget.border#8499ad5c
  • focusBorder#b8900b
  • input.background#ffffff
  • input.border#8499ad5c
  • input.foreground#1a2e42
  • list.activeSelectionBackground#2968a83d
  • list.activeSelectionForeground#1a2e42
  • list.hoverBackground#2968a824
  • panel.background#f0f4f8
  • panel.border#8499ad5c
  • sideBar.background#dce4ed
  • sideBar.border#8499ad5c
  • sideBar.foreground#1a2e42
  • sideBarTitle.foreground#1a2e42
  • statusBar.background#b8900b
  • statusBar.foreground#f0f4f8
  • statusBar.noFolderBackground#2968a8
  • tab.activeBackground#f0f4f8
  • tab.activeForeground#1a2e42
  • tab.border#8499ad5c
  • tab.inactiveBackground#dce4ed
  • tab.inactiveForeground#8499ad
  • terminal.ansiBlack#f0f4f8
  • terminal.ansiBlue#2968a8
  • terminal.ansiBrightBlack#8499ad
  • terminal.ansiBrightBlue#2a4460
  • terminal.ansiBrightCyan#1a7a7a
  • terminal.ansiBrightGreen#4a7a3a
  • terminal.ansiBrightMagenta#b8900b
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#1a2e42
  • terminal.ansiBrightYellow#b84c24
  • terminal.ansiCyan#1a7a7a
  • terminal.ansiGreen#4a7a3a
  • terminal.ansiMagenta#b8900b
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#1a2e42
  • terminal.ansiYellow#b84c24
  • terminal.background#f0f4f8
  • terminal.foreground#1a2e42
  • titleBar.activeBackground#f0f4f8
  • titleBar.activeForeground#1a2e42
  • titleBar.border#8499ad5c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#1a2e42
comment, punctuation.definition.comment#8499aditalic
keyword, storage, storage.type#b8900bitalic bold
constant.numeric, constant.language, support.constant#b84c24
string, constant.other.symbol#4a7a3a
variable, variable.other, support.variable#b8900b
entity.name.function, support.function#2a4460
entity.name.type, support.class, entity.name.class#2968a8
entity.name.tag, punctuation.definition.tag#b45025
entity.other.attribute-name#2968a8
variable.other.property, support.type.property-name#1a7a7a
keyword.operator, punctuation, meta.brace#7a6840
meta, meta.object-literal.key#5a7898