Skip to main content
CodingTheme

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#212329
  • activityBar.border#212329
  • activityBar.foreground#F4D35E
  • activityBar.inactiveForeground#a0aec0
  • activityBarBadge.background#0F8B8D
  • activityBarBadge.foreground#F4D35E
  • badge.background#0F8B8D
  • badge.foreground#eeffff
  • breadcrumb.activeSelectionForeground#eeffff
  • breadcrumb.background#4A5667
  • breadcrumb.focusForeground#eeffff
  • breadcrumb.foreground#a0aec0
  • breadcrumbPicker.background#2b2d34
  • button.background#0F8B8D
  • button.foreground#eeffff
  • button.hoverBackground#55D6BE
  • dropdown.background#262A33
  • dropdown.border#1B2228
  • dropdown.foreground#eeffff
  • editor.background#212329
  • editor.findMatchHighlightBackground#9f5ef481
  • editor.foreground#eeffff
  • editor.hoverHighlightBackground#76e6fc79
  • editor.inactiveSelectionBackground#76e6fc00
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#9A275A
  • editor.selectionHighlightBackground#9f5ef433
  • editor.wordHighlightBackground#55d6be33
  • editor.wordHighlightStrongBackground#9a275b48
  • editorBracketMatch.background#76e6fc33
  • editorBracketMatch.border#76e6fc00
  • editorCursor.foreground#9f5ef4
  • editorGroup.border#4A5667
  • editorGroup.dropBackground#08090a81
  • editorGroupHeader.noTabsBackground#08090a81
  • editorGroupHeader.tabsBackground#2b2d34
  • editorGroupHeader.tabsBorder#2b2d34
  • editorGutter.addedBackground#55D6BE
  • editorGutter.modifiedBackground#F4D35E
  • editorLineNumber.activeForeground#72a8d8
  • editorLineNumber.foreground#576773
  • editorPane.background#F4D35E
  • editorWhitespace.foreground#262A33
  • focusBorder#A9B4C2
  • foreground#0F8B8D
  • gitDecoration.modifiedResourceForeground#F4D35E
  • gitDecoration.untrackedResourceForeground#55D6BE
  • icon.foreground#eeffff
  • input.background#4A5667
  • input.border#1b222800
  • input.foreground#eeffff
  • input.placeholderForeground#a0aec0
  • inputOption.activeForeground#eeffff
  • list.activeSelectionBackground#212329
  • list.activeSelectionForeground#eeffff
  • list.dropBackground#0f8b8d80
  • list.hoverBackground#2b2d34
  • list.hoverForeground#eeffff
  • list.inactiveSelectionBackground#212329
  • list.inactiveSelectionForeground#eeffff
  • list.warningForeground#FF715B
  • minimap.background#2b2d34
  • minimap.selectionHighlight#9a275b48
  • scrollbarSlider.activeBackground#4A5667
  • scrollbarSlider.background#a9b4c213
  • scrollbarSlider.hoverBackground#4A5667
  • sideBar.background#2b2d34
  • sideBar.border#212329
  • sideBar.dropBackground#0f8b8d80
  • sideBar.foreground#a0aec0
  • sideBarSectionHeader.background#2b2d34
  • sideBarSectionHeader.border#2b2d34
  • sideBarSectionHeader.foreground#FBF2C0
  • sideBarTitle.foreground#eeffff
  • statusBar.background#0F8B8D
  • tab.activeBackground#0F8B8D
  • tab.activeForeground#eeffff
  • tab.activeModifiedBorder#F4D35E
  • tab.border#2b2d34
  • tab.hoverBackground#4A5667
  • tab.inactiveBackground#2b2d34
  • tab.inactiveModifiedBorder#CCF5AC
  • tab.unfocusedActiveModifiedBorder#CCF5AC
  • tab.unfocusedInactiveModifiedBorder#CCF5AC
  • textLink.activeForeground#CCF5AC
  • textLink.foreground#F4D35E
  • textPreformat.foreground#F4D35E
  • titleBar.activeBackground#212329
  • titleBar.activeForeground#eeffff
  • titleBar.inactiveBackground#212329
  • titleBar.inactiveForeground#eeffff
  • tree.indentGuidesStroke#a0aec0
  • widget.shadow#08090a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A5667italic
variable, string constant.other.placeholder#EEFFFF—
constant.other.color#EEFFFF—
invalid, invalid.illegal#FF715B—
keyword, storage.type, storage.modifier#55D6BE—
meta.tag#EEFFFF—
keyword.control, constant.other.color, punctuation, 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#55D6BE—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F4D35E—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#76E5FCitalic
meta.block variable.other#FBF2C0—
support.other.variable, string.other.link#FF715B—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#9F5EF4—
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#76E5FC—
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#F4D35E—
support.type#A9B4C2—
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#A9B4C2—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF715B—
variable.language#FF5370italic
entity.name.method.js#76E5FCitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#76E5FCitalic
entity.other.attribute-name#EEFFFFitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#F4D35Eitalic
entity.other.attribute-name.class#F4D35E—
source.sass keyword.control#76E5FC—
markup.inserted#CCF5AC—
markup.deleted#FF715B—
markup.changed#9F5EF4—
string.regexp#76E5FC—
constant.character.escape#76E5FC—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#76E5FCitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF715Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#9F5EF4—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F4D35E—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF715B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF715B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9A275A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#76E5FC—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF715B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9F5EF4—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CCF5AC—
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF—
text.html.markdown markup.inline.raw.markdown#9F5EF4—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#0F8B8D—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#CCF5AC—
markup.italic#FF715Bitalic
markup.bold, markup.bold string#FF715Bbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF715Bbold
markup.underline#FF715Bunderline
markup.quote punctuation.definition.blockquote.markdown#0F8B8D—
markup.quote—italic
string.other.link.title.markdown#76E5FC—
string.other.link.description.title.markdown#9F5EF4—
constant.other.reference.link.markdown#F4D35E—
markup.raw.block#9F5EF4—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF—
variable.language.fenced.markdown#0F8B8D—
meta.separator#0F8B8Dbold
markup.table#EEFFFF—

Shiki preview

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

Loading...