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#65b2ff10
  • activityBar.activeBorder#906cff80
  • activityBar.background#1e1c31
  • activityBar.foreground#929bb6
  • activityBar.inactiveForeground#6a6c8a
  • activityBarBadge.background#906cff
  • activityBarBadge.foreground#1e1c31
  • badge.background#141127
  • badge.foreground#929bb6
  • breadcrumb.activeSelectionForeground#929bb6
  • breadcrumb.background#1e1c31
  • breadcrumb.focusForeground#929bb6
  • breadcrumb.foreground#6a6c8a
  • breadcrumbPicker.background#1c1c27
  • button.background#39384e
  • button.foreground#929bb6
  • checkbox.background#39384e
  • checkbox.border#1c1c27
  • checkbox.foreground#929bb6
  • contrastBorder#1c1c27
  • debugToolBar.background#39384e
  • diffEditor.insertedTextBackground#62d19620
  • diffEditor.removedTextBackground#ff545850
  • dropdown.background#1e1c31
  • dropdown.border#1c1c27
  • dropdown.foreground#929bb6
  • editor.background#1e1c31
  • editor.findMatchBackground#ffb37880
  • editor.findMatchHighlightBackground#cbe3e740
  • editor.findRangeHighlightBackground#56557575
  • editor.foldBackground#39384e
  • editor.foreground#929bb6
  • editor.hoverHighlightBackground#1c1c27
  • editor.lineHighlightBorder#141127
  • editor.rangeHighlightBackground#65b2ff15
  • editor.selectionBackground#141127
  • editor.selectionHighlightBackground#141127
  • editor.snippetFinalTabstopHighlightBackground#1e1c31
  • editor.snippetFinalTabstopHighlightBorder#62d196
  • editor.snippetTabstopHighlightBackground#1e1c31
  • editor.snippetTabstopHighlightBorder#6a6c8a
  • editor.wordHighlightBackground#63f2f150
  • editor.wordHighlightStrongBackground#62d19650
  • editorCodeLens.foreground#6a6c8a
  • editorError.foreground#ff5458
  • editorGroup.border#65b2ff
  • editorGroup.dropBackground#56557570
  • editorGroupHeader.tabsBackground#1c1c27
  • editorGutter.addedBackground#62d19680
  • editorGutter.deletedBackground#ff545880
  • editorGutter.modifiedBackground#63f2f180
  • editorHoverWidget.background#1e1c31
  • editorHoverWidget.border#6a6c8a
  • editorIndentGuide.activeBackground#cbe3e745
  • editorIndentGuide.background#cbe3e71A
  • editorLineNumber.foreground#6a6c8a
  • editorLink.activeForeground#63f2f1
  • editorMarkerNavigation.background#39384e
  • editorOverviewRuler.addedForeground#62d19680
  • editorOverviewRuler.border#1c1c27
  • editorOverviewRuler.currentContentForeground#62d196
  • editorOverviewRuler.deletedForeground#ff545880
  • editorOverviewRuler.errorForeground#ff545880
  • editorOverviewRuler.incomingContentForeground#65b2ff
  • editorOverviewRuler.infoForeground#63f2f180
  • editorOverviewRuler.modifiedForeground#63f2f180
  • editorOverviewRuler.selectionHighlightForeground#ffb378
  • editorOverviewRuler.warningForeground#ffb37880
  • editorOverviewRuler.wordHighlightForeground#63f2f1
  • editorOverviewRuler.wordHighlightStrongForeground#62d196
  • editorRuler.foreground#cbe3e71A
  • editorSuggestWidget.background#39384e
  • editorSuggestWidget.foreground#929bb6
  • editorSuggestWidget.selectedBackground#141127
  • editorWarning.foreground#ffb378
  • editorWhitespace.foreground#cbe3e71A
  • editorWidget.background#39384e
  • errorForeground#ff5458
  • extensionButton.prominentBackground#62d19690
  • extensionButton.prominentForeground#929bb6
  • extensionButton.prominentHoverBackground#62d19660
  • focusBorder#6a6c8a
  • foreground#929bb6
  • gitDecoration.conflictingResourceForeground#ffb378
  • gitDecoration.deletedResourceForeground#ff5458
  • gitDecoration.ignoredResourceForeground#6a6c8a
  • gitDecoration.modifiedResourceForeground#63f2f1
  • gitDecoration.untrackedResourceForeground#62d196
  • input.background#1e1c31
  • input.border#1c1c27
  • input.foreground#929bb6
  • input.placeholderForeground#6a6c8a
  • inputOption.activeBorder#65b2ff
  • inputValidation.errorBackground#1e1c31
  • inputValidation.errorBorder#ff5458
  • inputValidation.errorForeground#ff5458
  • inputValidation.infoBackground#1e1c31
  • inputValidation.infoBorder#65b2ff
  • inputValidation.infoForeground#65b2ff
  • inputValidation.warningBackground#1e1c31
  • inputValidation.warningBorder#ffb378
  • inputValidation.warningForeground#ffb378
  • list.activeSelectionBackground#141127
  • list.activeSelectionForeground#929bb6
  • list.dropBackground#141127
  • list.errorForeground#ff5458
  • list.focusBackground#56557575
  • list.highlightForeground#63f2f1
  • list.hoverBackground#56557575
  • list.inactiveSelectionBackground#56557575
  • list.warningForeground#ffb378
  • listFilterWidget.background#1e1c31
  • listFilterWidget.noMatchesOutline#ff5458
  • listFilterWidget.outline#141127
  • merge.currentHeaderBackground#62d19690
  • merge.incomingHeaderBackground#65b2ff90
  • notification.background#1e1c31
  • notification.buttonBackground#141127
  • notification.buttonForeground#929bb6
  • notification.buttonHoverBackground#56557575
  • notification.errorBackground#ff5458
  • notification.errorForeground#1e1c31
  • notification.foreground#929bb6
  • notification.infoBackground#65b2ff
  • notification.infoForeground#1e1c31
  • notification.warningBackground#ffb378
  • notification.warningForeground#1e1c31
  • notificationCenter.border#39384e
  • notificationCenterHeader.background#1e1c31
  • notificationCenterHeader.foreground#929bb6
  • notificationLink.foreground#63f2f1
  • notifications.background#1e1c31
  • notifications.border#39384e
  • notifications.foreground#929bb6
  • notificationsErrorIcon.foreground#ff5458
  • notificationsInfoIcon.foreground#65b2ff
  • notificationsWarningIcon.foreground#ffb378
  • notificationToast.border#39384e
  • panel.background#1e1c31
  • panel.border#65b2ff
  • panelInput.border#929bb6
  • panelTitle.activeBorder#906cff
  • panelTitle.activeForeground#929bb6
  • panelTitle.inactiveForeground#6a6c8a
  • peekView.border#141127
  • peekViewEditor.background#1e1c31
  • peekViewEditor.matchHighlightBackground#ffe9aa80
  • peekViewResult.background#39384e
  • peekViewResult.fileForeground#929bb6
  • peekViewResult.lineForeground#929bb6
  • peekViewResult.matchHighlightBackground#ffe9aa80
  • peekViewResult.selectionBackground#141127
  • peekViewResult.selectionForeground#929bb6
  • peekViewTitle.background#1c1c27
  • peekViewTitleDescription.foreground#6a6c8a
  • peekViewTitleLabel.foreground#929bb6
  • pickerGroup.border#65b2ff
  • pickerGroup.foreground#63f2f1
  • progressBar.background#906cff
  • scrollbar.shadow#444444
  • selection.background#65b2ff
  • settings.checkboxBackground#39384e
  • settings.checkboxBorder#1c1c27
  • settings.checkboxForeground#929bb6
  • settings.dropdownBackground#39384e
  • settings.dropdownBorder#1c1c27
  • settings.dropdownForeground#929bb6
  • settings.headerForeground#929bb6
  • settings.modifiedItemIndicator#ffb378
  • settings.numberInputBackground#39384e
  • settings.numberInputBorder#1c1c27
  • settings.numberInputForeground#929bb6
  • settings.textInputBackground#39384e
  • settings.textInputBorder#1c1c27
  • settings.textInputForeground#929bb6
  • sideBar.background#39384e
  • sideBarSectionHeader.background#1e1c31
  • sideBarSectionHeader.border#1c1c27
  • sideBarTitle.foreground#929bb6
  • statusBar.background#1c1c27
  • statusBar.debuggingBackground#ff5458
  • statusBar.debuggingForeground#1c1c27
  • statusBar.foreground#929bb6
  • statusBar.noFolderBackground#1c1c27
  • statusBar.noFolderForeground#929bb6
  • statusBarItem.prominentBackground#ff5458
  • statusBarItem.prominentHoverBackground#ffb378
  • statusBarItem.remoteBackground#65b2ff
  • statusBarItem.remoteForeground#1e1c31
  • tab.activeBackground#1e1c31
  • tab.activeBorderTop#906cff80
  • tab.activeForeground#929bb6
  • tab.border#1c1c27
  • tab.inactiveBackground#39384e
  • tab.inactiveForeground#6a6c8a
  • terminal.ansiBlack#141127
  • terminal.ansiBlue#65b2ff
  • terminal.ansiBrightBlack#565575
  • terminal.ansiBrightBlue#91ddff
  • terminal.ansiBrightCyan#aaffe4
  • terminal.ansiBrightGreen#95ffa4
  • terminal.ansiBrightMagenta#c991e1
  • terminal.ansiBrightRed#ff8080
  • terminal.ansiBrightWhite#cbe3e7
  • terminal.ansiBrightYellow#ffe9aa
  • terminal.ansiCyan#63f2f1
  • terminal.ansiGreen#62d196
  • terminal.ansiMagenta#906cff
  • terminal.ansiRed#ff5458
  • terminal.ansiWhite#a6b3cc
  • terminal.ansiYellow#ffb378
  • terminal.background#1e1c31
  • terminal.border#929bb6
  • terminal.foreground#929bb6
  • terminal.selectionBackground#14112750
  • textBlockQuote.background#39384e
  • titleBar.activeBackground#39384e
  • titleBar.activeForeground#929bb6
  • titleBar.inactiveBackground#1c1c27
  • titleBar.inactiveForeground#6a6c8a
  • walkThrough.embeddedEditorBackground#39384e
  • welcomePage.buttonBackground#141127
  • welcomePage.buttonHoverBackground#56557575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#65b2ff
