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#433b52
  • activityBar.activeBorder#ab97cf
  • activityBar.background#332e40
  • activityBar.dropBackground#433b52
  • activityBar.foreground#ddd8e8
  • activityBarBadge.background#ab97cf
  • activityBarBadge.foreground#332e40
  • badge.background#ab97cf
  • badge.foreground#332e40
  • button.background#ab97cfee
  • button.foreground#332e40
  • button.hoverBackground#ab97cf
  • button.secondaryBackground#4c435e
  • button.secondaryForeground#ddd8e8
  • button.secondaryHoverBackground#564d6b
  • charts.blue#a58ac7
  • charts.foreground#ddd8e8
  • charts.green#8ab8c5
  • charts.lines#ab97cf
  • charts.orange#ecb48f
  • charts.purple#c36b8b
  • charts.red#d3787b
  • charts.yellow#b5c292
  • debugConsole.errorForeground#d3787b
  • debugConsole.infoForeground#ab97cf
  • debugConsole.sourceForeground#7d7199
  • debugConsole.warningForeground#b5c292
  • debugConsoleInputIcon.foreground#a58ac7
  • debugExceptionWidget.background#564d6b
  • debugExceptionWidget.border#332e40
  • debugToolBar.background#433b52
  • descriptionForeground#ddd8e8e6
  • diffEditor.insertedTextBackground#a58ac733
  • diffEditor.removedTextBackground#d3787b4d
  • dropdown.background#433b52
  • dropdown.border#433b52
  • dropdown.foreground#ddd8e8
  • editor.background#332e40
  • editor.findMatchBackground#ab97cf66
  • editor.findMatchHighlightBackground#ab97cf33
  • editor.findRangeHighlightBackground#ab97cf33
  • editor.focusedStackFrameHighlightBackground#956eac
  • editor.foreground#ddd8e8
  • editor.hoverHighlightBackground#433b52
  • editor.inactiveSelectionBackground#4c435ecc
  • editor.inlineValuesBackground#564d6b
  • editor.inlineValuesForeground#f0edf5
  • editor.lineHighlightBackground#433b52
  • editor.lineHighlightBorder#433b52
  • editor.rangeHighlightBackground#4c435e52
  • editor.selectionBackground#4c435ecc
  • editor.selectionHighlightBackground#4c435ecc
  • editor.stackFrameHighlightBackground#956eac
  • editor.wordHighlightBackground#a58ac766
  • editor.wordHighlightStrongBackground#a58ac799
  • editorActiveLineNumber.foreground#ddd8e8cc
  • editorBracketHighlight.foreground1#dba3cf
  • editorBracketHighlight.foreground2#ab97cf
  • editorBracketHighlight.foreground3#a58ac7
  • editorBracketHighlight.foreground4#956eac
  • editorBracketHighlight.foreground5#dba3cf
  • editorBracketHighlight.foreground6#ab97cf
  • editorBracketHighlight.unexpectedBracket.foreground#d3787b
  • editorBracketMatch.background#332e4000
  • editorBracketMatch.border#ab97cf
  • editorCodeLens.foreground#564d6b
  • editorCursor.foreground#ddd8e8
  • editorError.border#d3787b00
  • editorError.foreground#d3787b
  • editorGroup.background#332e40
  • editorGroup.border#433b5201
  • editorGroup.dropBackground#433b5299
  • editorGroupHeader.border#433b5200
  • editorGroupHeader.noTabsBackground#332e40
  • editorGroupHeader.tabsBackground#332e40
  • editorGroupHeader.tabsBorder#433b5200
  • editorGutter.addedBackground#8ab8c5
  • editorGutter.background#332e40
  • editorGutter.deletedBackground#d3787b
  • editorGutter.modifiedBackground#b5c292
  • editorHint.border#b5c29200
  • editorHint.foreground#b5c292
  • editorHoverWidget.background#433b52
  • editorHoverWidget.border#433b52
  • editorIndentGuide.activeBackground#564d6b
  • editorIndentGuide.background#4c435eb3
  • editorInlayHint.background#4c435e
  • editorInlayHint.foreground#ddd8e8
  • editorLineNumber.activeForeground#ddd8e8
  • editorLineNumber.foreground#564d6b
  • editorLink.activeForeground#ab97cf
  • editorMarkerNavigation.background#956eacc0
  • editorMarkerNavigationError.background#d3787bc0
  • editorMarkerNavigationWarning.background#b5c292c0
  • editorOverviewRuler.addedForeground#8ab8c5
  • editorOverviewRuler.border#433b52
  • editorOverviewRuler.currentContentForeground#433b52
  • editorOverviewRuler.deletedForeground#d3787b
  • editorOverviewRuler.errorForeground#d3787b
  • editorOverviewRuler.findMatchForeground#ab97cf66
  • editorOverviewRuler.incomingContentForeground#433b52
  • editorOverviewRuler.infoForeground#a58ac7
  • editorOverviewRuler.modifiedForeground#b5c292
  • editorOverviewRuler.rangeHighlightForeground#ab97cf66
  • editorOverviewRuler.selectionHighlightForeground#ab97cf66
  • editorOverviewRuler.warningForeground#b5c292
  • editorOverviewRuler.wordHighlightForeground#ab97cf66
  • editorOverviewRuler.wordHighlightStrongForeground#ab97cf66
  • editorRuler.foreground#4c435e
  • editorSuggestWidget.background#332e40
  • editorSuggestWidget.border#433b52
  • editorSuggestWidget.focusHighlightForeground#ab97cf
  • editorSuggestWidget.foreground#ddd8e8
  • editorSuggestWidget.highlightForeground#ab97cf
  • editorSuggestWidget.selectedBackground#4c435e
  • editorSuggestWidget.selectedForeground#ddd8e8
  • editorWarning.border#b5c29200
  • editorWarning.foreground#b5c292
  • editorWhitespace.foreground#564d6bb3
  • editorWidget.background#332e40
  • editorWidget.border#433b52
  • errorForeground#d3787b
  • extensionButton.prominentBackground#4c435e
  • extensionButton.prominentForeground#ddd8e8
  • extensionButton.prominentHoverBackground#564d6b
  • focusBorder#433b52
  • foreground#ddd8e8
  • gitDecoration.conflictingResourceForeground#956eac
  • gitDecoration.deletedResourceForeground#d3787b
  • gitDecoration.ignoredResourceForeground#ddd8e866
  • gitDecoration.modifiedResourceForeground#b5c292
  • gitDecoration.stageDeletedResourceForeground#d3787b
  • gitDecoration.stageModifiedResourceForeground#b5c292
  • gitDecoration.submoduleResourceForeground#dba3cf
  • gitDecoration.untrackedResourceForeground#8ab8c5
  • input.background#433b52
  • input.border#433b52
  • input.foreground#ddd8e8
  • input.placeholderForeground#ddd8e899
  • inputOption.activeBackground#956eac
  • inputOption.activeBorder#956eac
  • inputOption.activeForeground#f0edf5
  • inputValidation.errorBackground#d3787b
  • inputValidation.errorBorder#d3787b
  • inputValidation.infoBackground#a58ac7
  • inputValidation.infoBorder#a58ac7
  • inputValidation.warningBackground#ecb48f
  • inputValidation.warningBorder#ecb48f
  • keybindingLabel.background#564d6b
  • keybindingLabel.border#564d6b
  • keybindingLabel.bottomBorder#564d6b
  • keybindingLabel.foreground#ddd8e8
  • list.activeSelectionBackground#ab97cf
  • list.activeSelectionForeground#332e40
  • list.dropBackground#ab97cf99
  • list.errorForeground#d3787b
  • list.focusBackground#ab97cf99
  • list.focusForeground#ddd8e8
  • list.focusHighlightForeground#f0edf5
  • list.highlightForeground#ab97cf
  • list.hoverBackground#433b52
  • list.hoverForeground#f0edf5
  • list.inactiveFocusBackground#4c435ecc
  • list.inactiveSelectionBackground#4c435e
  • list.inactiveSelectionForeground#ddd8e8
  • list.warningForeground#b5c292
  • merge.border#433b5200
  • merge.currentContentBackground#a58ac74d
  • merge.currentHeaderBackground#a58ac766
  • merge.incomingContentBackground#dba3cf4d
  • merge.incomingHeaderBackground#dba3cf66
  • minimap.background#332e40
  • minimap.errorHighlight#d3787bcc
  • minimap.findMatchHighlight#ab97cf
  • minimap.selectionHighlight#ab97cfcc
  • minimap.warningHighlight#b5c292cc
  • minimapGutter.addedBackground#8ab8c5
  • minimapGutter.deletedBackground#d3787b
  • minimapGutter.modifiedBackground#b5c292
  • minimapSlider.activeBackground#4c435eaa
  • minimapSlider.background#4c435e99
  • minimapSlider.hoverBackground#4c435eaa
  • notification.background#433b52
  • notification.buttonBackground#4c435e
  • notification.buttonForeground#ddd8e8
  • notification.buttonHoverBackground#564d6b
  • notification.errorBackground#d3787b
  • notification.errorForeground#332e40
  • notification.foreground#ddd8e8
  • notification.infoBackground#ab97cf
  • notification.infoForeground#332e40
  • notification.warningBackground#b5c292
  • notification.warningForeground#332e40
  • notificationCenter.border#433b5200
  • notificationCenterHeader.background#332e40
  • notificationCenterHeader.foreground#ab97cf
  • notificationLink.foreground#ab97cf
  • notifications.background#433b52
  • notifications.border#332e40
  • notifications.foreground#ddd8e8
  • notificationToast.border#433b5200
  • panel.background#332e40
  • panel.border#433b52
  • panelTitle.activeBorder#ab97cf00
  • panelTitle.activeForeground#ab97cf
  • panelTitle.inactiveForeground#ddd8e8
  • peekView.border#564d6b
  • peekViewEditor.background#332e40
  • peekViewEditor.matchHighlightBackground#ab97cf4d
  • peekViewEditorGutter.background#332e40
  • peekViewResult.background#332e40
  • peekViewResult.fileForeground#ab97cf
  • peekViewResult.lineForeground#ddd8e866
  • peekViewResult.matchHighlightBackground#ab97cfcc
  • peekViewResult.selectionBackground#4c435e
  • peekViewResult.selectionForeground#ddd8e8
  • peekViewTitle.background#433b52
  • peekViewTitleDescription.foreground#ddd8e8
  • peekViewTitleLabel.foreground#ab97cf
  • pickerGroup.border#433b52
  • pickerGroup.foreground#ab97cf
  • progressBar.background#ab97cf
  • quickInputList.focusBackground#ab97cf
  • quickInputList.focusForeground#332e40
  • sash.hoverBorder#ab97cf
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#4c435eaa
  • scrollbarSlider.background#4c435e99
  • scrollbarSlider.hoverBackground#4c435eaa
  • selection.background#ab97cf99
  • sideBar.background#332e40
  • sideBar.border#433b52
  • sideBar.foreground#ddd8e8
  • sideBarSectionHeader.background#433b52
  • sideBarSectionHeader.foreground#ddd8e8
  • sideBarTitle.foreground#ddd8e8
  • statusBar.background#433b52
  • statusBar.border#433b5200
  • statusBar.debuggingBackground#956eac
  • statusBar.debuggingForeground#ddd8e8
  • statusBar.foreground#ddd8e8
  • statusBar.noFolderBackground#433b52
  • statusBar.noFolderForeground#ddd8e8
  • statusBarItem.activeBackground#564d6b
  • statusBarItem.errorBackground#433b52
  • statusBarItem.errorForeground#d3787b
  • statusBarItem.hoverBackground#4c435e
  • statusBarItem.prominentBackground#433b52
  • statusBarItem.prominentHoverBackground#4c435e
  • statusBarItem.warningBackground#b5c292
  • statusBarItem.warningForeground#332e40
  • tab.activeBackground#433b52
  • tab.activeBorder#ab97cf00
  • tab.activeBorderTop#ab97cf00
  • tab.activeForeground#ddd8e8
  • tab.border#433b5200
  • tab.hoverBackground#433b52cc
  • tab.hoverBorder#ab97cf00
  • tab.inactiveBackground#332e40
  • tab.inactiveForeground#ddd8e866
  • tab.lastPinnedBorder#564d6b
  • tab.unfocusedActiveBorder#ab97cf00
  • tab.unfocusedActiveBorderTop#ab97cf00
  • tab.unfocusedActiveForeground#ddd8e899
  • tab.unfocusedHoverBackground#433b52b3
  • tab.unfocusedHoverBorder#ab97cf00
  • tab.unfocusedInactiveForeground#ddd8e866
  • terminal.ansiBlack#4c435e
  • terminal.ansiBlue#8faeec
  • terminal.ansiBrightBlack#564d6b
  • terminal.ansiBrightBlue#95b5f6
  • terminal.ansiBrightCyan#91c1cf
  • terminal.ansiBrightGreen#bdcc99
  • terminal.ansiBrightMagenta#ad90d1
  • terminal.ansiBrightRed#dd7c80
  • terminal.ansiBrightWhite#e7e4f0
  • terminal.ansiBrightYellow#f6bb95
  • terminal.ansiCyan#8ab8c5
  • terminal.ansiGreen#b5c292
  • terminal.ansiMagenta#a58ac7
  • terminal.ansiRed#d3787b
  • terminal.ansiWhite#ddd8e8
  • terminal.ansiYellow#ecb48f
  • terminal.background#332e40
  • terminal.foreground#ddd8e8
  • terminal.tab.activeBorder#ab97cf
  • textBlockQuote.background#433b52
  • textBlockQuote.border#a58ac7
  • textCodeBlock.background#564d6b
  • textLink.activeForeground#ab97cf
  • textLink.foreground#ab97cf
  • textPreformat.foreground#dba3cf
  • textSeparator.foreground#f0edf5
  • titleBar.activeBackground#332e40
  • titleBar.activeForeground#ddd8e8
  • titleBar.border#332e4000
  • titleBar.inactiveBackground#332e40
  • titleBar.inactiveForeground#ddd8e866
  • tree.indentGuidesStroke#7d7199
  • walkThrough.embeddedEditorBackground#332e40
  • welcomePage.buttonBackground#4c435e
  • welcomePage.buttonHoverBackground#564d6b
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ddd8e8ff
emphasisitalic
strongbold
comment#7d7199
constant.character#b5c292
constant.character.escape#b5c292
constant.language#a58ac7
constant.numeric#c36b8b
constant.regexp#b5c292
entity.name.class, entity.name.type.class#dba3cf
entity.name.function#ab97cf
entity.name.tag#a58ac7
entity.other.attribute-name#dba3cf
entity.other.inherited-class#dba3cfbold
invalid.deprecated#ddd8e8
invalid.illegal#ddd8e8
keyword#a58ac7
keyword.operator#a58ac7
keyword.other.new#a58ac7
markup.boldbold
markup.changed#b5c292
markup.deleted#d3787b
markup.inserted#8ab8c5
meta.preprocessor#956eac
punctuation#f0edf5
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#f0edf5
punctuation.definition.tag#a58ac7
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#7d7199
punctuation.section#f0edf5
punctuation.section.embedded.begin, punctuation.section.embedded.end#a58ac7
punctuation.terminator#a58ac7
punctuation.definition.variable#a58ac7
storage#a58ac7
string#8ab8c5
string.regexp#b5c292
support.class#dba3cf
support.constant#a58ac7
support.function#ab97cf
support.function.construct#a58ac7
support.type#dba3cf
support.type.exception#dba3cf
token.debug-token#c36b8b
token.error-token#d3787b
token.info-token#ab97cf
token.warn-token#b5c292
variable.other#ddd8e8
variable.language#a58ac7
variable.parameter#ddd8e8
punctuation.separator.pointer-access.c#a58ac7
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#dba3cf
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#956eacbold
source.css constant.other.color.rgb-value#c36b8b
source.css meta.property-value#ab97cf
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#ecb48f
source.css punctuation.definition.keyword#a58ac7
source.css support.type.property-name#ddd8e8
source.diff meta.diff.range.context#dba3cf
source.diff meta.diff.header.from-file#dba3cf
source.diff punctuation.definition.from-file#dba3cf
source.diff punctuation.definition.range#dba3cf
source.diff punctuation.definition.separator#a58ac7
entity.name.type.module.elixir#dba3cf
variable.other.readwrite.module.elixir#ddd8e8bold
constant.other.symbol.elixir#ddd8e8bold
variable.other.constant.elixir#dba3cf
source.go constant.other.placeholder.go#b5c292
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#a58ac7
source.java constant.other#ddd8e8
source.java keyword.other.documentation#dba3cf
source.java keyword.other.documentation.author.javadoc#dba3cf
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#dba3cf
source.java keyword.other.documentation.see.javadoc#dba3cf
source.java meta.method-call meta.method#ab97cf
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#dba3cf
source.java meta.tag.template.value.javadoc#ab97cf
source.java punctuation.definition.keyword.javadoc#dba3cf
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#7d7199
source.java storage.modifier.import#dba3cf
source.java storage.modifier.package#dba3cf
source.java storage.type#dba3cf
source.java storage.type.annotation#ecb48f
source.java storage.type.generic#dba3cf
source.java storage.type.primitive#a58ac7
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#ecb48f
source.js meta.object-literal.key#ab97cf
source.js storage.type.class.jsdoc#dba3cf
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#a58ac7
source.js string.quoted.template meta.method-call.with-arguments#f0edf5
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#ddd8e8
source.js support.type.primitive#a58ac7
source.js variable.other.object#ddd8e8
source.js variable.other.readwrite.alias#dba3cf
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#f0edf5
text.html.basic constant.character.entity.html#b5c292
text.html.basic constant.other.inline-data#ecb48fitalic
text.html.basic meta.tag.sgml.doctype#956eac
text.html.basic punctuation.definition.entity#a58ac7
source.properties entity.name.section.group-title.ini#ab97cf
source.properties punctuation.separator.key-value.ini#a58ac7
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#dba3cf
markup.heading#ab97cf
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#dba3cf
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#a58ac7
text.html.markdown beginning.punctuation.definition.quote#dba3cf
text.html.markdown markup.quote#7d7199
text.html.markdown constant.character.math.tex#a58ac7
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#956eac
text.html.markdown punctuation.definition.function.math.tex#ab97cf
text.html.markdown punctuation.math.operator.latex#a58ac7
text.html.markdown punctuation.definition.heading#a58ac7
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#a58ac7
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#ab97cf
source.perl punctuation.definition.variable#ddd8e8
source.php meta.function-call, source.php meta.function-call.object#ab97cf
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#ecb48f
source.python meta.function-call.generic#ab97cf
source.python support.type#ab97cf
source.python variable.parameter.function.language#ddd8e8
source.python meta.function.parameters variable.parameter.function.language.special.self#a58ac7
source.rust entity.name.type#dba3cf
source.rust meta.macro entity.name.function#ab97cfbold
source.rust meta.attribute, source.rust meta.attribute punctuation, source.rust meta.attribute keyword.operator#956eac
source.rust entity.name.type.traitbold
source.rust punctuation.definition.interpolation#b5c292
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#a58ac7
source.css.scss variable.interpolation#ddd8e8italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#ecb48f
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#ddd8e8
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#ab97cf
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#dba3cf
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#dba3cf
source.ts support.variable, source.tsx support.variable#ddd8e8
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#f0edf5
text.xml entity.name.tag.namespace#dba3cf
text.xml keyword.other.doctype#956eac
text.xml meta.tag.preprocessor entity.name.tag#956eac
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#ecb48fitalic
source.yaml entity.name.tag#dba3cf