Best Themes Redefined 🚀
Publisher: Lakshit SomaniThemes in package: 92
🎨🚀 A never seen collection of 92 hand crafted themes no where to be found on Internet 💻
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.background#17141f
- activityBar.foreground#ae66b6
- activityBar.inactiveForeground#87598c79
- activityBarBadge.background#cdcdcd
- activityBarBadge.foreground#151920
- badge.background#cdcdcd
- badge.foreground#151920
- breadcrumb.activeSelectionForeground#e6c62f
- breadcrumb.background#17141f
- breadcrumb.focusForeground#e6c62f
- breadcrumb.foreground#cdcdcd
- breadcrumbPicker.background#151920
- button.background#ae66b618
- button.foreground#cdcdcd
- button.hoverBackground#ae66b618
- checkbox.border#3b4048
- debugToolBar.background#151920
- diffEditor.insertedTextBackground#00809b33
- dropdown.background#17141f
- dropdown.border#181a1f
- editor.background#17141f
- editor.findMatchHighlightBackground#314365
- editor.foreground#cdcdcd
- editor.lineHighlightBackground#ae66b618
- editor.selectionBackground#308db86c
- editorCursor.foreground#f8f8f0
- editorError.foreground#c24038
- editorGroup.border#181a1f
- editorGroupHeader.tabsBackground#17141f
- editorGroupHeader.tabsBorder#220525
- editorHoverWidget.background#21252b
- editorHoverWidget.border#181a1f
- editorIndentGuide.background#3b4048
- editorLineNumber.foreground#495162
- editorLink.activeForeground#e6c62f
- editorRuler.foreground#484848
- editorSuggestWidget.background#151920
- editorSuggestWidget.border#e6c62f
- editorSuggestWidget.selectedBackground#2c313a
- editorWhitespace.foreground#484a50
- editorWidget.background#21252b
- extensionButton.prominentBackground#ae66b618
- gitDecoration.addedResourceForeground#39dcdc
- gitDecoration.modifiedResourceForeground#29e7ae
- gitDecoration.untrackedResourceForeground#cdcdcd8e
- input.background#151920
- input.border#ae66b6
- input.foreground#e6c62f
- inputOption.activeBorder#ae66b6
- list.activeSelectionBackground#ae66b618
- list.activeSelectionForeground#d7dae0
- list.dropBackground#ae66b618
- list.errorForeground#dc396a
- list.focusBackground#ae66b618
- list.highlightForeground#e6c62f
- list.hoverBackground#17141f
- list.inactiveSelectionBackground#ae66b618
- list.inactiveSelectionForeground#cdcdcd
- mergeEditor.change.word.background#151920
- mergeEditor.conflict.handled.minimapOverViewRuler#e6c62f
- mergeEditor.conflict.unhandled.minimapOverViewRuler#ae66b6
- notifications.background#151920
- peekView.border#e6c62f
- peekViewEditor.background#151920
- peekViewEditor.matchHighlightBackground#1c212b
- peekViewResult.background#1c212b
- peekViewTitle.background#1c212b
- scrollbarSlider.activeBackground#e6c72faf
- scrollbarSlider.background#4e566680
- scrollbarSlider.hoverBackground#5a637580
- sideBar.background#1a1824
- sideBar.foreground#cdcdcd
- sideBarSectionHeader.background#220525
- sideBarSectionHeader.foreground#cdcdcd
- sideBarTitle.foreground#e6c62f
- statusBar.background#17141f
- statusBar.debuggingBackground#e6c62f
- statusBar.foreground#1c212b
- statusBar.noFolderBackground#e6c62f
- statusBarItem.hoverBackground#b39b239a
- tab.activeBackground#220525
- tab.activeBorder#ae66b6
- tab.border#17141f
- tab.hoverBackground#220525
- tab.inactiveBackground#17141f
- titleBar.activeBackground#17141f
- titleBar.activeForeground#cdcdcd
- titleBar.inactiveBackground#17141f
- titleBar.inactiveForeground#888787
- tree.indentGuidesStroke#dab709
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.comment | #676F7D | italic |
| punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts | #C678DD | — |
| string.template.js | #E5C07B | — |
| meta.template.expression.js | #ABB2BF | — |
| string.embedded.begin, string.embedded.end | #C678DD | — |
| string.embedded | #98C379 | — |
| constant.language | #56B6C2 | — |
| constant.character, constant.other | #56B6C2 | — |
| variable.language | #E06C75 | — |
| variable.readwrite, variable.readwrite.other.block | #61AFEF | — |
| keyword, keyword.operator.logical, keyword.operator.constructor | #E06C75 | — |
| keyword.operator | #E06C75 | — |
| storage | #E06C75 | — |
| storage.type | #56B6C2 | — |
| entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class | #61AFEF | — |
| variable.other.object | #61AFEF | — |
| variable.other.property, variable.other.block | #ABB2BF | — |
| entity.other.inherited-class | #98C379 | — |
| entity.name.function, support.function | #98C379 | — |
| variable.parameter | #D19A66 | italic |
| entity.name.function-call | #ABB2BF | — |
| function.support.builtin, function.support.core | #98C379 | — |
| entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx | #E06C75 | — |
| entity.name.tag.class, entity.name.tag.id | #56B6C2 | — |
| entity.other.attribute-name | #98C379 | — |
| support.constant | #56B6C2 | — |
| support.type, support.variable | #56B6C2 | — |
| support.dictionary.json | #56B6C2 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass | #ABB2BF | — |
| support.constant.css, support.constant.scss, support.constant.less, support.constant.sass | #98C379 | — |
| variable.css, variable.scss, variable.less, variable.sass | #56B6C2 | — |
| variable.css.string, variable.scss.string, variable.less.string, variable.sass.string | #E5C07B | — |
| unit.css, unit.scss, unit.less, unit.sass | #C678DD | — |
| function.css, function.scss, function.less, function.sass | #56B6C2 | — |
| support.other.variable | — | |
| invalid | #F8F8F0 | — |
| invalid.deprecated | #F8F8F0 | — |
| structure.dictionary.property-name.json | #56B6C2 | — |
| string.detected-link | #61AFEF | — |
| meta.diff, meta.diff.header | #75715E | — |
| markup.deleted | #C678DD | — |
| markup.inserted | #E5C07B | — |
| markup.changed | #E5C07B | — |
| constant.numeric.line-number.find-in-files - match | #56B6C2A0 | — |
| entity.name.filename.find-in-files | #E5C07B | — |
| markup.italic, markup.italic.markdown | — | italic |
| punctuation.definition.italic.markdown | #696969 | none |
| markup.underline.link.markdown | #61AFEF | — |
| markup.bold.markdown | — | bold |
| punctuation.definition.bold.markdown | #696969 | none |
| markup.heading.markdown | #E06C75 | bold |
| punctuation.definition.heading.markdown | #696969 | none |
| markup.quote.markdown | #98C379 | — |
| meta.separator.markdown | #C678DD | bold |
| markup.raw.inline.markdown, markup.raw.block.markdown | #56B6C2 | — |
| punctuation.definition.list_item.markdown | #FFFFFF | bold |
| comment | #625576 | — |
| string | #E07D13 | — |
| keyword - keyword.operator | #E6C62F | — |
| keyword.control | #E6C62F | — |
| storage | #E6C62F | — |
| storage.type | #E6C62F | — |
| entity.name.type | #DC396A | — |
| entity.name.class | #DC396A | — |
| support.type | #DC396A | — |
| support.class | #DC396A | — |
| entity.name.function | #39DCDC | — |
| support.function | #39DCDC | — |
| variable | #CDCDCD | — |
| entity.name.variable | #CDCDCD | — |
| support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color | #E6C62F | — |
| punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, meta.tag.js, meta.embedded.expression.js, meta.block.js, meta.arrow.js, meta.var.expr.js, source.js, punctuation.definition.tag.begin.ts, punctuation.definition.tag.end.ts, meta.tag.ts, meta.embedded.expression.ts, meta.tag.ts, meta.tag.tsx, meta.block.ts, meta.block.tsx, meta.arrow.ts, meta.arrow.tsx, meta.var.expr.ts, meta.var.expr.tsx, source.ts, source.tsx | #2FACE6 | — |
| meta.jsx.children.ts, meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children.ts, meta.jsx.children.tsx | #CDCDCD | — |
| support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded | #B759C2 | — |
| variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts | #2FACE6 | — |
| meta.block.ts, meta.block.tsx, meta.block.js, meta.block.jsx | #C4C4C4 | — |
| variable.other.readwrite.ts, meta.object.member.ts, variable.other.readwrite.tsx, meta.object.member.tsx, variable.other.readwrite.js, meta.object.member.js, variable.other.readwrite.jsx, meta.object.member.jsx | #30C5C5 | — |
| support.class.component.tsx, entity.name.tag.tsx, meta.embedded.expression.tsx, meta.block.tsx, meta.var.expr.tsx, source.tsx, support.class.component.jsx, entity.name.tag.jsx, meta.embedded.expression.jsx, meta.block.jsx, meta.var.expr.jsx, source.jsx, support.class.component.js, support.class.component.ts, entity.name.tag.js, entity.name.tag.ts, meta.embedded.expression.js, meta.embedded.expression.ts, meta.block.js, meta.block.ts, meta.var.expr.js, meta.var.expr.ts, source.js, source.ts | #2FACE6 | — |
| variable.object.property.tsx, meta.definition.property.tsx, meta.field.declaration.tsx, meta.interface.tsx, variable.other.constant.tsx, meta.definition.variable.tsx, meta.var-single-variable.expr.tsx, meta.var.expr.tsx, meta.block.tsx, meta.arrow.tsx, meta.var.expr.tsx, source.tsx, variable.object.property.jsx, variable.object.property.js, variable.object.property.ts, meta.definition.property.jsx, meta.definition.property.js, meta.definition.property.ts, meta.field.declaration.jsx, meta.field.declaration.js, meta.field.declaration.ts, meta.interface.jsx, meta.interface.js, meta.interface.ts, variable.other.constant.jsx, variable.other.constant.js, variable.other.constant.ts, meta.definition.variable.jsx, meta.definition.variable.js, meta.definition.variable.ts, meta.var-single-variable.expr.jsx, meta.var-single-variable.expr.js, meta.var-single-variable.expr.ts, meta.var.expr.jsx, meta.var.expr.js, meta.var.expr.ts, meta.block.jsx, meta.block.js, meta.block.ts, meta.arrow.jsx, meta.arrow.js, meta.arrow.ts, meta.var.expr.jsx, meta.var.expr.js, meta.var.expr.ts, source.jsx, source.js, source.ts | #2FACE6 | — |
| variable.parameter.ts, meta.parameter.object-binding-pattern.ts, meta.parameters.ts, variable.parameter.tsx, meta.parameter.object-binding-pattern.tsx, meta.parameters.tsx, variable.parameter.js, meta.parameter.object-binding-pattern.js, meta.parameters.js, variable.parameter.jsx, meta.parameter.object-binding-pattern.jsx, meta.parameters.jsx | #AE66B6 | — |
| entity.other.inherited-class.ts, meta.interface.ts, entity.other.inherited-class.tsx, meta.interface.tsx, entity.other.inherited-class.js, meta.interface.js, entity.other.inherited-class.jsx, meta.interface.jsx, entity.other.inherited-class.jsx, meta.interface.jsx | #39DCDC | — |
| constant | #CDCDCD | — |
| entity.other.attribute-name | #B759C2 | — |
| entity.name.tag | #2FACE6 | — |
| entity.name.variable.parameter, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter | #DC8D39 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss | #AE66B6 | — |
| keyword.operator, keyword.operator.logical.ts, meta.embedded.expression.ts, keyword.operator.logical.tsx, meta.embedded.expression.tsx, keyword.operator.logical.js, meta.embedded.expression.js, keyword.operator.logical.jsx, meta.embedded.expression.jsx | #B9355D | — |
| support.type.property-name.css, meta.property-name.css, meta.property-list.css, source.stylable | #2FACE6 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| string | #E07D13 | — |
| constant.numeric | #E07D13 | — |
| comment | #7F6E99 | — |
| punctuation.definition.comment | #7F6E99 | — |
| comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this | — | |
| keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...