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#051022
  • activityBar.border#11264b
  • activityBar.foreground#a4afed
  • activityBarBadge.background#fa9474
  • activityBarBadge.foreground#060d35
  • badge.background#fa9474
  • badge.foreground#060d35
  • button.background#14223a
  • button.foreground#bff0ff
  • debugToolBar.background#051022
  • diffEditor.insertedTextBackground#9fe0cd33
  • diffEditor.removedTextBackground#ee475033
  • dropdown.background#14223a
  • dropdown.foreground#bff0ff
  • editor.background#0e192c
  • editor.findMatchHighlightBackground#02072285
  • editor.findMatchHighlightBorder#ffd588
  • editor.foreground#a8cfe9
  • editor.lineHighlightBorder#16253a
  • editorBracketMatch.border#fa9474
  • editorCursor.background#030f24
  • editorCursor.foreground#fa9474
  • editorError.border#ee4750
  • editorError.foreground#faaa74
  • editorGroup.border#11264b
  • editorGroup.dropBackground#2b406477
  • editorGroupHeader.tabsBackground#142033
  • editorGutter.addedBackground#9fe0cd
  • editorGutter.modifiedBackground#faaa74
  • editorIndentGuide.activeBackground#3c4e6e
  • editorIndentGuide.background#212b3d
  • editorLineNumber.activeForeground#d6d9ec
  • editorLineNumber.foreground#8086a8
  • editorOverviewRuler.selectionHighlightForeground#ffd58888
  • editorRuler.foreground#34425a
  • editorSuggestWidget.background#051022
  • editorSuggestWidget.foreground#839ec9
  • editorWarning.foreground#5fe9a4
  • editorWhitespace.foreground#212b3d
  • editorWidget.background#051022
  • editorWidget.border#11264b
  • gitDecoration.modifiedResourceForeground#faaa74
  • gitDecoration.untrackedResourceForeground#78e7c6
  • gitlens.trailingLineForegroundColor#556886
  • input.background#14223a
  • input.foreground#bff0ff
  • input.placeholderForeground#758299
  • list.activeSelectionBackground#0e192c
  • list.hoverBackground#121f36
  • list.inactiveSelectionBackground#0e192c
  • list.warningForeground#51ec72
  • menu.background#051022
  • peekViewEditor.background#061124
  • peekViewResult.background#061124
  • peekViewTitle.background#061124
  • scrollbar.shadow#2b4064
  • scrollbarSlider.activeBackground#4397cfaa
  • scrollbarSlider.background#2b406488
  • scrollbarSlider.hoverBackground#4397cf88
  • sideBar.background#061124
  • sideBar.foreground#758299
  • sideBarSectionHeader.background#030e20
  • sideBarTitle.foreground#cbe7ec
  • statusBar.background#051022
  • statusBar.debuggingBackground#2554ac
  • statusBar.debuggingForeground#071935
  • statusBar.foreground#556886
  • statusBar.noFolderBackground#051022
  • statusBar.noFolderForeground#556886
  • statusBarItem.prominentBackground#0a2044
  • statusBarItem.prominentHoverBackground#122d58
  • tab.activeBorder#a4afed
  • tab.inactiveBackground#142033
  • tab.inactiveForeground#708bb6
  • titleBar.activeBackground#08162e
  • titleBar.activeForeground#607494
  • titleBar.inactiveBackground#203353
  • titleBar.inactiveForeground#607494
  • widget.shadow#020d1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c3e7e7
comment, punctuation.definition.comment#556886italic
meta.object-literal.key, support.variable.property#4397cf
variable, string constant.other.placeholder#9fe0cd
variable.other.property#87f2f2
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
keyword, storage.type, storage.modifier#449dbb
keyword.control#a4bbed
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default#44aabb
constant.other.color, punctuation, 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#a4afed
punctuation.definition.tag#e46369
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#faaa74
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#32d2d0
meta.block variable.other, variable.other.constant#66ddff
meta.brace#c494d1
keyword.operator.assignment#51ec9f
support.other.variable, string.other.link#ebad9b
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#0ef0f0
variable.parameter#51ec9f
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#bff0ffnormal
meta.tag#ecd4cc
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#fa9474
support.type#B2CCD6
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#4397cf
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#ffcd70
entity.name.method.js#82AAFF
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
meta.tag.attributes#fde182
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6B
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control, entity.other.attribute-name.id.css#ee4750
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
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#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
entity.name.tag.yaml#4397cf
source.json meta.structure.dictionary.json support.type.property-name.json#4397cf
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#44aabb
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#9fe0cd
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#b69cc4
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#e46369
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#faaa74
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#ffcd70
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#51ec9f
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#ecd4cc
text.html.markdown, punctuation.definition.list_item.markdown#bff0ff
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#4397cf
entity.name.section.markdown#96f1f1
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#96f1f1underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
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#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

Everset by Jimmy Cleveland - VS Code Theme