Theme³
Publisher: Alex³Themes in package: 1
Dark theme with vibrant colors
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#23272f
- activityBar.foreground#d7dae0
- activityBarBadge.background#4d78cc
- activityBarBadge.foreground#f8fafd
- badge.background#23272f
- button.background#404754
- debugToolBar.background#1b1d22
- diffEditor.insertedTextBackground#00809b33
- dropdown.background#1b1d22
- dropdown.border#1b1d22
- editor.background#23272f
- editor.findMatchBackground#42557b
- editor.findMatchBorder#ffffff
- editor.findMatchHighlightBackground#6199ff2f
- editor.foreground#99aab5
- editor.lineHighlightBackground#2c313c
- editor.selectionBackground#67769660
- editor.selectionHighlightBackground#ffffff10
- editor.selectionHighlightBorder#dddddd
- editor.wordHighlightBackground#d2e0ff2f
- editor.wordHighlightBorder#7f848e
- editor.wordHighlightStrongBackground#99aab526
- editor.wordHighlightStrongBorder#7f848e
- editorBracketMatch.background#515a6b
- editorBracketMatch.border#515a6b
- editorCursor.background#ffffffc9
- editorCursor.foreground#ffffff
- editorError.foreground#ef476f
- editorGroup.border#181a1f
- editorGroup.emptyBackground#181a1f
- editorGroupHeader.tabsBackground#1b1d22
- editorHoverWidget.background#1b1d22
- editorHoverWidget.border#181a1f
- editorIndentGuide.activeBackground#c8c8c859
- editorIndentGuide.background#3b4048
- editorLineNumber.activeForeground#737984
- editorLineNumber.foreground#495162
- editorMarkerNavigation.background#1b1d22
- editorRuler.foreground#99aab526
- editorSuggestWidget.background#1b1d22
- editorSuggestWidget.border#181a1f
- editorSuggestWidget.selectedBackground#2c313a
- editorWarning.foreground#ff8360
- editorWhitespace.foreground#3b4048
- editorWidget.background#1b1d22
- errorForeground#ef476f
- focusBorder#464646
- input.background#1d1f23
- list.activeSelectionBackground#2c313a
- list.activeSelectionForeground#d7dae0
- list.focusBackground#383e4a
- list.highlightForeground#c5c5c5
- list.hoverBackground#292d35
- list.inactiveSelectionBackground#2c313a
- list.inactiveSelectionForeground#d7dae0
- list.warningForeground#ff8360
- menu.foreground#c8c8c8
- peekViewEditor.background#1b1d23
- peekViewEditor.matchHighlightBackground#67769680
- peekViewResult.background#22262b
- scrollbarSlider.activeBackground#747d9180
- scrollbarSlider.background#4e566660
- scrollbarSlider.hoverBackground#5a637580
- sideBar.background#1b1d22
- sideBarSectionHeader.background#23272f
- statusBar.background#1b1d22
- statusBar.debuggingBackground#ff8360
- statusBar.debuggingBorder#ff7651
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#1b1d22
- statusBarItem.hoverBackground#2c313a
- statusBarItem.remoteBackground#ff8360
- statusBarItem.remoteForeground#f8fafd
- tab.activeBackground#23272f
- tab.activeForeground#dcdcdc
- tab.border#181a1f
- tab.hoverBackground#323842
- tab.inactiveBackground#1b1d22
- tab.unfocusedHoverBackground#323842
- textLink.foreground#06d6a0
- titleBar.activeBackground#23272f
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#1b1d22
- titleBar.inactiveForeground#6b717d
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #7f848e | italic |
| constant | #ff8360 | — |
| emphasis | #FF0000 | bold |
| entity.name.function | #06d6a0 | — |
| entity.name.type | #ffd176 | — |
| entity.name.variable | #06d6a0 | — |
| entity.name.variable.field | #06d6a0 | — |
| invalid | #ff577f | bold italic |
| keyword | #ef476f | — |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.bold markup.italic | — | bold italic |
| markup.heading | #ef476f | bold |
| markup.underline.link | #ef476f | italic |
| string.other.link.title.markdown, string.other.link.description.markdown | #06d6a0 | — |
| markup.inline.raw | #ffd176 | — |
| markup.raw | #ffd176 | — |
| markup.heading punctuation, punctuation.definition.bold, punctuation.definition.italic, markup.fenced_code.block punctuation, fenced_code.block.language, punctuation.definition.quote | #7f848e | — |
| markup.quote | #30bced | — |
| #06d6a0 | italic | |
| punctuation.definition.list.begin, meta.separator.markdown | #06d6a0 | — |
| punctuation | #99aab5 | — |
| storage.modifier | #ef476f | — |
| storage.type | #ffd176 | — |
| string | #ff8360 | — |
| strong | #FF0000 | bold |
| variable | #30bced | — |
| storage.type.struct.cpp, storage.type.built-in.primitive.cpp | #ef476f | — |
| variable.parameter.cpp | #06d6a0 | — |
| meta.preprocessor.cs | — | bold |
| variable.other.object.property.end.cs | — | bold |
| variable.other.object.property.underscore.cs | — | italic |
| variable.other.object.property.end.cs variable.other.object.property.underscore.cs | — | bold italic |
| entity.name.tag.css, entity.name.tag.wildcard.css | #ef476f | — |
| entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-element.css | #ffd176 | — |
| entity.other.attribute-name.class.css | #06d6a0 | — |
| entity.other.attribute-name.pseudo-class.css | #06d6a0 | italic |
| support.type.property-name.css | #30bced | — |
| support.type.vendored.property-name.css | #30bced | italic |
| meta.property-value.css, support.constant.property-value.css | #06d6a0 | — |
| support.constant.vendored.property-value.css | #06d6a0 | italic |
| source.js meta.tag.attributes keyword.operator.assignment, source.js.jsx meta.tag.attributes keyword.operator.assignment, source.tsx meta.tag.attributes keyword.operator.assignment | #99aab5 | — |
| source.tsx entity.name.tag, source.js entity.name.tag, source.jsx entity.name.tag | #30bced | — |
| source.js support.class.component, source.js.jsx support.class.component, source.tsx support.class.component | #30bced | bold |
| source.js entity.other.attribute-name, source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name | #06d6a0 | |
| source.tsx storage.type, source.tsx storage.type.function, source.tsx storage.type.function.arrow, source.jsx storage.type, source.jsx storage.type.function, source.jsx storage.type.function.arrow | #ef476f | — |
| entity.name.tag.html | #30bced | — |
| entity.other.attribute-name.html | #06d6a0 | — |
| source.http http.requestheaders | #30bced | — |
| source.http string.other.http | #06d6a0 | — |
| source.http http.requestline | #ffd176 | — |
| source.vue entity.name.tag | #30bced | — |
| source.vue support.class.component.html | #30bced | bold |
| source.vue entity.other | #ffd176 | bold |
| storage.type.primitive.array.java, storage.type.primitive.java, variable.language.this.java | #ef476f | — |
| variable.other.definition.java, variable.parameter.java | #06d6a0 | — |
| meta.method.body.java | #30bced | — |
| meta.object-literal.key.js, support.variable.property.js | #30bced | — |
| storage.type.function.arrow.js, variable.language.this.js, storage.type.class.jsdoc | #ef476f | — |
| meta.brace.round.js | #99aab5 | — |
| source.js support.constant, source.js support.class, source.js support.type, source.js support.variable, source.js entity.other | #ffd176 | bold |
| source.js support.function | #06d6a0 | bold |
| storage.type.js, storage.type.class.js, storage.type.function.js, storage.type.property.js | #ef476f | — |
| support.type.property-name.json | #30bced | |
| string.quoted.double.json | #06d6a0 | |
| constant.language.json | #ff8360 | |
| constant.numeric.json | #ef476f | |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.key-value.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.array.json | #99aab5 | |
| source.php entity.name.type, source.php support.class.php, source.php keyword.other.type.php | #ffd176 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, source.php storage.type.class.php, source.php support.function.construct.output.php, source.php storage.type.function.php | #ef476f | — |
| source.php punctuation.definition.variable.php | #30bced | — |
| source.php support.function | #06d6a0 | bold |
| entity.name.tag.reference.scss, entity.name.tag.wildcard.scss | #ef476f | — |
| meta.property-value.scss | #06d6a0 | — |
| entity.other.attribute-name.attribute.scss | #ffd176 | — |
| source.ts storage.type, variable.language.this.ts | #ef476f | — |
| source.ts support.constant, source.ts support.class, source.ts support.type, source.ts support.variable, source.ts entity.other | #ffd176 | bold |
| source.ts support.function | #06d6a0 | bold |
| keyword.operator.type.annotation.ts | #99aab5 | — |
| support.function.json.ts | #06d6a0 | — |
| meta.object-literal.key.ts, support.variable.property.ts | #30bced | — |
| source.yaml constant | #ef476f | — |
| source.yaml string.unquoted | #06d6a0 | — |
| source.yaml entity.name.tag.yaml | #30bced | — |
| source.python storage.type.function | #ef476f | — |
| source.python meta.function-call | #06d6a0 | — |
| source.python meta.function-call.arguments | #30bced | — |
| source.python entity.name.function.decorator | #06d6a0 | — |
| source.python support.type | #ffd176 | bold |
| source.python | #30bced | — |
| source.python punctuation.definition.list.begin | #99aab5 | — |
| source.python support.function.builtin | #06d6a0 | bold |
| source.go | #30bced | — |
| source.go support.function | #06d6a0 | — |