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.background#0d182e
  • activityBar.border#0c193360
  • activityBar.foreground#b4c2f0
  • activityBarBadge.background#5e80de
  • activityBarBadge.foreground#ffffff
  • badge.background#5e80de
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#75a1ff
  • breadcrumb.background#0c1933
  • breadcrumb.focusForeground#e8edfc
  • breadcrumb.foreground#828bb8
  • breadcrumbPicker.background#0d182e
  • button.background#5e80de
  • button.hoverBackground#42adffcc
  • contrastBorder#111229
  • debugToolBar.background#0d182e
  • diffEditor.insertedTextBackground#50fa7b15
  • diffEditor.removedTextBackground#ef3e6720
  • dropdown.background#111e39
  • dropdown.border#00000066
  • dropdown.foreground#e8edfc
  • editor.background#0c1933
  • editor.findMatchBackground#444a73
  • editor.findMatchBorder#58d6fc
  • editor.findMatchHighlightBackground#444a73
  • editor.foreground#e8edfc
  • editor.hoverHighlightBackground#0fc1b7
  • editor.lineHighlightBackground#111e39
  • editor.selectionBackground#828bb850
  • editor.selectionHighlightBackground#444a73
  • editorBracketMatch.background#0c1933
  • editorBracketMatch.border#75a1ffbb
  • editorCodeLens.foreground#828bb8
  • editorCursor.foreground#0fc1b7
  • editorError.foreground#ef3e67
  • editorGroup.border#111229
  • editorGroupHeader.tabsBackground#0d182e
  • editorGutter.addedBackground#50fa7b66
  • editorGutter.deletedBackground#ef3e67aa
  • editorGutter.modifiedBackground#75a1ff66
  • editorHoverWidget.background#1b1d2c
  • editorHoverWidget.border#000000aa
  • editorIndentGuide.activeBackground#828bb8aa
  • editorIndentGuide.background#444a73bb
  • editorLineNumber.activeForeground#828bb8
  • editorLineNumber.foreground#444a73
  • editorLink.activeForeground#e8edfc
  • editorMarkerNavigation.background#e8edfc05
  • editorOverviewRuler.addedForeground#50fa7b66
  • editorOverviewRuler.border#0c1933
  • editorOverviewRuler.bracketMatchForeground#5e80debb
  • editorOverviewRuler.deletedForeground#ff858566
  • editorOverviewRuler.errorForeground#ff5555cc
  • editorOverviewRuler.findMatchForeground#58d6fcbb
  • editorOverviewRuler.infoForeground#42adff66
  • editorOverviewRuler.modifiedForeground#75a1ff66
  • editorOverviewRuler.warningForeground#ffcc00cc
  • editorRuler.foreground#444a73bb
  • editorSuggestWidget.background#111229
  • editorSuggestWidget.border#00000033
  • editorSuggestWidget.foreground#a9b8e8
  • editorSuggestWidget.highlightForeground#58d6fc
  • editorSuggestWidget.selectedBackground#111e39
  • editorWarning.foreground#ffcc00cc
  • editorWhitespace.foreground#e8edfc40
  • editorWidget.background#0d182e
  • editorWidget.resizeBorder#75a1ff
  • extensionButton.prominentBackground#5e80de
  • extensionButton.prominentHoverBackground#42adffcc
  • focusBorder#0fc1b7
  • foreground#e8edfc
  • gitDecoration.conflictingResourceForeground#ffcc00cc
  • gitDecoration.deletedResourceForeground#ef3e67dd
  • gitDecoration.ignoredResourceForeground#777fabaa
  • gitDecoration.modifiedResourceForeground#75a1ffee
  • gitDecoration.untrackedResourceForeground#0fc1b7
  • gitlens.trailingLineForegroundColor#828bb8aa
  • input.background#111229
  • input.border#00000066
  • input.foreground#e8edfc
  • input.placeholderForeground#e8edfcaa
  • inputValidation.errorBackground#c53b53
  • inputValidation.errorBorder#ef3e6750
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#446bbb
  • inputValidation.infoBorder#75a1ff50
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ad7c43
  • inputValidation.warningBorder#ffcc0050
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#383e5c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0f1024
  • list.focusForeground#e8edfc
  • list.highlightForeground#58d6fc
  • list.hoverBackground#0d182e
  • list.hoverForeground#e8edfc
  • list.inactiveSelectionBackground#292e46
  • list.inactiveSelectionForeground#e8edfc
  • list.warningForeground#ffcc00cc
  • menu.background#0d182e
  • menu.foreground#e8edfc
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#0fc1b7
  • menu.separatorBackground#e8edfc
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#0fc1b7
  • minimap.findMatchHighlight#58d6fccc
  • minimap.selectionHighlight#58d6fc33
  • minimapGutter.addedBackground#50fa7b66
  • minimapGutter.modifiedBackground#75a1ff66
  • notificationLink.foreground#75a1ff
  • notifications.background#111229
  • notifications.foreground#e8edfc
  • panel.background#0d182e
  • panel.border#00000033
  • panel.dropBackground#e8edfc
  • panelTitle.activeBorder#75a1ff
  • panelTitle.activeForeground#e8edfc
  • panelTitle.inactiveForeground#828bb8
  • peekView.border#00000030
  • peekViewEditor.background#e8edfc05
  • peekViewEditor.matchHighlightBackground#828bb850
  • peekViewEditorGutter.background#e8edfc05
  • peekViewResult.background#e8edfc05
  • peekViewResult.matchHighlightBackground#828bb850
  • peekViewResult.selectionBackground#828bb870
  • peekViewTitle.background#e8edfc05
  • peekViewTitleDescription.foreground#e8edfc60
  • pickerGroup.foreground#75a1ff
  • progressBar.background#75a1ff
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#75a1ff
  • scrollbarSlider.background#828bb830
  • scrollbarSlider.hoverBackground#a9b8e830
  • selection.background#444a73
  • settings.checkboxBackground#0f1024
  • settings.checkboxBorder#00000066
  • settings.checkboxForeground#e8edfc
  • settings.dropdownBackground#111e39
  • settings.dropdownBorder#111229
  • settings.dropdownForeground#e8edfc
  • settings.headerForeground#75a1ff
  • settings.modifiedItemIndicator#75a1ff
  • settings.numberInputBackground#111229
  • settings.numberInputBorder#00000066
  • settings.numberInputForeground#e8edfc
  • settings.textInputBackground#111229
  • settings.textInputBorder#00000066
  • settings.textInputForeground#e8edfc
  • sideBar.background#0d182e
  • sideBar.border#111229
  • sideBar.foreground#828bb8
  • sideBarSectionHeader.background#0d182e
  • sideBarSectionHeader.border#111e39
  • sideBarTitle.foreground#e8edfc
  • statusBar.background#0d182e
  • statusBar.border#111229
  • statusBar.debuggingBackground#0fc1b7
  • statusBar.debuggingForeground#e8edfc
  • statusBar.foreground#828bb8
  • statusBar.noFolderBackground#0c1933
  • statusBarItem.hoverBackground#828bb820
  • tab.activeBackground#0c1933
  • tab.activeBorder#0fc1b7
  • tab.activeForeground#e8edfc
  • tab.activeModifiedBorder#828bb8
  • tab.border#111229
  • tab.inactiveBackground#0d182e
  • tab.inactiveForeground#828bb8
  • tab.unfocusedActiveBorder#828bb8
  • tab.unfocusedActiveForeground#e8edfc
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#75a1ff
  • terminal.ansiBrightBlack#828bb8
  • terminal.ansiBrightBlue#75a1ff
  • terminal.ansiBrightCyan#58d6fc
  • terminal.ansiBrightGreen#50fa7b
  • terminal.ansiBrightMagenta#ff79c6
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#e8edfc
  • terminal.ansiBrightYellow#ffcc00
  • terminal.ansiCyan#58d6fc
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#e8edfc
  • terminal.ansiYellow#ffcc00
  • terminal.border#111e39
  • terminal.foreground#e8edfc
  • terminal.selectionBackground#e8edfc44
  • terminalCursor.foreground#0fc1b7
  • textLink.activeForeground#b2dfff
  • textLink.foreground#42adff
  • titleBar.activeBackground#0d182e
  • titleBar.activeForeground#e8edfc
  • titleBar.border#111229
  • titleBar.inactiveBackground#0d182e
  • 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#6A7DDCitalic
