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#3A3F5C66
  • activityBar.activeBorder#D48CB8cc
  • activityBar.background#222433
  • activityBar.foreground#D5D8E8
  • activityBar.inactiveForeground#6B7094
  • activityBarBadge.background#D48CB8
  • activityBarBadge.foreground#1A1B26
  • badge.background#3A3F5C
  • badge.foreground#D5D8E8
  • breadcrumb.activeSelectionForeground#D5D8E8
  • breadcrumb.background#1A1B26
  • breadcrumb.focusForeground#D5D8E8
  • breadcrumb.foreground#6B7094
  • breadcrumbPicker.background#12131C
  • button.background#3A3F5C
  • button.foreground#D5D8E8
  • contrastBorder#12131C
  • debugToolBar.background#151621
  • diffEditor.insertedTextBackground#7FD99A33
  • diffEditor.removedTextBackground#E06A7A80
  • dropdown.background#222433
  • dropdown.border#12131C
  • dropdown.foreground#D5D8E8
  • editor.background#1A1B26
  • editor.findMatchBackground#E8A86Acc
  • editor.findMatchHighlightBackground#D5D8E866
  • editor.findRangeHighlightBackground#222433
  • editor.foldBackground#151621
  • editor.foreground#D5D8E8
  • editor.hoverHighlightBackground#12131C
  • editor.inactiveSelectionBackground#3A3F5C59
  • editor.lineHighlightBackground#222433
  • editor.lineHighlightBorder#1A1B26
  • editor.rangeHighlightBackground#8B9FD426
  • editor.selectionBackground#3A3F5C
  • editor.selectionHighlightBackground#2A2D42
  • editor.snippetFinalTabstopHighlightBackground#1A1B26
  • editor.snippetFinalTabstopHighlightBorder#7FD99A
  • editor.snippetTabstopHighlightBackground#1A1B26
  • editor.snippetTabstopHighlightBorder#6B7094
  • editor.wordHighlightBackground#6CB4EE80
  • editor.wordHighlightStrongBackground#7FD99A80
  • editorBracketHighlight.foreground1#D48CB8
  • editorBracketHighlight.foreground2#6CB4EE
  • editorBracketHighlight.foreground3#7FD99A
  • editorBracketHighlight.foreground4#D4C878
  • editorBracketHighlight.foreground5#E8A86A
  • editorBracketHighlight.foreground6#8B9FD4
  • editorBracketHighlight.unexpectedBracket.foreground#E06A7A
  • editorBracketMatch.background#3A3F5C73
  • editorBracketMatch.border#D48CB8
  • editorCodeLens.foreground#6B7094
  • editorCursor.foreground#6CB4EE
  • editorError.foreground#E06A7A
  • editorGroup.border#3A3F5C
  • editorGroup.dropBackground#3A3F5C70
  • editorGroupHeader.tabsBackground#12131C
  • editorGutter.addedBackground#7FD99Acc
  • editorGutter.deletedBackground#E06A7Acc
  • editorGutter.modifiedBackground#6CB4EEcc
  • editorHoverWidget.background#1A1B26
  • editorHoverWidget.border#6B7094
  • editorIndentGuide.activeBackground#D5D8E873
  • editorIndentGuide.background#D5D8E818
  • editorInlineSuggest.background#151621
  • editorInlineSuggest.foreground#D5D8E88c
  • editorLineNumber.foreground#6B7094
  • editorLink.activeForeground#6CB4EE
  • editorMarkerNavigation.background#151621
  • editorOverviewRuler.addedForeground#7FD99Acc
  • editorOverviewRuler.border#12131C
  • editorOverviewRuler.currentContentForeground#7FD99A
  • editorOverviewRuler.deletedForeground#E06A7Acc
  • editorOverviewRuler.errorForeground#E06A7Acc
  • editorOverviewRuler.incomingContentForeground#8B9FD4
  • editorOverviewRuler.infoForeground#6CB4EEcc
  • editorOverviewRuler.modifiedForeground#6CB4EEcc
  • editorOverviewRuler.selectionHighlightForeground#E8A86A
  • editorOverviewRuler.warningForeground#E8A86Acc
  • editorOverviewRuler.wordHighlightForeground#6CB4EE
  • editorOverviewRuler.wordHighlightStrongForeground#7FD99A
  • editorRuler.foreground#D5D8E818
  • editorSuggestWidget.background#151621
  • editorSuggestWidget.foreground#D5D8E8
  • editorSuggestWidget.selectedBackground#3A3F5C
  • editorWarning.foreground#6CB4EE
  • editorWhitespace.foreground#D5D8E818
  • editorWidget.background#151621
  • errorForeground#E06A7A
  • extensionButton.prominentBackground#7FD99Ae6
  • extensionButton.prominentForeground#D5D8E8
  • extensionButton.prominentHoverBackground#7FD99A99
  • focusBorder#6B7094
  • foreground#D5D8E8
  • gitDecoration.conflictingResourceForeground#E8A86A
  • gitDecoration.deletedResourceForeground#E06A7A
  • gitDecoration.ignoredResourceForeground#6B7094
  • gitDecoration.modifiedResourceForeground#6CB4EE
  • gitDecoration.untrackedResourceForeground#7FD99A
  • input.background#1A1B26
  • input.border#12131C
  • input.foreground#D5D8E8
  • input.placeholderForeground#6B7094
  • inputOption.activeBorder#8B9FD4
  • inputValidation.errorBorder#E06A7A
  • inputValidation.infoBorder#D48CB8
  • inputValidation.warningBorder#E8A86A
  • list.activeSelectionBackground#3A3F5C99
  • list.activeSelectionForeground#D5D8E8
  • list.dropBackground#3A3F5C
  • list.errorForeground#E06A7A
  • list.focusBackground#222433
  • list.highlightForeground#6CB4EE
  • list.hoverBackground#3A3F5Ca6
  • list.inactiveSelectionBackground#3A3F5C66
  • list.warningForeground#E8A86A
  • listFilterWidget.background#222433
  • listFilterWidget.noMatchesOutline#E06A7A
  • listFilterWidget.outline#2A2D42
  • merge.currentHeaderBackground#7FD99Ae6
  • merge.incomingHeaderBackground#8B9FD4e6
  • notification.background#1A1B26
  • notification.buttonBackground#3A3F5C
  • notification.buttonForeground#D5D8E8
  • notification.buttonHoverBackground#222433
  • notification.errorBackground#E06A7A
  • notification.errorForeground#D5D8E8
  • notification.foreground#D5D8E8
  • notification.infoBackground#6CB4EE
  • notification.infoForeground#1A1B26
  • notification.warningBackground#E8A86A
  • notification.warningForeground#1A1B26
  • panel.background#1A1B26
  • panel.border#D48CB8
  • panelTitle.activeBorder#D48CB8
  • panelTitle.activeForeground#D5D8E8
  • panelTitle.inactiveForeground#D5D8E8cc
  • peekView.border#3A3F5C
  • peekViewEditor.background#1A1B26
  • peekViewEditor.matchHighlightBackground#D4C878cc
  • peekViewResult.background#151621
  • peekViewResult.fileForeground#D5D8E8
  • peekViewResult.lineForeground#D5D8E8
  • peekViewResult.matchHighlightBackground#D4C878cc
  • peekViewResult.selectionBackground#3A3F5C
  • peekViewResult.selectionForeground#D5D8E8
  • peekViewTitle.background#12131C
  • peekViewTitleDescription.foreground#6B7094
  • peekViewTitleLabel.foreground#D5D8E8
  • pickerGroup.border#8B9FD4
  • pickerGroup.foreground#6CB4EE
  • progressBar.background#D48CB8
  • selection.background#8B9FD4
  • settings.checkboxBackground#151621
  • settings.checkboxBorder#12131C
  • settings.checkboxForeground#D5D8E8
  • settings.dropdownBackground#151621
  • settings.dropdownBorder#12131C
  • settings.dropdownForeground#D5D8E8
  • settings.headerForeground#D5D8E8
  • settings.modifiedItemForeground#E8A86A
  • settings.modifiedItemIndicator#E8A86A
  • settings.numberInputBackground#151621
  • settings.numberInputBorder#12131C
  • settings.numberInputForeground#D5D8E8
  • settings.textInputBackground#151621
  • settings.textInputBorder#12131C
  • settings.textInputForeground#D5D8E8
  • sideBar.background#151621
  • sideBar.foreground#D5D8E8
  • sideBarSectionHeader.background#1A1B26
  • sideBarSectionHeader.border#12131C
  • sideBarTitle.foreground#D5D8E8
  • statusBar.background#12131C
  • statusBar.debuggingBackground#E06A7A
  • statusBar.debuggingForeground#12131C
  • statusBar.foreground#D5D8E8
  • statusBar.noFolderBackground#12131C
  • statusBar.noFolderForeground#D5D8E8
  • statusBarItem.prominentBackground#E06A7A
  • statusBarItem.prominentHoverBackground#E8A86A
  • statusBarItem.remoteBackground#8B9FD4
  • statusBarItem.remoteForeground#D5D8E8
  • tab.activeBackground#1A1B26
  • tab.activeBorderTop#D48CB8cc
  • tab.activeForeground#D5D8E8
  • tab.border#12131C
  • tab.inactiveBackground#151621
  • tab.inactiveForeground#6B7094
  • terminal.ansiBlack#151621
  • terminal.ansiBlue#6CB4EE
  • terminal.ansiBrightBlack#6B7094
  • terminal.ansiBrightBlue#7CC4F8
  • terminal.ansiBrightCyan#9EDCF0
  • terminal.ansiBrightGreen#8FE8AA
  • terminal.ansiBrightMagenta#9BAFE4
  • terminal.ansiBrightRed#F07888
  • terminal.ansiBrightWhite#F0F2FA
  • terminal.ansiBrightYellow#E4D888
  • terminal.ansiCyan#7EC8E8
  • terminal.ansiGreen#7FD99A
  • terminal.ansiMagenta#8B9FD4
  • terminal.ansiRed#E06A7A
  • terminal.ansiWhite#D5D8E8
  • terminal.ansiYellow#D4C878
  • terminal.background#1A1B26
  • terminal.foreground#D5D8E8
  • terminal.selectionBackground#6B709473
  • terminalCursor.background#151621
  • terminalCursor.foreground#D5D8E8
  • titleBar.activeBackground#151621
  • titleBar.activeForeground#D5D8E8
  • titleBar.inactiveBackground#12131C
  • titleBar.inactiveForeground#6B7094
  • walkThrough.embeddedEditorBackground#151621

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8B9FD4
source#D5D8E8
meta.diff, meta.diff.header#6B7094
markup.inserted#7FD99A
markup.deleted#E06A7A
markup.changed#E8A86A
invalid#E06A7Aunderline italic
invalid.deprecated#D5D8E8underline italic
entity.name.filename#D4C878
markup.error#E06A7A
markup.underlineunderline
markup.bold#E8A86Abold
markup.heading#8B9FD4bold
markup.italic#D4C878italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6CB4EE
markup.inline.raw, markup.raw.restructuredtext#7FD99A
markup.underline.link, markup.underline.link.image#6CB4EE
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#D48CB8
entity.name.directive.restructuredtext, markup.quote#D4C878italic
meta.separator.markdown#6B7094
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7FD99A
punctuation.definition.constant.restructuredtext#8B9FD4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8B9FD4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#D5D8E8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#D4C878
entity.name.type.class, entity.name.class#6CB4EEnormal
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#8B9FD4italic
entity.other.inherited-class#6CB4EEitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6B7094
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#D48CB8
comment.block.documentation entity.name.type#6CB4EEitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6CB4EE
comment.block.documentation variable#E8A86Aitalic
constant, variable.other.constant#8B9FD4
constant.character.escape, constant.character.string.escape, constant.regexp#D48CB8
entity.name.tag#D48CB8
entity.other.attribute-name.parent-selector#D48CB8
entity.other.attribute-name.id#D4C878italic
entity.other.attribute-name#7FD99Aitalic
meta.tag.inline source#D4C878
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#7FD99A
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#E8A86Aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#7FD99Aitalic
meta.decorator variable.other.object#7FD99A
keyword, punctuation.definition.keyword#D48CB8
keyword.control.new, keyword.operator.newbold
meta.selector#D48CB8
support#6CB4EEitalic
support.function.magic, support.variable, variable.other.predefined#8B9FD4regular
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#D48CB8
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#D5D8E8
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#D48CB8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6CB4EE
constant.other.date, constant.other.timestamp#E8A86A
variable.other.alias.yaml#7FD99Aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#D48CB8regular
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#6CB4EEitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E8A86A
storage.modifier#D48CB8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D4C878
punctuation.definition.group.capture.regexp#D48CB8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E06A7A
punctuation.definition.character-class.regexp#6CB4EE
punctuation.definition.group.regexp#E8A86A
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E06A7A
meta.assertion.look-ahead.regexp#7FD99A
string#D4C878
punctuation.definition.string.begin, punctuation.definition.string.end#D4C878
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6CB4EE
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#6B7094
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#D5D8E8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E8A86Aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D5D8E8normal
meta.selectionset.graphql variable#D4C878
meta.selectionset.graphql meta.arguments variable#D5D8E8
entity.name.fragment.graphql, variable.fragment.graphql#6CB4EE
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.section.embedded.begin.html, punctuation.section.embedded.end.html#D48CB8
meta.embedded.line.cshtml, source.cs meta.embedded.line, string.quoted.double.cshtml, entity.name.tag.cshtml#6CB4EE
keyword.other.DML.sql, keyword.other.DDL.create.II.sql, keyword.other.DDL.create.sql, keyword.other.DDL.sql, keyword.other.sql#D48CB8
support.function.sql, support.type.sql#6CB4EEitalic
string.quoted.single.sql, string.quoted.double.sql#D4C878
support.type.property-name.json#6CB4EE
constant.numeric.json, constant.language.json#E8A86A
entity.name.type.interface, entity.name.type.alias, support.type.builtin.ts, support.type.primitive.ts, support.type.builtin.tsx, support.type.primitive.tsx#6CB4EEitalic
entity.name.namespace, entity.name.scope-resolution#8B9FD4
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical#D48CB8
constant.language.boolean, constant.language.null, constant.language.undefined#8B9FD4italic
constant.numeric, constant.numeric.integer, constant.numeric.float#E8A86A
support.type.property-name.css, meta.property-name.css#6CB4EE
support.constant.property-value.css, constant.other.color.rgb-value.css#D4C878
Nebula Aura Theme by Nebula Themes - VS Code Theme