Potion Theme
Publisher: panoplyThemes in package: 1
A cosmic pastel based theme on a obsidian black workspace.
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#080808
- activityBar.border#302f2f
- activityBarBadge.background#0288d1
- button.background#1976d2
- button.foreground#ffffff
- button.hoverBackground#1e88e5
- debugToolBar.background#0c0c0c
- debugToolBar.border#080808
- dropdown.background#080808
- dropdown.border#302f2f
- dropdown.foreground#d4d4d4
- editor.background#080808
- editor.foreground#f2f2f2
- editor.lineHighlightBackground#ffffff15
- editor.selectionBackground#303030
- editorCodeLens.foreground#3f3e3e
- editorCursor.foreground#ffffff
- editorGroupHeader.tabsBackground#080808
- editorGutter.background#080808
- editorHint.border#ff0000
- editorHoverWidget.background#161616
- editorIndentGuide.activeBackground1#4b4a4a
- editorIndentGuide.background1#2b2727
- editorLineNumber.activeForeground#b4b3b3
- editorLineNumber.foreground#3f3e3e
- editorRuler.foreground#151719
- editorSuggestWidget.background#101011
- editorSuggestWidget.border#3f3e3e
- editorSuggestWidget.foreground#fafafa
- editorWhitespace.foreground#424242
- focusBorder#595959
- foreground#d4d4d4
- input.background#0a0a0a
- input.border#302f2f
- inputOption.activeBorder#60bbf0a6
- panel.background#080808
- panel.border#302f2f
- panelTitle.activeBorder#60bbf0a6
- sideBar.background#080808
- sideBar.border#302f2f
- sideBar.foreground#d4d4d4
- sideBarSectionHeader.background#111111
- sideBarSectionHeader.border#302f2f
- statusBar.background#080808
- statusBar.border#302f2f
- tab.activeBackground#080808
- tab.activeBorderTop#2e8bc1
- tab.border#302f2f
- tab.hoverBackground#080808
- tab.inactiveBackground#080808
- tab.inactiveForeground#d4d4d4
- tab.unfocusedActiveBorder#111111
- terminal.ansiBlack#000000
- terminal.ansiBlue#42a5f5
- terminal.ansiBrightBlack#807e7b
- terminal.ansiBrightBlue#29b6f6
- terminal.ansiBrightCyan#4dd0e1
- terminal.ansiBrightGreen#8bc34a
- terminal.ansiBrightMagenta#e1bee7
- terminal.ansiBrightRed#e57373
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fff59d
- terminal.ansiCyan#00bcd4
- terminal.ansiGreen#9ccc65
- terminal.ansiMagenta#ce93d8
- terminal.ansiRed#f44336
- terminal.ansiWhite#e0e0e0
- terminal.ansiYellow#ffeb3b
- terminal.background#080808
- terminal.foreground#e0e0e0
- titleBar.activeBackground#080808
- titleBar.activeForeground#b4b3b3
- titleBar.border#302f2f
- widget.shadow#080808
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #888888 | — |
| string | #FFF59D | — |
| variable | — | |
| keyword | #F92672 | — |
| storage | #F92672 | |
| constant.numeric | #F48FB1 | — |
| constant.language | #F48FB1 | — |
| constant.character, constant.other | #F48FB1 | — |
| entity.name.class | #9EE34F | underline |
| entity.other.inherited-class | #9EE34F | italic underline |
| entity.name.function | #9EE34F | |
| entity.name.tag | #F92672 | |
| entity.other.attribute-name | #9EE34F | |
| support.function | #81D4FA | |
| support.constant | #81D4FA | |
| support.type, support.class | #81D4FA | |
| support.other.variable | — | |
| support.other.namespace, entity.name.type.namespace | #FFB2F9 | — |
| string.template meta.template.expression | #FFFFFF | — |
| invalid | #F8F8F0 | |
| invalid.deprecated | #F8F8F0 | — |
| text source | — | — |
| meta.diff, meta.diff.header | #E0EDDD | bold |
| meta.diff, meta.diff.range | #3BC0F0 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| support.function.misc.css, support.constant.property-value.css, support.constant.font-name.css, support.constant.vendored.property-value.css, support.type.property-name.media.css, meta.property-value.css, meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css | #FFF59D | |
| punctuation.definition.constant.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, keyword.other.unit.em.css | #D66088 | — |
| constant.numeric.css, constant.other.color.rgb-value.hex.css | #978FFF | — |
| support.type.property-name.css, entity.other.attribute-name.css, meta.property-list.css meta.property-name.css | #91EBC2 | |
| entity.name.tag.css, variable.css, entity.other.attribute-name.class.css, keyword.operator.pattern.css | #FF93BC | — |
| variable.other.css, meta.function.misc.css variable.parameter.misc.css, meta.at-rule.header.css | #EFEFEF | |
| variable.css | #CA99FF | — |
| punctuation.separator.key-value.css, keyword.control.at-rule.media.css, variable.parameter.misc.css, meta.function.misc.css punctuation.separator.list.comma.css, constant.numeric.css meta.property-list.css meta.property-value.css | #F92672 | — |
| support.function.misc.css, support.function.calc.css, support.function.shape.css, support.function.transform.css | #9EE34F | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, punctuation.definition.entity.css entity.other.attribute-name.pseudo-element.css, punctuation.definition.entity.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-class.css, punctuation.definition.entity.css | #93bcff | |
| entity.other.keyframe-offset.css | #93bcff | — |
| entity.other.attribute-name.id.css | #f2f2f2 | |
| punctuation.colon.graphql, punctuation.graphql | #F92672 | — |
| variable.parameter.graphql | #FFAB40 | |
| punctuation.comma.graphql, meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #FAFAFA | — |
| meta.arguments.graphql variable.graphql | #EA2AFF | — |
| meta.selectionset.graphql meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #FBEB93 | — |
| meta.selectionset.graphql support.type.graphql | #9EE34F | — |
| entity.name.function.graphql | #AC8DE7 | — |
| keyword.operation.graphql | #FF7DFB | — |
| support.type.builtin.graphql, support.type.graphql | — | |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #BECAFF | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #FFF78C | — |
| punctuation.separator.key-value.html | #FF93BC | — |
| entity.name.tag.html | #FF93BC | — |
| entity.other.attribute-name.html | #91EBC2 | — |
| string.quoted.double.html | #FFF78C | — |
| constant.language.boolean.true.html, constant.language.boolean.false.html | #8970F8 | |
| storage.type.type.js, storage.modifier.js, storage.type.function.arrow.js, keyword.control.import.js, keyword.operator.logical.js, keyword.operator.expression.keyof.js, punctuation.separator.key-value.js, punctuation.accessor.js, punctuation.destructuring.js, punctuation.accessor.optional.js, punctuation.separator.comma.js, punctuation.separator.label.js, variable.language.super.js | #F92672 | — |
| entity.name.type.module.js, storage.type.js, storage.type.interface.js, storage.type.class.js, storage.type.function.js, storage.type.namespace.js, support.type.builtin.js, support.class.builtin.js, support.type.primitive.js, support.class.promise.js, variable.other.enummember.js, variable.other.object.js | #8BD3FD | |
| meta.namespace.declaration.js entity.name.type.module.js | #f2f2f2 | — |
| variable.language.this.js, variable.parameter.js, variable.other.readwrite.js meta.array.literal.js, variable.language.super.js | #FFAB40 | — |
| punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js | #26F9E7 | — |
| string.quoted.single.js | #F5EC70 | — |
| entity.name.function.ts, support.function.dom.js | #9EE34F | — |
| meta.object-literal.key.js | #01DDECE3 | — |
| meta.decorator.js punctuation.decorator.js, meta.decorator.js variable.other.readwrite.js | #5bca6a | — |
| punctuation.definition.typeparameters.begin.js, punctuation.definition.typeparameters.end.js, storage.type.numeric.bigint.js | #C7C7C7B4 | — |
| constant.numeric.decimal.js | #A96EE4 | — |
| string.quoted.single.js, string.quoted.double.js, string.template.js | #FBEB93 | — |
| entity.name.label.js | #F279FF | — |
| meta.type.tuple.js punctuation.separator.label.js | #FFFFFF | — |
| punctuation.definition.string.begin.js, punctuation.definition.string.end.js, entity.other.inherited-class.js | — | bold |
| punctuation.terminator.statement.js | #ffffff | — |
| punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc | #66D8EFC9 | |
| punctuation.definition.optional-value.end.bracket.square.jsdoc | #888888 | |
| variable.other.jsdoc | #C7C4C4 | — |
| storage.type.class.jsdoc | #8BD3FD | |
| variable.other.jsdoc | #7894ad | — |
| variable.other.jsdoc source.embedded.ts | #aa834c | — |
| entity.name.type.instance.jsdoc | #C7C4C4 | — |
| constant.other.email.link.underline.jsdoc | #b26b7a | — |
| punctuation.definition.string.begin.json, punctuation.definition.string.end.json | #81D4FA | — |
| constant.language.json | #FF80F4 | — |
| string.quoted.double.html punctuation.definition.tag.begin.liquid, string.quoted.double.html punctuation.definition.tag.end.liquid | #B1B1B1 | — |
| punctuation.separator.pipe.liquid | #F92672 | — |
| source.liquid string.quoted.single.html, source.liquid string.quoted.double.html | #FFF9A6 | — |
| support.function.filter.liquid | #5CD7E0D5 | — |
| entity.name.tag.liquid | #F92672 | — |
| constant.numeric.property-value.liquid | #978FFF | — |
| constant.language.liquid | #FF80F4 | — |
| constant.numeric.property-value.liquid | #978FFF | — |
| support.function.filter.liquid | #5CD7E0D5 | — |
| markup.heading.markdown, markup.heading.1.markdown, markup.heading.2.markdown | #9EE34F | — |
| markup.fenced_code.block.markdown | #FAFAFA | — |
| markup.bold.markdown | #F8F8F2 | bold |
| markup.inline.raw.string.markdown | #C7C4C4 | — |
| markup.italic.markdown | #F8F8F2 | italic |
| punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.raw.markdown | #F92672 | — |
| markup.list.unnumbered.markdown, markup.list.numbered.markdown | #F48FB1 | — |
| markup.raw.block.markdown, markup.raw.inline.markdown | #FFF59D | — |
| markup.quote.markdown, punctuation.definition.blockquote.markdown | #6C71C4 | — |
| meta.separator.markdown | #FFAB40 | bold |
| meta.image.inline.markdown, markup.underline.link.markdown | #8C8C8C | italic |
| string.other.link.title.markdown, string.other.link.description.markdown | #9EE34F | — |
| punctuation.definition.link.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.metadata.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.constant.markdown, punctuation.separator.table.markdown | #8C8C8C | — |
| markup.inline.raw.string.markdown, markup.list.unnumbered.markdown meta.paragraph.markdown, markup.list.numbered.markdown meta.paragraph.markdown | #C7C4C4 | — |
| markup.fenced_code.block.markdown | #FAFAFA | — |
| markup.bold.markdown markup.italic.markdown | #F8F8F2 | italic bold |
| markup.strikethrough.markdown | — | strikethrough |
| string.other.link.description.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown | — | |
| punctuation.definition.table.markdown | #0090a9 | — |
| punctuation.definition.strikethrough.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown | #F92672 | |
| support.other.namespace.use-as.php | #81D4FA | — |
| variable.language.namespace.php | #D66990 | — |
| punctuation.separator.inheritance.php | #E91E63 | — |
| meta.uri.from.redirects | #93FD97 | |
| meta.uri.to.redirects | #A793FD | |
| markup.splat.redirects | #888888 | — |
| punctuation.definition.group.no-capture.regexp | #F83EDF | — |
| punctuation.definition.group.regexp | #6BFFF8 | — |
| punctuation.definition.character-class.regexp | #DB6767 | bold |
| constant.other.character-class.regexp | #AE81FF | — |
| keyword.operator.quantifier.regexp | #F83EDF | — |
| meta.assertion.look-behind.regexp, meta.assertion.look-ahead.regexp | #3AF59E | — |
| support.function.misc.scss, support.constant.property-value.scss, support.constant.font-name.scss, support.constant.vendored.property-value.scss, support.type.property-name.media.scss, meta.property-value.scss, meta.selector.scss entity.other.attribute-name.class.scss punctuation.definition.entity.scss | #FFF59D | |
| punctuation.definition.constant.scss, keyword.other.unit.px.scss, keyword.other.unit.rem.scss, keyword.other.unit.percentage.scss, keyword.other.unit.em.scss | #D66088 | — |
| constant.numeric.scss, constant.other.color.rgb-value.hex.scss | #978FFF | — |
| support.type.property-name.scss, entity.other.attribute-name.scss, meta.property-list.scss meta.property-name.scss | #91EBC2 | |
| entity.name.tag.scss, variable.scss, entity.other.attribute-name.class.scss, keyword.operator.pattern.scss | #FF93BC | — |
| variable.other.scss, meta.function.misc.scss variable.parameter.misc.scss, meta.at-rule.header.scss | #EFEFEF | |
| variable.scss | #CA99FF | — |
| punctuation.separator.key-value.scss, keyword.control.at-rule.media.scss, variable.parameter.misc.scss, meta.function.misc.scss punctuation.separator.list.comma.scss, constant.numeric.scss meta.property-list.scss meta.property-value.scss | #F92672 | — |
| support.function.misc.scss, support.function.calc.scss, support.function.shape.scss, support.function.transform.scss | #9EE34F | — |
| entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.scss entity.other.attribute-name.pseudo-element.scss, punctuation.definition.entity.scss entity.other.attribute-name.pseudo-class.scss, meta.selector.scss entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.scss | #93bcff | |
| entity.other.keyframe-offset.scss | #93bcff | — |
| entity.other.attribute-name.id.scss | #f2f2f2 | |
| punctuation.definition.interpolation.begin.scss, punctuation.definition.interpolation.end.scss | #26F9E7 | — |
| keyword.operator.other.transclude.scss | #BECAFF | bold |
| support.class.spx.html | #81D4FA | |
| support.function.spx.html, keyword.control.class.html | #FFFFFF | |
| support.type.property-name.spx.html | #FFFFFF | |
| entity.name.function.spx.html | #9EE34F | |
| constant.numeric.decimal.spx.html | #FB8943 | |
| punctuation.definition.array.table.toml, punctuation.definition.table.toml, punctuation.definition.array.toml, punctuation.definition.table.inline.toml, string.quoted.triple.literal.block.toml | #FFAB40 | — |
| variable.key.toml, punctuation.eq.toml | #F92672 | — |
| variable.key.table.toml, variable.key.array.table.toml, support.type.property-name.toml | #8BD3FD | |
| constant.numeric.integer.toml | #A96EE4 | — |
| meta.tag.template.value.twig, meta.tag.template.block.twig | #CD5AC5 | — |
| keyword.control.twig | #E05D8C | — |
| variable.other.twig | #E5A5E0 | — |
| variable.other.property.twig | #FFE1FC | — |
| constant.language.twig | #FFD2A6 | — |
| constant.numeric.twig | #FFD0FB | — |
| support.function.twig | #90E7F7 | — |
| meta.function-call.other.twig | #FAB85A | — |
| meta.function-call.twig | #FAB85A | — |
| storage.type.type.ts, storage.modifier.ts, storage.type.function.arrow.ts, keyword.control.import.ts, keyword.operator.logical.ts, keyword.operator.expression.keyof.ts, punctuation.separator.key-value.ts, punctuation.accessor.ts, punctuation.destructuring.ts, punctuation.accessor.optional.ts, punctuation.separator.comma.ts, punctuation.separator.label.ts, variable.language.super.ts, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.ts | #F92672 | — |
| entity.name.type.module.ts, storage.type.ts, storage.type.interface.ts, storage.type.class.ts, storage.type.function.ts, storage.type.namespace.ts, support.type.builtin.ts, storage.type.enum.ts, support.class.builtin.ts, support.class.promise.ts, support.type.primitive.ts, variable.other.enummember.ts, variable.other.object.ts | #8BD3FD | |
| meta.namespace.declaration.ts entity.name.type.module.ts | #f2f2f2 | — |
| variable.language.this.ts, variable.parameter.ts, variable.other.readwrite.ts meta.array.literal.ts, variable.language.super.ts | #FFAB40 | — |
| punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts | #26F9E7 | — |
| string.quoted.single.ts | #F5EC70 | — |
| entity.name.function.ts, support.function.dom.ts | #9EE34F | — |
| meta.object-literal.key.ts | #01DDECE3 | — |
| meta.decorator.ts punctuation.decorator.ts, meta.decorator.ts variable.other.readwrite.ts | #5bca6a | — |
| punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, storage.type.numeric.bigint.ts | #C7C7C7B4 | — |
| constant.numeric.decimal.ts | #A96EE4 | — |
| string.quoted.single.ts, string.quoted.double.ts, string.template.ts | #FBEB93 | — |
| entity.name.label.ts | #F279FF | — |
| meta.type.tuple.ts punctuation.separator.label.ts | #FFFFFF | — |
| punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, entity.other.inherited-class.ts | — | bold |
| punctuation.terminator.statement.ts | #ffffff | — |
| constant.language.boolean.true.ts, constant.language.boolean.false.ts | #ff30ee | — |
| entity.name.tag.yaml | #FF93BC | — |
| punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.map.key.yaml | #F92672 | — |
| punctuation.separator.map.value.yaml, punctuation.separator.key-value.mapping.yaml | #becaffb4 | |
| constant.numeric.float.yaml, constant.numeric.integer.decimal.yaml, constant.numeric.integer.yaml | #A96EE4 | — |
| constant.language.null.yaml | #4290f8 | — |
| string.quoted.double.yaml | #FFF78C | |
| string.unquoted.plain.out.yaml, string.quoted.single.yaml, punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml | — | — |
| entity.name.tag.yaml | — | |
| variable.other.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml, variable.other.anchor.yaml, punctuation.definition.tag.secondary.yaml, storage.type.tag.shorthand.yaml, storage.type.tag-handle.yaml, entity.name.type.anchor.yaml | #9EE34F | — |
| constant.language.boolean.yaml | #ff30ee | — |
| entity.other.document.begin.yaml, entity.other.document.end.yaml | #FFAB40 | — |