variable, support.variable, string constant.other.placeholder, text.html#e8edfc
support.variable.dom, support.constant.math, support.type.object.module, support.variable.object.process, support.constant.json#ffcc00
constant.language.undefined, constant.language.null#828bb8
constant.other.php#ffcc00
constant.other.color#ffffff
invalid, invalid.illegal#ef3e67
invalid.deprecated#bd93f9
keyword, storage.type, storage.modifier, keyword.other.important#bd93f9
keyword.control, storageitalic
punctuation.definition.template-expression, punctuation.section.embedded#58d6fc
keyword.operator.spread, keyword.operator.rest#ff5555bold
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#58d6fc
keyword.controlitalic
entity.name.tag, meta.tag, markup.deleted.git_gutter#ff5555
entity.name.function, variable.function, keyword.other.special-method#75a1ff
support.function, meta.function-call entity.name.function#42adff
source.cpp meta.block variable.other#ff5555
support.other.variable, string.other.link#ff5555
variable.other.constant, constant.language, keyword.other.type.php, storage.type.php, support.constant, constant.character, constant.escape, keyword.other.unit#ff8585
constant.numeric, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan#fc845f
variable.parameter.function.language.special, variable.parameter, meta.function.parameter variable#ff79c6
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#50fa7b
variable.other.object#ffcc00
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.field.declaration.ts variable.object.property, variable.object.property#0fc1b7
meta.object.member, variable.other.object.property#a9b8e8
variable.other.property, support.variable.property, support.variable.property.dom#a9b8e8
source.haskell constant.other.haskell#ff8585
source.haskell meta.import.haskell entity.name.namespace#e8edfc
source.haskell storage.type, source.c storage.type, source.java storage.type#ffcc00
storage.type.function#bd93f9
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#ffcc00
support.type#fc845f
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#75a1ff
support.constant.property-value#58d6fc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5555
variable.language#ff5555italic
entity.name.method.js#75a1ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#75a1ff
entity.other.attribute-name#bd93f9italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffcc00
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name#bd93f9italic
entity.other.attribute-name.class#ffcc00
source.sass keyword.control#75a1ff
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#0fc1b7
support.constant.property-value#ff79c6
markup.inserted#50fa7b
markup.deleted#ff5555
markup.changed#bd93f9
string.regexp#6bf9f6
punctuation.definition.group#ff5555
constant.other.character-class.regexp, keyword.control.anchor.regexp#bd93f9
constant.other.character-class.set.regexp#ffcc00
keyword.operator.quantifier.regexp#ff79c6
constant.character.escape#58d6fc
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#75a1ffitalic
keyword.other.unit#fc845f
source.js constant.other.object.key.js string.unquoted.label.js#ff5555italic
source.json meta.structure.dictionary.json support.type.property-name.json#75a1ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#42adff
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#ff5555
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#ff79c6
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#ffcc00
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#0fc1b7
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#75a1ff
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#bd93f9
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#58d6fc
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#58d6fc
markup.italic#ff5555italic
markup.bold, markup.bold string#ff5555bold
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#ff5555bold
markup.underline#fc845funderline
markup.quote punctuation.definition.blockquote.markdown#58d6fc
markup.quoteitalic
string.other.link.title.markdown#75a1ff
string.other.link.description.title.markdown#bd93f9
constant.other.reference.link.markdown#ffcc00
markup.raw.block#bd93f9
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#58d6fc
variable.language.fenced.markdown#58d6fc
meta.separator#58d6fcbold
markup.table#828bb8
token.info-token#42adff
token.warn-token#ffcc00
token.error-token#ff5555
token.debug-token#bd93f9

Shiki preview

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

Loading...