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#2b303b
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#99AAB5
  • activityBarBadge.background#FFFFFF
  • activityBarBadge.foreground#2b303b
  • background#FFFFFF
  • badge.background#FFFFFF
  • badge.foreground#2b303b
  • button.background#2b303b
  • button.foreground#FFFFFF
  • button.hoverBackground#99AAB5
  • descriptionForeground#FFFFFF
  • editor.background#2b303b
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#3F4347
  • editor.lineHighlightBackground#23272A
  • editor.lineHighlightBorder#23272A
  • editor.selectionBackground#3F4347
  • editor.selectionForeground#99AAB5
  • editor.selectionHighlightBackground#99AAB5
  • editor.wordHighlightBackground#3F4347
  • editor.wordHighlightStrongBackground#99AAB5
  • editorBracketMatch.background#23272A
  • editorBracketMatch.border#FFFFFF
  • editorCursor.background#99AAB5
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#2b303b
  • editorHoverWidget.background#2b303b
  • editorHoverWidget.border#2b303b00
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#99AAB5
  • editorSuggestWidget.background#424d66
  • editorSuggestWidget.highlightForeground#ff6a00
  • editorSuggestWidget.selectedBackground#29b6f6
  • editorWidget.background#2b303b
  • focusBorder#23272A
  • foreground#FFFFFF
  • hoverBackground#3F4347
  • hoverForeground#3F4347
  • input.background#3F4347
  • input.border#3F434700
  • input.foreground#FFFFFF
  • input.inputValidation#FF6666
  • input.placeholderForeground#99AAB5
  • list.activeSelectionBackground#23272A
  • list.dropBackground#3F4347
  • list.hoverBackground#3F4347
  • list.hoverForeground#FFFFFF
  • menu.background#2b303b
  • notificationCenterHeader.background#3F4347
  • notificationCenterHeader.foreground#FFFFFF
  • notificationLink.foreground#99AAB5
  • notifications.background#3F4347
  • notifications.foreground#FFFFFF
  • scrollbar.shadow#3F4347
  • scrollbarSlider.background#3F4347
  • scrollbarSlider.hoverBackground#3F434700
  • selection.background#3F4347
  • settings.checkboxBackground#3F4347
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#3F4347
  • settings.dropdownBorder#3F434700
  • settings.dropdownForeground#FFFFFF
  • settings.numberInputBackground#3F4347
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#3F4347
  • settings.textInputForeground#FFFFFF
  • sideBar.background#2b303b
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#2b303b
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#2b303b
  • statusBar.foreground#FFFFFF
  • statusBarItem.hoverBackground#99AAB5
  • statusBarItem.prominentBackground#99AAB5
  • tab.activeBackground#2b303b
  • tab.activeBorder#99AAB5
  • tab.activeForeground#FFFFFF
  • tab.border#2b303b
  • tab.inactiveBackground#2b303b
  • tab.inactiveForeground#99AAB5
  • terminal.border#2b303b
  • terminal.foreground#FFFFFF
  • textBlockQuote.background#FFFFFF
  • textPreformat.foreground#FFFFFF
  • titleBar.activeBackground#2b303b
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#2b303b
  • titleBar.inactiveForeground#99AAB5
  • widget.shadow#2b303b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FFFFFF
comment, punctuation.definition.comment#99AAB5italic
variable, string constant.other.placeholder#FFFFFF
constant.other.color#FFFFFF
invalid, invalid.illegal#FF6666
keyword, storage.type, storage.modifier#A67CD8
keyword#CC66CC
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#FFFFFF
keyword.control#7D9CE2
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f1b37c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#89D8E5
meta.block variable.other#FFFFFF
support.other.variable, string.other.link#f1b37c
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f49d64
support.constant, variable.parameter, keyword.other.unit, keyword.other#f1b37c
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#B3DD8A
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#F2D17C
support.type#F2D17C
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f1b37c
variable.language#f1b37c
entity.name.method.js#89D8E5
meta.class-method.js entity.name.function.js, variable.function.constructor#89D8E5
entity.other.attribute-name#FFFFFF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#F2D17C
entity.other.attribute-name.class#F2D17C
source.sass keyword.control#89D8E5
markup.inserted#B3DD8A
markup.deleted#f1b37c
markup.changed#FFFFFF
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#89D8E5
source.js constant.other.object.key.js string.unquoted.label.js#f1b37c

Shiki preview

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

Loading...