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#222B2E
  • activityBar.foreground#F0F0F0
  • activityBarBadge.background#E27396
  • activityBarBadge.foreground#222B2E
  • button.background#E27396
  • button.foreground#222B2E
  • editor.background#222B2E
  • editor.foreground#F0F0F0
  • editor.hoverHighlightBackground#6D9F7130
  • editor.inactiveSelectionBackground#FFDBE530
  • editor.selectionBackground#FFDBE550
  • editor.selectionHighlightBackground#EA9AB230
  • editor.wordHighlightBackground#E2739630
  • editorCursor.foreground#F0F0F0
  • editorGroupHeader.tabsBackground#2A3438
  • editorLineNumber.foreground#9AAAB2
  • input.background#222B2E
  • input.border#337357
  • input.foreground#F0F0F0
  • list.activeSelectionBackground#FFDBE530
  • list.focusBackground#FFDBE540
  • list.hoverBackground#FFDBE520
  • notificationCenterHeader.background#2A3438
  • notificationLink.foreground#6D9F71
  • notifications.background#2A3438
  • panel.background#222B2E
  • panelTitle.activeForeground#F0F0F0
  • panelTitle.inactiveForeground#9AAAB2
  • sideBar.background#2A3438
  • sideBar.foreground#F0F0F0
  • sideBarSectionHeader.background#2A3438
  • sideBarTitle.foreground#F0F0F0
  • statusBar.background#337357
  • statusBar.debuggingBackground#C24D2C
  • statusBar.debuggingForeground#F0F0F0
  • statusBar.foreground#F0F0F0
  • statusBar.noFolderBackground#337357
  • tab.activeBackground#222B2E
  • tab.activeForeground#F0F0F0
  • tab.border#1E2528
  • tab.inactiveBackground#2A3438
  • tab.inactiveForeground#9AAAB2
  • terminal.ansiBlack#222B2E
  • terminal.ansiBlue#4A7D9A
  • terminal.ansiBrightBlack#9AAAB2
  • terminal.ansiBrightBlue#4A7D9A
  • terminal.ansiBrightCyan#6D9F71
  • terminal.ansiBrightGreen#337357
  • terminal.ansiBrightMagenta#EA9AB2
  • terminal.ansiBrightRed#A43820
  • terminal.ansiBrightWhite#F0F0F0
  • terminal.ansiBrightYellow#E27396
  • terminal.ansiCyan#337357
  • terminal.ansiGreen#6D9F71
  • terminal.ansiMagenta#E27396
  • terminal.ansiRed#C24D2C
  • terminal.ansiWhite#F0F0F0
  • terminal.ansiYellow#EA9AB2
  • terminal.background#222B2E
  • terminal.foreground#F0F0F0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#337357italic
keyword, storage, modifier#E27396
variable, entity.name.variable, support.variable, meta.definition.variable#6D9F71
string, punctuation.definition.string, constant.other.symbol, constant.other.enum, entity.name.type.class#EA9AB2
entity.name.function, support.function, meta.function-call, meta.method-call#6D9F71
entity.name.tag, meta.tag.sgml, meta.tag.construct, meta.tag.metadata, meta.tag.xml, meta.selector.css entity.name.tag#E27396
punctuation, delimiter, bracket#F0F0F0
operator#337357
constant.numeric, constant.language, constant.boolean#4A7D9A
entity.other.attribute-name#EA9AB2
support.type, storage.type#EA9AB2
invalid.deprecated#C24D2C
invalid.illegal#A43820

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...