source#929bb6
meta.diff, meta.diff.header#6a6c8a
markup.inserted#62d196
markup.deleted#ff5458
markup.changed#ffb378
invalid#ff5458underline italic
invalid.deprecated#929bb6underline italic
entity.name.filename#ffe9aa
markup.error#ff5458
markup.underlineunderline
markup.bold#ffb378bold
markup.heading#65b2ffbold
markup.italic#ffe9aaitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#63f2f1
markup.inline.raw, markup.raw.restructuredtext#62d196
markup.underline.link, markup.underline.link.image#63f2f1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#906cff
entity.name.directive.restructuredtext, markup.quote#ffe9aaitalic
meta.separator.markdown#6a6c8a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#62d196
punctuation.definition.constant.restructuredtext#65b2ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#65b2ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#929bb6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffe9aa
entity.name.type.class, entity.name.class#63f2f1normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#65b2ffitalic
entity.other.inherited-class#63f2f1italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6a6c8a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#906cff
comment.block.documentation entity.name.type#63f2f1italic
comment.block.documentation entity.name.type punctuation.definition.bracket#63f2f1
comment.block.documentation variable#ffb378italic
constant, variable.other.constant#65b2ff
constant.character.escape, constant.character.string.escape, constant.regexp#906cff
entity.name.tag#906cff
entity.other.attribute-name.parent-selector#906cff
entity.other.attribute-name#62d196italic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#62d196
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#ffb378italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#62d196italic
meta.decorator variable.other.object#62d196
keyword, punctuation.definition.keyword#906cff
keyword.control.new, keyword.operator.newbold
meta.selector#906cff
support#63f2f1italic
support.function.magic, support.variable, variable.other.predefined#65b2ffregular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#906cff
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#929bb6
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#906cff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#63f2f1
constant.other.date, constant.other.timestamp#ffb378
variable.other.alias.yaml#62d196italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#906cffregular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#63f2f1italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffb378
storage.modifier#906cff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffe9aa
punctuation.definition.group.capture.regexp#906cff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff5458
punctuation.definition.character-class.regexp#63f2f1
punctuation.definition.group.regexp#ffb378
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff5458
meta.assertion.look-ahead.regexp#62d196
string#ffe9aa
punctuation.definition.string.begin, punctuation.definition.string.end#91ddff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#65b2ff
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6a6c8a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#929bb6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffb378italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#929bb6normal
meta.selectionset.graphql variable#ffe9aa
meta.selectionset.graphql meta.arguments variable#929bb6
entity.name.fragment.graphql, variable.fragment.graphql#63f2f1
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#929bb6
source.shell variable.other#65b2ff
support.constant#65b2ffnormal
meta.scope.prerequisites.makefile#ffe9aa
meta.attribute-selector.scss#ffe9aa
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#929bb6
meta.preprocessor.haskell#6a6c8a