Themes To Die For
Publisher: Alec LarsonThemes in package: 17
A collection of my favorite VS Code themes
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#f2f4f7
- activityBar.border#f2f4f7
- activityBar.foreground#000000
- activityBarBadge.background#316895
- button.background#316895
- button.foreground#f2f4f7
- diffEditor.diagonalFill#b8c6d232
- diffEditor.insertedLineBackground#a2f2ba52
- diffEditor.insertedTextBackground#70e18c52
- diffEditor.removedLineBackground#f29ba352
- diffEditor.removedTextBackground#f36f7f52
- dropdown.background#f2f4f7
- dropdown.border#b2b2b2
- dropdown.listBackground#f2f4f7
- editor.background#f2f4f7
- editor.findMatchBackground#ccf0be
- editor.findMatchHighlightBackground#f4eaae93
- editor.findRangeHighlightBackground#b4b4b44d
- editor.foreground#000000
- editor.hoverHighlightBackground#add6ff26
- editor.inactiveSelectionBackground#d2eafa80
- editor.inlineValuesBackground#ffc80033
- editor.inlineValuesForeground#00000080
- editor.lineHighlightBackground#e9ebf0
- editor.lineHighlightBorder#e9ebf0
- editor.rangeHighlightBackground#c8cfde33
- editor.selectionBackground#d2eafa
- editor.snippetFinalTabstopHighlightBackground#95b2de41
- editor.snippetTabstopHighlightBackground#95b2de41
- editor.stackFrameHighlightBackground#ffff6673
- editor.symbolHighlightBackground#ea5c0055
- editor.wordHighlightBackground#b0b9cf40
- editor.wordHighlightStrongBackground#ffd09e40
- editor.wordHighlightTextBackground#b0b9cf40
- editorBracketMatch.background#fed442
- editorBracketMatch.border#00000000
- editorGroup.border#f2f4f7
- editorGroupHeader.noTabsBackground#f2f4f7
- editorGroupHeader.tabsBackground#f2f4f7
- editorGroupHeader.tabsBorder#f2f4f7
- editorIndentGuide.activeBackground1#0d316833
- editorIndentGuide.background1#9cb2df33
- editorLineNumber.activeForeground#000000
- editorLineNumber.foreground#a2a9ba
- editorSuggestWidget.highlightForeground#316895
- editorSuggestWidget.selectedBackground#e9ebf0
- editorWidget.background#f2f4f7
- editorWidget.border#000000
- focusBorder#f2f4f700
- foreground#000000
- input.background#f2f4f7
- input.border#b2b2b2
- inputOption.activeBorder#000000
- inputOption.activeForeground#000000
- list.activeSelectionBackground#e9ebf0
- list.activeSelectionForeground#316895
- list.focusBackground#e9ebf0
- list.focusForeground#316895
- list.highlightForeground#316895
- list.hoverBackground#e9ebf0
- list.hoverForeground#316895
- list.inactiveSelectionBackground#e9ebf0
- list.inactiveSelectionForeground#316895
- notificationCenter.border#f2f4f7
- notificationCenterHeader.background#f2f4f7
- notifications.background#f2f4f7
- notifications.border#f2f4f7
- notificationToast.border#f2f4f7
- panel.border#316895
- scrollbar.shadow#f2f4f7
- scrollbarSlider.activeBackground#c9ceda99
- scrollbarSlider.background#b8becf66
- scrollbarSlider.hoverBackground#b8becfb3
- sideBar.background#f2f4f7
- sideBar.border#f2f4f7
- sideBar.foreground#316895
- sideBarSectionHeader.background#f2f4f7
- statusBar.background#f2f4f7
- statusBar.border#f2f4f7
- statusBar.debuggingBackground#f2f4f7
- statusBar.debuggingForeground#000000
- statusBar.foreground#000000
- statusBar.noFolderBackground#f2f4f7
- statusBar.noFolderForeground#000000
- tab.activeBackground#f2f4f7
- tab.activeBorder#316895
- tab.activeForeground#316895
- tab.border#f2f4f7
- tab.inactiveBackground#f2f4f7
- titleBar.activeBackground#f2f4f7
- titleBar.activeForeground#000000
- titleBar.border#f2f4f7
- titleBar.inactiveBackground#f2f4f7
- titleBar.inactiveForeground#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #8A9BB2 | — |
| entity.name.constant, variable.language, keyword.operator.new | #4a4869 | italic |
| variable.other.constant | #000000 | — |
| constant | #3E7058 | — |
| constant.language.null, constant.language.undefined | #6da188 | — |
| punctuation.accessor, punctuation.separator.comma, punctuation.separator.parameter | #4a4869 | — |
| keyword.operator.symbole, keyword.other.mark | #000000 | — |
| entity, entity.name | #994FC7 | — |
| entity.name.type | #B42187 | — |
| entity.name.type.alias, entity.name.type.interface, entity.name.type.class | #994FC7 | — |
| meta.type punctuation.accessor, punctuation.definition.typeparameters, meta.type.parameters punctuation.separator.comma | #000000 | — |
| meta.type storage.modifier | #B42187 | — |
| meta.field.declaration meta.definition.property entity.name, meta.object-literal.key entity.name | #000000 | — |
| meta.object-literal.key entity.name.function | #994FC7 | — |
| meta.type.tuple entity.name.label, punctuation.terminator.statement | #677281 | — |
| variable.parameter.function | #000000 | — |
| entity.name.tag, entity.name.tag support.class.component, support.class.component.astro | #3EA100 | — |
| punctuation.definition.tag | #92BD77 | — |
| keyword | #d73a49 | — |
| storage, storage.type | #d73a49 | — |
| storage.type.function.arrow | #994FC7 | — |
| storage.modifier.package, storage.modifier.import, storage.type.java | #000000 | — |
| string, punctuation.definition.string, string punctuation.section.embedded source | #3E7058 | — |
| punctuation.definition.template-expression | #362BCF | — |
| string.unquoted.import.ada | — | — |
| support | #ce6e05 | — |
| support.class | #000000 | — |
| meta.class support.class, meta.class entity.other.inherited-class, meta.interface support.class, meta.interface entity.other.inherited-class | #B42187 | — |
| meta.property-name | #362BCF | — |
| variable | #000000 | — |
| variable.other | #000000 | — |
| variable.object.property | #000000 | — |
| invalid.broken | #b31d28 | bold italic underline |
| invalid.deprecated | #b31d28 | bold italic underline |
| invalid.illegal | #b31d28 | italic underline |
| carriage-return | #d73a49 | italic underline |
| invalid.unimplemented | #b31d28 | bold italic underline |
| message.error | #b31d28 | — |
| string source | #000000 | — |
| string variable | #362BCF | — |
| support.constant | #362BCF | — |
| support.variable | #000000 | — |
| meta.module-reference | #362BCF | — |
| markup.list | #735c0f | — |
| markup.heading, markup.heading entity.name | #362BCF | bold |
| markup.quote | #22863a | — |
| markup.italic | #000000 | italic |
| markup.bold | #000000 | bold |
| markup.raw | #362BCF | — |
| markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted | #b31d28 | — |
| markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted | #22863a | — |
| markup.changed, punctuation.definition.changed | #ce6e05 | — |
| markup.ignored, markup.untracked | #362BCF | — |
| meta.diff.range | #994FC7 | bold |
| meta.diff.header | #362BCF | — |
| meta.separator | #362BCF | bold |
| meta.brace.square | #362BCF | — |
| meta.type meta.brace.square | #c7449f | — |
| meta.output | #362BCF | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #586069 | — |
| brackethighlighter.unmatched | #b31d28 | — |
| sublimelinter.mark.error | #b31d28 | — |
| sublimelinter.mark.warning | #ce6e05 | — |
| sublimelinter.gutter-mark | #959da5 | — |
| constant.other.reference.link, string.other.link | #032f62 | underline |
| meta.function-call support.function, meta.function-call entity.name.function | #362BCF | — |
| keyword.operator, keyword.operator.expression.in | #00954d | — |
| keyword.operator.logical, keyword.operator.assignment, keyword.operator.ternary, keyword.operator.expression, keyword.operator.increment, keyword.operator.decrement, punctuation.separator.label, punctuation.separator.key-value, punctuation.destructuring, punctuation.definition.section, meta.type storage.modifier | #d73a49 | |
| keyword.operator.type, keyword.operator.optional, keyword.operator.definiteassignment, keyword.operator.expression.infer | #e36622 | — |
| meta.var storage.type, keyword.control.flow | #e35f22 | — |
| meta.object.type punctuation.definition.block, meta.object.type keyword.operator.spread, meta.objectliteral meta.object.member meta.block punctuation.definition.block, meta.objectliteral meta.method.declaration meta.block punctuation.definition.block | #000000 | — |
| meta.objectliteral punctuation.definition.block, meta.object keyword.operator.spread | #FF4B00 | — |
| punctuation.section.embedded | #032F62 | — |
| entity.other.attribute-name | #032F62 | — |
| variable.parameter | #316895 | — |
| meta.tag.attributes.tsx keyword.operator.assignment.tsx | #032F62 | — |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc | #bf6769 | — |
| meta.decorator, meta.decorator variable.other | #358EE8 | — |
| source.json meta.structure.dictionary.json support.type.property-name | #362BCF | — |
| source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary support.type.property-name | #994FC7 | — |
| source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name | #B42187 | — |
| source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name | #362BCF | — |
| source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name | #994FC7 | — |
| source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name | #B42187 | — |
| punctuation.support.type.property-name | #000000 | — |
| punctuation.definition.array | #FF4B00 | — |
| source.css keyword.other.unit | #3E7058 | — |
| source.css support.constant, source.css meta.property-value | #994FC7 | — |
| source.css support.type.property-name, source.css support.type.vendored | #000000 | — |
| source.css support.function, source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element | #362BCF | — |
| source.css punctuation.terminator, source.css punctuation.separator.key-value | #032F62 | — |
| source.css meta.attribute-selector keyword.operator.pattern | #00954d | — |