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.activeBackground#0e639c
  • activityBar.activeBorder#fef8eccc
  • activityBar.background#4f6478
  • activityBar.foreground#fef8ec
  • activityBar.inactiveForeground#fef8ecb0
  • activityBarBadge.background#0099ad
  • activityBarBadge.foreground#fef8ec
  • badge.background#0099ad
  • badge.foreground#fef8ec
  • dropdown.background#36475c
  • dropdown.foreground#fef8ec
  • editor.background#1a2b3c
  • editor.findMatchBackground#fef8ec
  • editor.findMatchHighlightBackground#ce445870
  • editor.findMatchHighlightBorder#dc835b
  • editor.foreground#e09887
  • editor.hoverHighlightBackground#4f647888
  • editor.lineHighlightBackground#193153
  • editor.rangeHighlightBackground#0099adaa
  • editor.selectionBackground#fef8ec
  • editor.selectionHighlightBackground#fef8ec00
  • editor.selectionHighlightBorder#0e9bd180
  • editor.wordHighlightBackground#4f647800
  • editor.wordHighlightBorder#00848890
  • editor.wordHighlightStrongBackground#0099ad35
  • editor.wordHighlightStrongBorder#d8cb3280
  • editorBracketPairGuide.activeBackground1#d8cb32
  • editorBracketPairGuide.activeBackground2#ab43aa
  • editorBracketPairGuide.activeBackground3#0e9bd1bf
  • editorBracketPairGuide.activeBackground4#d8cb32
  • editorBracketPairGuide.activeBackground5#ab43aa
  • editorBracketPairGuide.activeBackground6#0e9bd1bf
  • editorBracketPairGuide.background1#d8cb3270
  • editorBracketPairGuide.background2#ab43aa70
  • editorBracketPairGuide.background3#0e9bd170
  • editorBracketPairGuide.background4#d8cb3270
  • editorBracketPairGuide.background5#ab43aa70
  • editorBracketPairGuide.background6#0e9bd170
  • editorCursor.foreground#fef8ec
  • editorError.foreground#ce4458
  • editorGroupHeader.tabsBackground#36475c
  • editorHint.foreground#e09887
  • editorInfo.foreground#fef8ec
  • editorLineNumber.activeForeground#fef8ec
  • editorSuggestWidget.border#fef8ec20
  • editorSuggestWidget.focusHighlightForeground#0e639c
  • editorSuggestWidget.foreground#fef8ecbb
  • editorSuggestWidget.highlightForeground#0e9bd1
  • editorSuggestWidget.selectedBackground#fef8ec
  • editorSuggestWidget.selectedForeground#1a2b3c
  • editorSuggestWidget.selectedIconForeground#1a2b3c
  • editorWarning.foreground#d8cb32
  • editorWhitespace.foreground#fef8ec20
  • editorWidget.background#36475b
  • extensionButton.prominentBackground#0099ad
  • extensionButton.prominentForeground#fef8ec
  • focusBorder#928ba6
  • foreground#fef8ec
  • icon.foreground#fef8ec
  • input.background#1a2b3c
  • input.border#fef8ec60
  • input.foreground#fef8ec
  • inputValidation.errorBackground#ce4458
  • list.activeSelectionBackground#0e639c
  • list.activeSelectionForeground#fef8ec
  • list.activeSelectionIconForeground#fef8ec
  • list.focusHighlightForeground#e09887
  • list.highlightForeground#0e9bd1
  • list.hoverBackground#fef8ec20
  • list.inactiveSelectionBackground#1a2c3b85
  • menu.background#36475c
  • menu.foreground#fef8ec
  • notifications.background#36475c
  • notifications.foreground#fef8ec
  • selection.background#7799ba
  • settings.headerForeground#fef8ec
  • sideBar.background#36475c
  • sideBar.foreground#fef8ec
  • sideBarTitle.foreground#fef8ec
  • statusBar.background#36475c
  • statusBar.debuggingBackground#4f6478
  • statusBar.foreground#fef8ec
  • statusBar.noFolderBackground#4f6478
  • tab.activeBackground#1a2b3c
  • tab.activeForeground#fef8ec
  • tab.activeModifiedBorder#0099ad
  • tab.border#004c7150
  • tab.hoverBackground#637d96
  • tab.hoverForeground#f6f6f0
  • tab.inactiveBackground#1a2b3c60
  • tab.inactiveForeground#637d96
  • terminal.ansiBlack#282C34
  • terminal.ansiBlue#193153
  • terminal.ansiBrightBlack#65737e
  • terminal.ansiBrightBlue#0e9bd1
  • terminal.ansiBrightCyan#0099ad
  • terminal.ansiBrightGreen#0de1b1
  • terminal.ansiBrightMagenta#ab43aa
  • terminal.ansiBrightRed#d47186
  • terminal.ansiBrightWhite#fef8ec
  • terminal.ansiBrightYellow#d8cb32
  • terminal.ansiCyan#008486
  • terminal.ansiGreen#0099ad
  • terminal.ansiMagenta#928ba6
  • terminal.ansiRed#ce4559
  • terminal.ansiWhite#fef8ec
  • terminal.ansiYellow#d8cb32
  • terminal.background#1a2b3c
  • terminal.border#36475c
  • terminal.foreground#e09887
  • terminal.selectionBackground#7799ba70
  • terminalCursor.background#1a2b3c
  • terminalCursor.foreground#fef8ec
  • titleBar.activeBackground#1a2b3c
  • titleBar.activeForeground#fef8ec
  • titleBar.inactiveBackground#4f6478
  • titleBar.inactiveForeground#fef8ecb0
  • widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#acadacitalic bold
variable, string constant.other.placeholder#7799ba
constant.other.color#0e9bd1
invalid, invalid.illegal#ce4458
keyword, storage.type, storage.modifier#928ba6
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#39bebf
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178cf
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7799ba
meta.block variable.other#e09887
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#0e9bd1
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#39bebf
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#d8cb32
support.type#7799ba
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#e09887
entity.other.attribute-name.class.css#d8cb32italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ce4458
variable.language#ce4458italic
entity.name.method.js#7799baitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7799ba
entity.other.attribute-name#dc835b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d8cb32italic
entity.other.attribute-name.class#d8cb32
source.sass keyword.control#7799ba
markup.inserted#39bebf
markup.deleted#ce4458
markup.changed#928ba6
string.regexp#39bebf
constant.character.escape#39bebf
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7799baitalic
source.js constant.other.object.key.js string.unquoted.label.js#ce4458italic
source.json meta.structure.dictionary.json support.type.property-name.json#928ba6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8cb32
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#dc835b
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#ce4458
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#C17E70
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#7799ba
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#f07178
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#928ba6
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#39bebf
text.html.markdown, punctuation.definition.list_item.markdown#e09887
text.html.markdown markup.inline.raw.markdown#928ba6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#39bebf
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#dc835bunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#7799ba
string.other.link.description.title.markdown#928ba6
constant.other.reference.link.markdown#d8cb32
markup.raw.block#928ba6
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#1880a1
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#1880a1
punctuation.section.tag.twig#0e9bd1italic bold
keyword.control.twig#d8cb32
keyword.operator.logical.twig#0099aditalic

Shiki preview

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

Loading...