Variant Theme
Publisher: variantThemes in package: 1
Fresh theme based on the colors of variant.no.
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#33333D
- activityBar.border#33333D
- activityBar.foreground#03DAC6
- activityBarBadge.background#E6E6E6
- activityBarBadge.foreground#33333D
- badge.background#ACDDD8
- badge.foreground#33333D
- button.background#7B73EA
- button.foreground#FFFFFF
- button.hoverBackground#868688
- diffEditor.insertedTextBackground#59FDED66
- diffEditor.removedTextBackground#FF016666
- editor.background#33333D
- editor.findMatchBackground#6200EE90
- editor.findMatchHighlightBackground#FFB86C40
- editor.foreground#E6E6E6
- editor.inactiveSelectionBackground#FFB86C40
- editor.lineHighlightBackground#45454B
- editor.selectionBackground#FFB86C40
- editor.selectionHighlightBackground#FFB86C40
- editor.wordHighlightBackground#DEC36860
- editor.wordHighlightStrongBackground#FF016670
- editorBracketMatch.border#03DAC6
- editorCodeLens.foreground#FFB86C40
- editorCursor.foreground#FF4343
- editorError.border#FF0166
- editorError.foreground#FF0166
- editorGutter.addedBackground#59FDED
- editorGutter.deletedBackground#FF0166
- editorGutter.modifiedBackground#FFCC95
- editorHoverWidget.background#45454B
- editorOverviewRuler.addedForeground#59FDED
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#FF0166
- editorOverviewRuler.errorForeground#FF0166
- editorOverviewRuler.infoForeground#6F66E4
- editorOverviewRuler.modifiedForeground#FFCC95
- editorOverviewRuler.warningForeground#FFCC95
- editorRuler.foreground#6200EE60
- editorSuggestWidget.selectedBackground#03DAC699
- editorWarning.border#FFCC95
- editorWarning.foreground#FFCC95
- editorWhitespace.foreground#555568
- editorWidget.background#33333D
- editorWidget.border#5B5B62
- errorForeground#FF4343
- extensionButton.prominentBackground#7B73EA
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#868688
- foreground#E6E6E6
- gitDecoration.ignoredResourceForeground#757575
- list.activeSelectionBackground#33333D
- list.activeSelectionForeground#03DAC6
- list.focusBackground#33333D
- list.focusForeground#03DAC6
- list.highlightForeground#ACDDD8
- list.hoverBackground#33333D
- list.hoverForeground#CDCDCD
- list.inactiveSelectionBackground#33333D
- list.inactiveSelectionForeground#03DAC6
- merge.currentContentBackground#6200EE40
- merge.currentHeaderBackground#6200EE90
- merge.incomingContentBackground#FFB86C40
- merge.incomingHeaderBackground#45A9F990
- progressBar.background#893DF6
- scrollbar.shadow#33333D
- scrollbarSlider.activeBackground#757575
- scrollbarSlider.background#5B5B6299
- scrollbarSlider.hoverBackground#757575
- sideBar.background#33333D
- sideBar.border#33333D
- sideBar.foreground#BBBBBB
- statusBar.background#33333D
- statusBar.debuggingBackground#03DAC6
- statusBar.debuggingForeground#33333D
- statusBar.foreground#E6E6E6
- statusBar.noFolderBackground#33333D
- statusBar.noFolderForeground#E6E6E6
- tab.activeBackground#33333D
- tab.activeBorder#00000000
- tab.activeForeground#03DAC6
- tab.inactiveBackground#33333D
- tab.inactiveForeground#E6E6E6
- terminal.ansiBlue#7B73EA
- terminal.ansiBrightBlack#757575
- terminal.ansiBrightBlue#ACDDD8
- terminal.ansiBrightCyan#893DF6
- terminal.ansiBrightGreen#03DAC6
- terminal.ansiBrightMagenta#FF438E
- terminal.ansiBrightRed#E60057
- terminal.ansiBrightWhite#E6E6E6
- terminal.ansiBrightYellow#FFF5D2
- terminal.ansiCyan#893DF6
- terminal.ansiGreen#03DAC6
- terminal.ansiMagenta#FF0166
- terminal.ansiRed#E60057
- terminal.ansiWhite#CDCDCD
- terminal.ansiYellow#DEC368
- terminalCursor.background#E6E6E6
- terminalCursor.foreground#FF4343
- titleBar.activeBackground#33333D
- titleBar.activeForeground#E6E6E6
- titleBar.inactiveBackground#33333D
- titleBar.inactiveForeground#E6E6E6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #868688 | italic |
| keyword | #FF0166 | — |
| keyword.control, keyword.operator.new | #FF0166 | — |
| keyword.operator | #E6E6E6 | — |
| keyword.operator.logical, keyword.operator.comparison | #FFF5D2 | — |
| storage | #03DAC6 | — |
| storage.type | #FF0166 | — |
| constant | #FF0166 | — |
| constant.language | #03DAC6 | italic |
| constant.character.escape | #03DAC6 | — |
| variable | #E6E6E6 | — |
| variable.parameter | #BBBBBB | — |
| meta.object-binding-pattern-variable.js variable | #FFF5D2 | — |
| variable.other.constant, variable.language.this, variable.interpolation | #FFF5D2 | — |
| variable.other.object | #FFF5D2 | — |
| variable.other.property | #FFFFFF | — |
| invalid.illegal | — | — |
| invalid.deprecated | — | — |
| string | #03DAC6 | — |
| punctuation.definition.template-expression | #FF0166 | — |
| support | #FFF5D2 | — |
| support.class | #FFF5D2 | — |
| support.type.object.module.js | #893DF6 | — |
| support.function | #ACDDD8 | — |
| entity.name.function | #ACDDD8 | — |
| entity.other.inherited-class | #FF438E | — |
| entity.name.tag.yaml | #FFF5D2 | — |
| meta.decorator punctuation.decorator | #FF0166 | — |
| meta.decorator variable | #ACDDD8 | — |
| keyword.other.special-method | #7B73EA | — |
| keyword.control.at-rule | #893DF6 | — |
| keyword.other.important | #FF4343 | — |
| variable.interpolation | #FF0166 | — |
| meta.source.handlebars entity.name.tag | #ACDDD8 | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #FFF5D2 | italic |
| entity.name.function.expression | #FF0166 | — |
| entity.unescaped.expression | #893DF6 | — |
| constant.other.symbol | #03DAC6 | — |
| entity.expression variable.parameter.name | #DEC368 | — |
| entity.expression variable.parameter.value | #ACDDD8 | — |
| entity.expression support.function.builtin | #FF438E | — |
| entity.name.tag.html | #FFF5D2 | — |
| entity.other.attribute-name.handlebars | #FFF5D2 | — |
| support.class.component | #FF0166 | italic |
| meta.tag.js entity.name.tag | #FFF5D2 | — |
| entity.other.attribute-name | #DEC368 | — |
| markup.bold | #DEC368 | — |
| punctuation.definition.bold.markdown | #FFF5D2 | — |
| markup.changed | #FF0166 | — |
| markup.deleted | #E60057 | — |
| markup.italic | #FF438E | italic |
| punctuation.definition.italic.markdown | #FF0166 | italic |
| markup.inserted | #03DAC6 | — |
| punctuation.definition.heading | #03DAC6 | — |
| entity.name.section.markdown | #BBBBBB | — |
| markup.quote | #DEC368 | — |
| markup.inline.raw | #03DAC6 | italic |
| beginning.punctuation.definition.list | #FF0166 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #757575 | — |
| fenced_code.block.language | #BBBBBB | italic |
| string.other.link | #BBBBBB | normal |
| meta.link.inline.markdown | #7B73EA | italic |
| text.html.markdown punctuation.definition.string | #FFF5D2 | — |
| entity.name.type.class.js | #ACDDD8 | — |
| keyword.control.as.js | #FF438E | — |
| keyword.control.from.js | #FF438E | — |
| keyword.control.export.js | #893DF6 | — |
| variable.language.this.js | — | italic |
| support.class.console.js | — | italic |
| entity.name.tag.js, support.class.component.js | #E60057 | — |
| variable.language.super.js | #7B73EA | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #E60057 | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml | #E60057 | — |
| entity.name.tag.xml, meta.tag.xml | #E60057 | — |
| entity.name.tag.css | #E60057 | — |
| support.type.property-name.css | #E6E6E6 | — |
| variable.scss | #FF438E | — |
| entity.name.tag.reference.scss | #E60057 | — |
| keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css | #DEC368 | — |
| string.regexp | #ACDDD8 | — |
| string.regexp keyword, string.regexp keyword.control | #FF0166 | normal |
| string.regexp keyword.operator | #FF438E | — |
| comment.block.documentation | — | normal |
| entity.name.type.instance.jsdoc punctuation.definition | #FFF5D2 | italic |
| entity.name.type.instance.jsdoc | #CDCDCD | italic |
| comment.block storage | #FFF5D2 | — |
| comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string | #FF438E | — |