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#76E5FC
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#76E5FC
entity.other.attribute-name#EEFFFF
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.quoteitalic
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...

Motion Haleness by erole-attack - VS Code Theme