Strange Theme
Publisher: Oelyn StudioThemes in package: 1
A dark theme for VS Code & Cursor with Vue SFC section differentiation and semantic highlighting.
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#222427
- activityBar.foreground#F5F9FE
- activityBar.inactiveForeground#9599A6
- chat.requestBackground#222427
- chat.requestForeground#D1D3DB
- chat.responseBackground#1A1B1D
- chat.responseForeground#D1D3DB
- chat.slashCommandBackground#3579FF47
- chat.slashCommandForeground#82AAFF
- commandCenter.background#222427
- commandCenter.border#3A3D41
- commandCenter.foreground#F5F9FE
- editor.background#1A1B1D
- editor.findMatchHighlightBackground#DADDE552
- editor.foreground#E8E0D4
- editor.hoverHighlightBackground#264f7840
- editor.inactiveSelectionBackground#3A3D41
- editor.lineHighlightBackground#292c34
- editor.selectionBackground#3579FF47
- editor.selectionHighlightBackground#ADD6FF26
- editorBracketMatch.background#D5D8E03D
- editorBracketMatch.border#C792EA
- editorBracketPairGuide.activeBackground1#C792EA
- editorBracketPairGuide.activeBackground2#FFD700
- editorBracketPairGuide.activeBackground3#82AAFF
- editorBracketPairGuide.activeBackground4#FF9944
- editorBracketPairGuide.activeBackground5#82D99F
- editorBracketPairGuide.activeBackground6#F48CCA
- editorBracketPairGuide.background1#C792EA80
- editorBracketPairGuide.background2#FFD70080
- editorBracketPairGuide.background3#82AAFF80
- editorBracketPairGuide.background4#FF994480
- editorBracketPairGuide.background5#82D99F80
- editorBracketPairGuide.background6#F48CCA80
- editorCursor.foreground#FFFFFF
- editorGroupHeader.tabsBackground#17191A
- editorGroupHeader.tabsBorder#E0E2F217
- editorIndentGuide.activeBackground#FF5577
- editorIndentGuide.activeBackground1#FF5577
- editorIndentGuide.background#3A3D44
- editorIndentGuide.background1#3A3D44
- editorLineNumber.activeForeground#E0E3EE
- editorLineNumber.foreground#979AA4
- list.activeSelectionBackground#E0E2F214
- list.hoverBackground#E0E2F20d
- list.inactiveSelectionBackground#E0E2F20d
- quickInput.background#222427
- quickInput.foreground#D1D3DB
- sideBar.background#1A1B1D
- sideBarTitle.foreground#BBBBBB
- statusBar.background#0000
- tab.activeBackground#E0E2F20d
- tab.activeBorderTop#FFFFFF
- tab.activeForeground#F5F9FE
- tab.inactiveBackground#17191A
- tab.inactiveForeground#9599A6
- titleBar.activeBackground#222427
- titleBar.inactiveBackground#222427
- welcomePage.background#1A1B1D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8A8F9A | italic |
| entity.name.tag.template.html, entity.name.tag.template.vue | #F2858C | bold |
| entity.name.tag.script.html, entity.name.tag.script.vue | #FFD700 | bold |
| entity.name.tag.style.html, entity.name.tag.style.vue | #21bd9e | bold |
| keyword.control.directive.vue, keyword.control.conditional.vue, keyword.control.loop.vue, text.html.vue keyword.control.directive.vue, text.html.vue keyword.control.conditional.vue, text.html.vue keyword.control.loop.vue | #FF5577 | bold |
| punctuation.attribute-shorthand.bind.html.vue | #C792EA | bold |
| punctuation.attribute-shorthand.event.html.vue | #FFD700 | bold |
| punctuation.attribute-shorthand.slot.html.vue | #82AAFF | bold |
| entity.other.attribute-name.html.vue, text.html.vue entity.other.attribute-name.html.vue | #FF3366 | bold |
| meta.attribute.directive.vue punctuation.definition.string.begin.html.vue, meta.attribute.directive.vue punctuation.definition.string.end.html.vue, text.html.vue punctuation.definition.string.begin.html.vue, text.html.vue punctuation.definition.string.end.html.vue | #0892dd | bold |
| source.ts.embedded.html.vue, source.js.embedded.html.vue, text.html.vue source.ts.embedded.html.vue, text.html.vue source.js.embedded.html.vue | #82D99F | — |
| punctuation.definition.interpolation.begin.html.vue, punctuation.definition.interpolation.end.html.vue, punctuation.section.embedded.begin.vue, punctuation.section.embedded.end.vue, text.html.vue punctuation.definition.interpolation.begin.html.vue, text.html.vue punctuation.definition.interpolation.end.html.vue | #0892dd | bold |
| expression.embedded.vue, text.html.vue expression.embedded.vue | #0da860 | bold |
| entity.name.tag.html, entity.name.tag.vue, text.html.vue entity.name.tag, text.html.basic entity.name.tag | #569CD6 | — |
| entity.other.attribute-name.html, text.html.vue entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #C896E0 | — |
| meta.attribute-with-value.html string.quoted, text.html.vue meta.attribute-with-value.html string.quoted | #CE9178 | — |
| punctuation.separator.key-value.html, punctuation.separator.key-value.vue | #D5D8E0 | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #9499A3 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss | #FFB86C | — |
| entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss | #FF9944 | — |
| entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less | #569CD6 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss | #C792EA | — |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss | #82AAFF | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #82D99F | — |
| support.constant.property-value.css, support.constant.property-value.scss | #DCDCAA | — |
| string.quoted.css, string.quoted.scss, string.quoted.less | #CE9178 | — |
| constant.numeric.css, constant.numeric.scss, constant.numeric.less | #F48CCA | — |
| keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less | #F48CCA | italic |
| variable.css, variable.scss, variable.less, variable.other.css, variable.other.scss | #FF5577 | — |
| support.function.css, support.function.scss, support.function.less | #FFD700 | — |
| keyword.other.important.css, keyword.other.important.scss | #FF5577 | bold |
| meta.attribute-selector.css, meta.attribute-selector.scss | #C792EA | — |
| entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent-selector.scss, keyword.operator.parent-selector.scss, keyword.operator.parent-selector.less | #FF9944 | bold |
| support.type.vendored.property-name.css, support.type.vendored.property-name.scss | #82D99F | italic |
| meta.property-name.scss, meta.property-name.less | #82D99F | — |
| meta.selector.scss meta.selector.scss, meta.selector.less meta.selector.less | #FFB86C | — |
| storage.type, storage.modifier | #C792EA | — |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop | #C792EA | — |
| variable.language.this, variable.language.super, variable.language | #FF5577 | bold |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language | #FF9944 | — |
| constant.numeric | #F48CCA | — |
| string.template, string.template.js, string.template.ts | #CE9178 | — |
| template.expression, punctuation.definition.template-expression | #82D99F | — |
| constant.character.escape | #FF9944 | bold |
| string.regexp | #F48CCA | — |
| storage.type.function.arrow | #FF9944 | bold |
| punctuation.decorator, entity.name.decorator | #FFD700 | — |
| meta.object-literal.key, meta.object-literal.key.js, meta.object-literal.key.ts | #82AAFF | — |
| support.type.object.console, support.type.object.math, support.type.object.json, support.type.object.array, support.type.object | #82AAFF | — |
| support.type.property-name.json, support.type.property-name.json.comments | #82AAFF | — |
| string.quoted.json, string.quoted.json.comments | #CE9178 | — |
| markup.heading.markdown, entity.name.section.markdown | #FF9944 | bold |
| markup.bold.markdown | #FFB86C | bold |
| markup.italic.markdown | #82D99F | italic |
| markup.inline.raw.markdown | #CE9178 | — |
| markup.raw.block.markdown | #B5CEA8 | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #82AAFF | — |
| markup.list.markdown | #C792EA | — |
| source.css.embedded.html, source.css.embedded.vue, meta.embedded.block.css, text.html.vue source.css.embedded | #B5CEA8 | — |
| meta.attribute.directive.vue punctuation.separator.key-value, meta.attribute.bind.vue punctuation.separator.key-value, meta.attribute.event.vue punctuation.separator.key-value | #D5D8E0 | — |