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#23252f
  • activityBar.border#23252f
  • activityBar.foreground#eeffff
  • activityBarBadge.background#7e57c2
  • activityBarBadge.foreground#ffffff
  • badge.background#7e57c2
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#eeffff
  • breadcrumb.focusForeground#bfc7d5
  • breadcrumb.foreground#6c739a
  • breadcrumbPicker.background#23252f
  • button.background#7e57c2cc
  • button.foreground#ffffffcc
  • button.hoverBackground#7e57c2
  • contrastBorder#282B3C
  • debugExceptionWidget.background#23252f
  • debugExceptionWidget.border#7e57c2
  • debugToolBar.background#23252f
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.removedTextBackground#ef535033
  • dropdown.background#23252f
  • dropdown.border#7e57c2
  • dropdown.foreground#ffffffcc
  • editor.background#23252f
  • editor.findMatchBackground#7e57c25a
  • editor.findMatchHighlightBackground#2E3248
  • editor.foreground#BFC7D5
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#7580B850
  • editor.selectionHighlightBackground#383D51
  • editor.wordHighlightBackground#32374D
  • editor.wordHighlightStrongBackground#2E3250
  • editorCodeLens.foreground#FFCA28
  • editorCursor.foreground#7e57c2
  • editorError.foreground#EF5350
  • editorGroup.border#2E3245
  • editorGroup.dropBackground#7e57c273
  • editorGroupHeader.noTabsBackground#32374C
  • editorGroupHeader.tabsBackground#23252f
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#9CCC65
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#23252f
  • editorHoverWidget.border#7e57c2
  • editorIndentGuide.background#4E557980
  • editorLineNumber.activeForeground#eeffff
  • editorLineNumber.foreground#4c5374
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#bfc7d5
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#7e57c2
  • editorWarning.foreground#FFCA28
  • editorWidget.background#31364a
  • errorForeground#EF5350
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#282B3C
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#FFEB95CC
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#FFCA28
  • gitDecoration.untrackedResourceForeground#a9c77dff
  • input.background#313850
  • input.border#7e57c2
  • input.foreground#ffffffcc
  • input.placeholderForeground#ffffffcc
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#ef5350f2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#64b5f6f2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#ffca28f2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#7e57c2
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2E3245
  • list.focusBackground#0000002e
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#0000001a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#929ac90d
  • list.inactiveSelectionForeground#929ac9
  • merge.currentHeaderBackground#7e57c25a
  • merge.incomingHeaderBackground#7e57c25a
  • notificationLink.foreground#80CBC4
  • notifications.background#23252f
  • notifications.foreground#ffffffcc
  • panel.background#23252f
  • panel.border#282B3C
  • panelTitle.activeBorder#7e57c2
  • panelTitle.activeForeground#eeffff
  • panelTitle.inactiveForeground#bfc7d580
  • peekView.border#7e57c2
  • peekViewEditor.background#232635
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#2E3245
  • peekViewResult.fileForeground#eeffff
  • peekViewResult.lineForeground#eeffff
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#eeffff
  • peekViewTitle.background#23252f
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#eeffff
  • pickerGroup.border#2E3245
  • pickerGroup.foreground#d1aaff
  • scrollbar.shadow#23252f00
  • scrollbarSlider.activeBackground#694CA4cc
  • scrollbarSlider.background#694CA466
  • scrollbarSlider.hoverBackground#694CA4cc
  • selection.background#7580B850
  • sideBar.background#23252f
  • sideBar.border#282B3C
  • sideBar.foreground#6C739A
  • sideBarSectionHeader.background#23252f
  • sideBarSectionHeader.foreground#eeffff
  • sideBarTitle.foreground#eeffff
  • statusBar.background#282C3D
  • statusBar.border#262A39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#676E95
  • statusBar.noFolderBackground#23252f
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#23252f
  • tab.activeBorder#7e57c2
  • tab.activeForeground#eeffff
  • tab.border#272B3B
  • tab.inactiveBackground#23252f
  • tab.inactiveForeground#929ac9
  • tab.unfocusedActiveBorder#262A39
  • terminal.ansiBlack#676E95
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#676E95
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#AA92EA
  • terminal.ansiBrightRed#ff5572
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#a9c77d
  • terminal.ansiMagenta#AA92EA
  • terminal.ansiRed#ff5572
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminalCursor.foreground#C792EA
  • titleBar.activeBackground#23252f
  • titleBar.activeForeground#eeefff
  • titleBar.border#23252f
  • titleBar.inactiveBackground#30364c
  • walkThrough.embeddedEditorBackground#232635
  • widget.shadow#232635

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FAFAFA
comment, punctuation.definition.comment#8695b7d9italic
variable, string constant.other.placeholder, source#FAFAFA
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#af8aff
invalid, invalid.illegal#ef6b73
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#af8aff
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#FAFAFA
keyword.operator.assignment#BFC7D5
punctuation.separator.key-value.html, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#C792EA
keyword.control#aa92eaitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#A4A4A4
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#9EA6AC
meta.block variable.other#FAFAFA
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#FAFAFA
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#D9E5F5
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#9EA6AC
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#FAFAFA
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, support.variable.object.node, support.variable.object.process, variable.css#A4A4A4
support.constant.property-value.css, constant.other.color.rgb-value.hex.css#FAFAFA
punctuation.definition.constant.css#BFC7D5
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.increment-decrement#BFC7D5
entity.name.module.js, variable.import.parameter.js#ef6b73
variable.language#A4A4A4italic
entity.name.method.js#A4A4A4italic
meta.class-method.js entity.name.function.js, variable.function.constructor#A4A4A4
entity.other.attribute-name#C792EA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#C792EA
entity.other.attribute-name.class#C792EA
source.sass keyword.control#A4A4A4
punctuation.definition.entity.css, punctuation.definition.keyword.css#FAFAFA
markup.inserted#D9F5DD
markup.deleted#ef6b73
markup.changed#af8aff
string.regexp#D9F5DD
constant.character.escape#D9F5DD
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#A4A4A4
source.js constant.other.object.key.js string.unquoted.label.js#ef6b73italic
source.json meta.structure.dictionary.json support.type.property-name.json#A4A4A4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A4A4A4
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#C792EA
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#A4A4A4
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#C792EA
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#A4A4A4
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#C792EA
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#A4A4A4
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#C792EA
markup.italic#ef6b73italic
markup.bold#ef6b73bold
markup.underline#af8affunderline
markup.strike#ffcc66italic
markup.quote#A4A4A4italic
markup.raw.block#C792EA
markup.table#A4A4A4
text.html.markdown, punctuation.definition.list_item.markdown#FAFAFA
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#A4A4A4
text.html.markdown meta.dummy.line-break#FAFAFA
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#D9F5DD
markup.quote, punctuation.definition.blockquote.markdown#A4A4A4italic
string.other.link.title.markdown#ffcc66underline
markup.raw.block.fenced.markdown#d7dce2
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#FAFAFA
variable.language.fenced.markdown#FAFAFA
meta.separator#FAFAFA
token.info-token#A4A4A4
token.warn-token#ffcc66
token.error-token#ef6b73
token.debug-token#af8aff
storage.type.error.go#A4A4A4
punctuation.other.period.go#C792EA