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.activeBackground#1b1d2c
  • activityBar.activeBorder#1372c4
  • activityBar.background#1e2030
  • activityBar.border#1b1d2c
  • activityBar.foreground#696fc1c4
  • activityBarBadge.background#3e68d7
  • activityBarBadge.foreground#ffffff
  • badge.background#3e68d7
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#82aaff
  • breadcrumb.background#222436
  • breadcrumb.focusForeground#c8d3f5
  • breadcrumb.foreground#828bb8
  • breadcrumbPicker.background#1e2030
  • button.background#3e68d7
  • button.hoverBackground#65bcffcc
  • contrastBorder#191a2a
  • debugToolBar.background#1e2030
  • diffEditor.insertedTextBackground#c3e88d15
  • diffEditor.removedTextBackground#ff537020
  • dropdown.background#2f334d
  • dropdown.border#00000066
  • dropdown.foreground#c8d3f5
  • editor.background#1d2031
  • editor.findMatchBackground#444a73
  • editor.findMatchBorder#86e1fc
  • editor.findMatchHighlightBackground#444a73
  • editor.foreground#c8d3f5
  • editor.lineHighlightBackground#292a4ea0
  • editor.lineHighlightBorder#1371c415
  • editor.selectionBackground#31336163
  • editor.selectionHighlightBackground#444a73
  • editor.wordHighlightBackground#3a4670
  • editorBracketMatch.background#222436
  • editorBracketMatch.border#82aaffbb
  • editorCodeLens.foreground#828bb8
  • editorCursor.foreground#82aaff
  • editorError.foreground#ff5370
  • editorGhostText.foreground#696fc1c4
  • editorGroup.border#191a2a
  • editorGroupHeader.tabsBackground#1e2030
  • editorGutter.addedBackground#c3e88d66
  • editorGutter.deletedBackground#ff5370aa
  • editorGutter.modifiedBackground#82aaff66
  • editorHoverWidget.background#1b1d2ce4
  • editorHoverWidget.border#000000aa
  • editorIndentGuide.activeBackground#828bb8aa
  • editorIndentGuide.background#444a73bb
  • editorLineNumber.activeForeground#696fc1c4
  • editorLineNumber.foreground#292a4e
  • editorLink.activeForeground#c8d3f5
  • editorMarkerNavigation.background#c8d3f505
  • editorOverviewRuler.addedForeground#c3e88d66
  • editorOverviewRuler.border#222436
  • editorOverviewRuler.bracketMatchForeground#3e68d7bb
  • editorOverviewRuler.deletedForeground#ff98a466
  • editorOverviewRuler.errorForeground#ff757fcc
  • editorOverviewRuler.findMatchForeground#86e1fcbb
  • editorOverviewRuler.infoForeground#65bcff66
  • editorOverviewRuler.modifiedForeground#82aaff66
  • editorOverviewRuler.warningForeground#ffc777cc
  • editorRuler.foreground#444a73bb
  • editorSuggestWidget.background#1b1d2ce4
  • editorSuggestWidget.border#1d2031
  • editorSuggestWidget.foreground#a9b8e8
  • editorSuggestWidget.highlightForeground#86e1fc
  • editorSuggestWidget.selectedBackground#2f334d
  • editorWarning.foreground#ffc777cc
  • editorWhitespace.foreground#c8d3f540
  • editorWidget.background#1e2030
  • editorWidget.resizeBorder#82aaff
  • extensionButton.prominentBackground#3e68d7
  • extensionButton.prominentHoverBackground#65bcffcc
  • focusBorder#82aaffaa
  • foreground#c8d3f5
  • gitDecoration.conflictingResourceForeground#ffc777cc
  • gitDecoration.deletedResourceForeground#ff5370dd
  • gitDecoration.ignoredResourceForeground#777fabaa
  • gitDecoration.modifiedResourceForeground#82aaffee
  • gitDecoration.untrackedResourceForeground#77e0c6dd
  • gitlens.trailingLineForegroundColor#828bb8aa
  • inlineparameters.annotationBackground#31336163
  • inlineparameters.annotationForeground#82cafe93
  • input.background#191a2a
  • input.border#00000066
  • input.foreground#c8d3f5
  • input.placeholderForeground#c8d3f5aa
  • inputValidation.errorBackground#c53b53
  • inputValidation.errorBorder#ff537050
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#446bbb
  • inputValidation.infoBorder#82aaff50
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ad7c43
  • inputValidation.warningBorder#ffc77750
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#383e5c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#131421
  • list.focusForeground#c8d3f5
  • list.highlightForeground#86e1fc
  • list.hoverBackground#1e2030
  • list.hoverForeground#c8d3f5
  • list.inactiveSelectionBackground#292e46
  • list.inactiveSelectionForeground#c8d3f5
  • list.warningForeground#ffc777cc
  • menu.background#1e2030
  • menu.foreground#c8d3f5
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#82aaff
  • menu.separatorBackground#c8d3f5
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#82aaff
  • minimap.background#1b1d2c
  • minimap.findMatchHighlight#86e1fccc
  • minimap.selectionHighlight#86e1fc33
  • minimapGutter.addedBackground#c3e88d66
  • minimapGutter.modifiedBackground#82aaff66
  • notificationLink.foreground#82aaff
  • notifications.background#191a2a
  • notifications.foreground#c8d3f5
  • panel.background#1b1d2c
  • panel.border#00000033
  • panel.dropBackground#c8d3f5
  • panelTitle.activeBorder#82aaff
  • panelTitle.activeForeground#c8d3f5
  • panelTitle.inactiveForeground#828bb8
  • peekView.border#00000030
  • peekViewEditor.background#c8d3f505
  • peekViewEditor.matchHighlightBackground#828bb850
  • peekViewEditorGutter.background#c8d3f505
  • peekViewResult.background#c8d3f505
  • peekViewResult.matchHighlightBackground#828bb850
  • peekViewResult.selectionBackground#828bb870
  • peekViewTitle.background#c8d3f505
  • peekViewTitleDescription.foreground#c8d3f560
  • pickerGroup.foreground#82aaff
  • progressBar.background#82aaff
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#82aaff
  • scrollbarSlider.background#292a4e5e
  • scrollbarSlider.hoverBackground#a9b8e830
  • selection.background#2f334d
  • settings.checkboxBackground#131421
  • settings.checkboxBorder#00000066
  • settings.checkboxForeground#c8d3f5
  • settings.dropdownBackground#2f334d
  • settings.dropdownBorder#191a2a
  • settings.dropdownForeground#c8d3f5
  • settings.headerForeground#82aaff
  • settings.modifiedItemIndicator#82aaff
  • settings.numberInputBackground#191a2a
  • settings.numberInputBorder#00000066
  • settings.numberInputForeground#c8d3f5
  • settings.textInputBackground#191a2a
  • settings.textInputBorder#00000066
  • settings.textInputForeground#c8d3f5
  • sideBar.background#1b1d2c
  • sideBar.border#191a2a
  • sideBar.foreground#828bb8
  • sideBarSectionHeader.background#1e2030
  • sideBarSectionHeader.border#1b1d2c
  • sideBarTitle.foreground#c8d3f5
  • statusBar.background#1e2030
  • statusBar.border#191a2a
  • statusBar.debuggingBackground#82aaff
  • statusBar.debuggingForeground#c8d3f5
  • statusBar.foreground#828bb8
  • statusBar.noFolderBackground#222436
  • statusBarItem.hoverBackground#828bb820
  • tab.activeBackground#222436
  • tab.activeBorder#1372c4
  • tab.activeForeground#c8d3f5
  • tab.activeModifiedBorder#828bb8
  • tab.border#191a2a
  • tab.inactiveBackground#1b1d2c
  • tab.inactiveForeground#828bb8
  • tab.unfocusedActiveBorder#828bb8
  • tab.unfocusedActiveForeground#c8d3f5
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#828bb8
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#86e1fc
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#fca7ea
  • terminal.ansiBrightRed#ff757f
  • terminal.ansiBrightWhite#c8d3f5
  • terminal.ansiBrightYellow#ffc777
  • terminal.ansiCyan#86e1fc
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#fca7ea
  • terminal.ansiRed#ff757f
  • terminal.ansiWhite#c8d3f5
  • terminal.ansiYellow#ffc777
  • terminal.background#1b1d2c
  • terminal.border#2f334d
  • terminal.foreground#bcc4d6
  • terminal.selectionBackground#c8d3f544
  • terminalCursor.foreground#82aaff
  • textLink.activeForeground#b2dfff
  • textLink.foreground#65bcff
  • titleBar.activeBackground#1e2030
  • titleBar.activeForeground#c8d3f5
  • titleBar.border#191a2a
  • titleBar.inactiveBackground#1e2030
  • titleBar.inactiveForeground#828bb8
  • tree.indentGuidesStroke#828bb866
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#7a88cfitalic
variable, support.variable, string constant.other.placeholder, text.html#c8d3f5
support.variable.dom, support.constant.math, support.type.object.module, support.variable.object.process, support.constant.json#ffc777
constant.language.undefined, constant.language.null#7f85a3
constant.other.php#ffc777
constant.other.color#ffffff
invalid, invalid.illegal#ff5370
invalid.deprecated#c099ff
keyword, storage.type, storage.modifier, keyword.other.important#c099ff
keyword.control, storageitalic
punctuation.definition.template-expression, punctuation.section.embedded#86e1fc
keyword.operator.spread, keyword.operator.rest#ff757fbold
keyword.operator, keyword.control, punctuation, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.block.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.property-list, meta.brace.square, keyword.other.template, keyword.other.substitution#86e1fc
keyword.controlitalic
entity.name.tag, meta.tag, markup.deleted.git_gutter#ff757f
entity.name.function, variable.function, keyword.other.special-method#82aaff
support.function, meta.function-call entity.name.function#65bcff
source.cpp meta.block variable.other#ff757f
support.other.variable, string.other.link#ff757f
variable.other.constant, constant.language, keyword.other.type.php, storage.type.php, support.constant, constant.character, constant.escape, keyword.other.unit#ff98a4
constant.numeric, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan#ff966c
variable.parameter.function.language.special, variable.parameter, meta.function.parameter variable#fca7ea
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, meta.attribute-selector#c3e88d
variable.other.object#ffc777
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.field.declaration.ts variable.object.property, variable.object.property#4fd6be
meta.object.member, variable.other.object.property#a9b8e8
variable.other.property, support.variable.property, support.variable.property.dom#a9b8e8
source.haskell constant.other.haskell#ff98a4
source.haskell meta.import.haskell entity.name.namespace#c8d3f5
source.haskell storage.type, source.c storage.type, source.java storage.type#ffc777
storage.type.function#c099ff
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#ffc777
support.type#ff966c
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff757f
variable.language#ff757fitalic
entity.name.method.js#82aaffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82aaff
entity.other.attribute-name#c099ffitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffc777
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name#c099ffitalic
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, support.type.property-name.css, support.type.vendored.property-name#82aaff
support.constant.property-value#86e1fc
entity.other.attribute-name.class#ffc777
source.sass keyword.control#82aaff
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#4fd6be
support.constant.property-value#fca7ea
keyword.other.unit#fc7b7b
markup.inserted#c3e88d
markup.deleted#ff757f
markup.changed#c099ff
string.regexp#b4f9f8
punctuation.definition.group#ff757f
constant.other.character-class.regexp, keyword.control.anchor.regexp#c099ff
constant.other.character-class.set.regexp#ffc777
keyword.operator.quantifier.regexp#fca7ea
constant.character.escape#86e1fc
*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#ff757fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#82aaff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#65bcff
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#ff757f
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#fca7ea
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#ffc777
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#4fd6be
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#82aaff
punctuation.definition.list_item.markdown#828bb8
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function#b4c2f0
meta.jsx.children, meta.embedded.block#b4c2f0
text.html.markdown markup.inline.raw.markdown#c099ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#86e1fc
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#86e1fc
markup.italic#ff757fitalic
markup.bold, markup.bold string#ff757fbold
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#ff757fbold
markup.underline#ff966cunderline
markup.quoteitalic
markup.quote punctuation.definition.blockquote.markdown#86e1fc
string.other.link.title.markdown#82aaff
string.other.link.description.title.markdown#c099ff
constant.other.reference.link.markdown#ffc777
markup.raw.block#c099ff
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#86e1fc
variable.language.fenced.markdown#86e1fc
meta.separator#86e1fcbold
markup.table#828bb8
token.info-token#65bcff
token.warn-token#ffc777
token.error-token#ff757f
token.debug-token#c099ff
source.go entity.name.package#c8d3f5
source.go entity.name.import#c3e88d
source.go constant.other.placeholder#ff98a4
source.go constant.language#c099ff
source.go storage.type#4fd6beitalic
source.go variable.other.assignment, source.go variable.other.declaration#ff98a4

Shiki preview

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

Loading...

xotocode-theme - Coding Theme