Best VSCode Theme
Publisher: BestVSCodeThemeThemes in package: 1
A meticulously crafted theme that combines aesthetic beauty with optimal readability. Perfect for long coding sessions with enhanced 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.activeBackground#1d2944
- activityBar.activeBorder#3deefc
- activityBar.background#101728
- activityBar.border#141b2c
- activityBar.foreground#3deefc
- activityBar.inactiveForeground#5f7ce2
- activityBarBadge.background#ff7a8f
- activityBarBadge.foreground#ffffff
- badge.background#ff7a8f
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#3deefc
- breadcrumb.background#141b2c
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#8cc1ff
- button.background#3860c4
- button.foreground#ffffff
- button.hoverBackground#4e78e0
- charts.blue#5f7ce2
- charts.foreground#d7dae0
- charts.green#7eefa9
- charts.lines#3deefc
- charts.orange#ffad61
- charts.purple#d580ff
- charts.red#ff7a8f
- charts.yellow#ffd175
- debugToolBar.background#141b2c
- debugToolBar.border#3deefc33
- diffEditor.insertedTextBackground#00809b33
- dropdown.background#1d1f23
- dropdown.border#181a1f
- editor.background#1a1d2b
- editor.findMatchBackground#4a5488
- editor.findMatchHighlightBackground#3a4466
- editor.foreground#ffffff
- editor.lineHighlightBackground#2a2e45
- editor.lineHighlightBorder#232e46
- editor.selectionBackground#4a5db3
- editor.selectionForeground#ffffff
- editor.wordHighlightBackground#3a4466
- editor.wordHighlightStrongBackground#4a5488
- editorBracketMatch.background#515a6b
- editorBracketMatch.border#515a6b
- editorCursor.background#ffffffc9
- editorCursor.foreground#36F9F6
- editorError.foreground#e06c75
- editorGroup.border#3deefc33
- editorGroupHeader.tabsBackground#141b2c
- editorGroupHeader.tabsBorder#3deefc33
- editorGutter.addedBackground#43d08a
- editorGutter.deletedBackground#e06c75
- editorGutter.modifiedBackground#e2c08d
- editorHoverWidget.background#1d2944
- editorHoverWidget.border#2d3e5e
- editorIndentGuide.activeBackground#3a4466
- editorIndentGuide.background#2a2e45
- editorLineNumber.activeForeground#36F9F6
- editorLineNumber.foreground#4e6bb3
- editorMarkerNavigation.background#21252b
- editorOverviewRuler.addedForeground#7eefa9
- editorOverviewRuler.border#3deefc33
- editorOverviewRuler.deletedForeground#ff7a8f
- editorOverviewRuler.errorForeground#ff7a8f
- editorOverviewRuler.findMatchForeground#3a5280
- editorOverviewRuler.infoForeground#3deefc
- editorOverviewRuler.modifiedForeground#ffd175
- editorOverviewRuler.rangeHighlightForeground#273a62
- editorOverviewRuler.selectionHighlightForeground#2a3c68
- editorOverviewRuler.warningForeground#ffd175
- editorOverviewRuler.wordHighlightForeground#484e5b
- editorOverviewRuler.wordHighlightStrongForeground#4e5569
- editorRuler.foreground#3b4048
- editorSuggestWidget.background#1d2944
- editorSuggestWidget.border#2d3e5e
- editorSuggestWidget.selectedBackground#2c313a
- editorWarning.foreground#e5c07b
- editorWhitespace.foreground#3b4048
- editorWidget.background#1d2944
- extensionBadge.remoteBackground#ff7a8f
- extensionBadge.remoteForeground#ffffff
- extensionButton.prominentBackground#3deefc
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#7eefa9
- focusBorder#5f7ce2
- gitDecoration.addedResourceForeground#7eefa9
- gitDecoration.conflictingResourceForeground#ff7a8f
- gitDecoration.deletedResourceForeground#ff7a8f
- gitDecoration.ignoredResourceForeground#636b78
- gitDecoration.modifiedResourceForeground#ffd175
- gitDecoration.stageDeletedResourceForeground#ff7a8f
- gitDecoration.stageModifiedResourceForeground#ffd175
- gitDecoration.submoduleResourceForeground#8cc1ff
- gitDecoration.untrackedResourceForeground#7eefa9
- input.background#1d1f23
- input.border#181a1f
- list.activeSelectionBackground#2a3c68
- list.activeSelectionForeground#ffffff
- list.deemphasizedForeground#8cc1ff
- list.errorForeground#ff7a8f
- list.filterMatchBackground#2a3c68
- list.filterMatchBorder#3deefc
- list.focusBackground#2a3c68
- list.focusForeground#ffffff
- list.highlightForeground#3deefc
- list.hoverBackground#232e46
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#3a4466
- list.inactiveSelectionForeground#ffffff
- list.warningForeground#ffd175
- listFilterWidget.background#1d2944
- listFilterWidget.noMatchesOutline#ff7a8f
- listFilterWidget.outline#3deefc
- menu.background#141b2c
- menu.foreground#d7dae0
- menu.selectionBackground#2a3c68
- menu.selectionBorder#3deefc33
- menu.selectionForeground#ffffff
- menu.separatorBackground#3deefc33
- minimap.selectionHighlight#528bff
- notificationCenter.border#3deefc33
- notificationCenterHeader.background#1d2944
- notificationCenterHeader.foreground#d7dae0
- notificationLink.foreground#3deefc
- notifications.background#141b2c
- notifications.border#3deefc33
- notifications.foreground#d7dae0
- notificationToast.border#3deefc33
- panel.background#141b2c
- panel.border#3deefc33
- panelInput.border#3deefc33
- panelSection.border#3deefc33
- panelTitle.activeBorder#3deefc
- panelTitle.activeForeground#3deefc
- panelTitle.inactiveForeground#d7dae0
- pickerGroup.border#3b4048
- progressBar.background#5f7ce2
- quickInput.background#141b2c
- quickInput.foreground#d7dae0
- quickInputList.focusBackground#2a3c68
- quickInputList.focusForeground#ffffff
- quickInputTitle.background#1d2944
- scrollbar.shadow#23252c
- scrollbarSlider.activeBackground#747d9180
- scrollbarSlider.background#4e566680
- scrollbarSlider.hoverBackground#5a637580
- settings.checkboxBackground#141b2c
- settings.checkboxBorder#3deefc33
- settings.checkboxForeground#d7dae0
- settings.dropdownBackground#141b2c
- settings.dropdownBorder#3deefc33
- settings.dropdownForeground#d7dae0
- settings.headerForeground#3deefc
- settings.modifiedItemIndicator#ff7a8f
- settings.numberInputBackground#141b2c
- settings.numberInputBorder#3deefc33
- settings.numberInputForeground#d7dae0
- settings.textInputBackground#141b2c
- settings.textInputBorder#3deefc33
- settings.textInputForeground#d7dae0
- sideBar.background#151823
- sideBar.border#3deefc33
- sideBar.dropBackground#2a3c6880
- sideBar.foreground#8B9FD9
- sideBarSectionHeader.background#1d2133
- sideBarSectionHeader.border#3deefc33
- sideBarSectionHeader.foreground#36F9F6
- sideBarTitle.foreground#36F9F6
- statusBar.background#151823
- statusBar.debuggingBackground#cc6633
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#8B9FD9
- statusBar.noFolderBackground#21252b
- statusBarItem.hoverBackground#2c313a
- statusBarItem.remoteBackground#4d78cc
- statusBarItem.remoteForeground#f8fafd
- symbolIcon.arrayForeground#ffd175
- symbolIcon.booleanForeground#ffad61
- symbolIcon.classForeground#42e8b4
- symbolIcon.colorForeground#3deefc
- symbolIcon.constantForeground#ffad61
- symbolIcon.constructorForeground#3deefc
- symbolIcon.enumeratorForeground#42e8b4
- symbolIcon.enumeratorMemberForeground#ffad61
- symbolIcon.eventForeground#ff7a8f
- symbolIcon.fieldForeground#ff7a8f
- symbolIcon.fileForeground#d7dae0
- symbolIcon.folderForeground#d7dae0
- symbolIcon.functionForeground#3deefc
- symbolIcon.interfaceForeground#42e8b4
- symbolIcon.keyForeground#ff7a8f
- symbolIcon.keywordForeground#ff47f7
- symbolIcon.methodForeground#3deefc
- symbolIcon.moduleForeground#42e8b4
- symbolIcon.namespaceForeground#42e8b4
- symbolIcon.nullForeground#ffad61
- symbolIcon.numberForeground#ffad61
- symbolIcon.objectForeground#42e8b4
- symbolIcon.operatorForeground#ff85ff
- symbolIcon.packageForeground#42e8b4
- symbolIcon.propertyForeground#f2c86d
- symbolIcon.referenceForeground#d7dae0
- symbolIcon.snippetForeground#7eefa9
- symbolIcon.stringForeground#7eefa9
- symbolIcon.structForeground#42e8b4
- symbolIcon.textForeground#d7dae0
- symbolIcon.typeParameterForeground#42e8b4
- symbolIcon.unitForeground#ffad61
- symbolIcon.variableForeground#ff7a8f
- tab.activeBackground#1a2133
- tab.activeBorder#3deefc
- tab.activeForeground#ffffff
- tab.border#141b2c
- tab.hoverBackground#2a3652
- tab.inactiveBackground#141b2c
- tab.inactiveForeground#8cc1ff
- tab.unfocusedActiveBorder#5f7ce2
- terminal.ansiBlack#3f4451
- terminal.ansiBlue#5f7ce2
- terminal.ansiBrightBlack#4f5666
- terminal.ansiBrightBlue#6a8fff
- terminal.ansiBrightCyan#65f9ff
- terminal.ansiBrightGreen#96ffbd
- terminal.ansiBrightMagenta#e7afff
- terminal.ansiBrightRed#ff95a6
- terminal.ansiBrightWhite#e6e6e6
- terminal.ansiBrightYellow#ffe1a0
- terminal.ansiCyan#3deefc
- terminal.ansiGreen#7eefa9
- terminal.ansiMagenta#d580ff
- terminal.ansiRed#ff7a8f
- terminal.ansiWhite#d0d0d0
- terminal.ansiYellow#ffd175
- terminal.foreground#abb2bf
- terminal.selectionBackground#2a3c68
- terminalCursor.background#000000
- terminalCursor.foreground#3deefc
- textLink.activeForeground#61afef
- textLink.foreground#528bff
- titleBar.activeBackground#151823
- titleBar.activeForeground#8B9FD9
- titleBar.border#3deefc33
- titleBar.inactiveBackground#141b2c
- titleBar.inactiveForeground#8cc1ff
- tree.indentGuidesStroke#3b4048
- tree.tableColumnsBorder#3deefc33
- tree.tableOddRowsBackground#1a2133
- treeView.background#141b2c
- treeView.border#3deefc33
- walkThrough.embeddedEditorBackground#141b2c
- welcomePage.buttonBackground#1d2944
- welcomePage.buttonHoverBackground#2a3c68
- widget.shadow#00000055
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded, source.groovy.embedded, string meta.image.inline.markdown | #bcc5d9 | — |
| emphasis | — | italic |
| strong | — | bold |
| header | #ff7a8f | — |
| comment, punctuation.definition.comment | #8B9FD9 | italic |
| keyword.other.phpdoc.php, meta.other.type.phpdoc.php, storage.type.class.phpdoc.php | #FF47F7 | bold |
| meta.other.type.phpdoc.php, keyword.other.type.php, storage.type.php, meta.phpdoc.type.php | #00FF9D | bold |
| variable.other.phpdoc.php | #ff7a8f | — |
| constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language | #ffad61 | — |
| entity.name, meta.export.default, meta.definition.variable | #ffd175 | — |
| variable.parameter.function, meta.parameter | #bcc5d9 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #36f9f6 | bold |
| entity.other.attribute-name | #ffcc44 | italic |
| string.quoted.double.html, string.quoted.single.html | #9dff8d | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #f19fff | — |
| variable, variable.other, variable.other.readwrite, variable.other.php, variable.other.js, variable.other.ts, variable.other.python, variable.parameter, meta.definition.variable, variable.other.php, punctuation.definition.variable.php, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.parameter.function.language.python, variable.parameter.function.python, meta.definition.variable variable.other, meta.definition.variable.name | #66D9FF | — |
| variable.other.constant.property | #ffad61 | — |
| meta.object-literal.key | #3deefc | — |
| 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 | #3deefc | — |
| string, punctuation.definition.string, support.constant.property-value.string, meta.embedded.line.php string | #7eefa9 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #ff7a8f | — |
| reset, constant.language.boolean, constant.language.null, constant.language.undefined, meta.structure.dictionary.json support.type.property-name.json | #ffad61 | bold |
| support.type.property-name, meta.object-literal.key | #3deefc | — |
| meta.object.member, variable.other.readwrite.js, variable.other.property.js | #bcc5d9 | — |
| entity.name.function, meta.function-call, variable.function, support.function, support.constant.handlebars, source.powershell variable.other.member, meta.function-call.php, entity.name.function.php, variable.language.super | #3deefc | bold |
| support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class | #42e8b4 | bold |
| storage.type.php, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy | #42e8b4 | bold |
| meta.method.body.php, meta.method.identifier.php, meta.method.php | #bcc5d9 | — |
| meta.class-method.php entity.name.function.php, meta.class-method.php meta.function-call.php | #3deefc | — |
| keyword.operator, keyword.operator.expression, keyword.operator.new, keyword.operator.logical | #ff85ff | bold |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.import | #ff47f7 | bold |
| constant.numeric, constant.character.numeric | #ffad61 | — |
| variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.other.object.property.js, entity.name.type.module.js, variable.import.parameter.js | #ff7a8f | — |
| support.constant, keyword.other.special-method | #3deefc | — |
| storage, storage.type, support.type.primitive | #ff80ff | bold |
| meta.structure.dictionary.json support.type.property-name.json | #3deefc | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #7eefa9 | — |
| meta.diff, meta.diff.header | #d580ff | — |
| source.ruby variable.other.readwrite | #ff7a8f | — |
| source.css entity.name.tag | #5f7ce2 | bold |
| source.css support.type, source.css entity.other.attribute-name | #ffd175 | — |
| source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.class | #ffad61 | bold |
| source.css support.constant.property-value | #7eefa9 | — |
| punctuation.separator.key-value.html, punctuation.separator.key-value.css, punctuation.separator.key-value.js | #bcc5d9 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #ff7a8f | bold |
| punctuation.definition.variable.php | #ff7a8f | — |
| variable.other.php, variable.other.property.php | #ff7a8f | — |
| support.class.php, meta.function-call.php, meta.function-call.static.php, meta.function-call.object.php | #3deefc | — |
| keyword.other.namespace.php | #d580ff | bold |
| variable.language.this.php | #ffd175 | bold |
| constant.language.php | #ffad61 | bold |
| support.function.magic.php | #fc85ff | bold |
| punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.square.php, punctuation.definition.end.bracket.square.php, punctuation.definition.array.begin.php, punctuation.definition.array.end.php | #8cc1ff | — |
| markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #FF47F7 | bold |
| markup.underline.link.markdown, markup.underline.link.image.markdown, meta.link.inline.markdown, meta.image.inline.markdown, string.other.link.title.markdown, string.other.link.description.markdown | #3deefc | — |
| markup.bold.markdown, punctuation.definition.bold.markdown | #00FFDD | bold |
| markup.italic.markdown, punctuation.definition.italic.markdown | #FF66C4 | italic |
| markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, markup.raw.block.markdown | #7eefa9 | — |
| punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown, markup.list.numbered.markdown | #ffad61 | — |
| markup.quote.markdown, punctuation.definition.quote.begin.markdown | #00FF9D | italic |
| meta.separator.markdown, punctuation.definition.constant.markdown | #36F9F6 | — |
| fenced_code.block.language.markdown | #FF47F7 | bold |
| keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.instanceof | #ff85ff | bold |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.trycatch | #ff47f7 | bold |
| storage, storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface, storage.modifier.async, support.type.primitive | #ff80ff | bold |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #f2c86d | — |
| variable.other.readwrite, variable.other.readwrite.ts | #ff917e | — |
| keyword.operator.type.annotation, meta.type.annotation | #ba75e8 | — |
| meta.type.parameters, meta.type.annotation entity.name.type | #7efbcb | — |
| constant.language.boolean.true, constant.language.boolean.false, constant.language.null, constant.language.undefined | #f7916b | bold |
| storage.type.function.arrow | #fc85ff | bold |
| entity.name.type.class.ts, entity.name.type.class.tsx | #3cffc3 | bold |
| entity.other.inherited-class.ts, entity.other.inherited-class.tsx | #84ffd7 | bold |
| meta.decorator.ts, meta.decorator.tsx | #ffd659 | — |
| meta.field.declaration.ts, meta.field.declaration.tsx, variable.object.property.ts, variable.object.property.tsx | #ffb86c | — |
| keyword.control.export.ts, keyword.control.import.ts | #ff9ceb | bold |
| keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.conditional.ts, keyword.control.conditional.tsx | #bd93f9 | bold |
| entity.name.function.ts, entity.name.function.tsx, meta.definition.method.ts | #29edff | bold |
| string.template | #9dff8d | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #ff9ceb | — |
| text.html | #ffffff | — |
| text.html.derivative | #ffffff | — |
| entity.name.function, meta.function-call, support.function, entity.name.function.php, entity.name.function.ts, entity.name.function.tsx | #3deefc | bold |
| entity.name.type.class, entity.name.class, entity.name.type.class.ts, entity.name.type.class.tsx, support.class.php | #42e8b4 | bold |
| keyword.control.flow, keyword.control.return, keyword.control.throw, keyword.control.try, keyword.control.catch | #ff47f7 | bold |
| storage.type.class, storage.type.interface, storage.type.enum | #ff80ff | bold |
| entity.name.tag.html, entity.name.tag.structure.any.html | #36f9f6 | bold |
| entity.name.tag.css, source.css entity.name.tag, source.scss entity.name.tag | #5f7ce2 | bold |
| entity.name.function, meta.function-call, support.function, variable.function, *.function, *.function-call, *.method, support.function.*, meta.function.*, meta.method.* | #3deefc | bold |
| variable, variable.other, variable.parameter, meta.definition.variable, *.variable, variable.*, support.variable.* | #ff7a8f | — |
| entity.name.type, entity.name.class, support.class, support.type, *.class, *.type, *.interface | #42e8b4 | bold |
| keyword.control, keyword.control.* | #ff47f7 | bold |
| keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type.function.arrow | #ff85ff | bold |
| constant, constant.language, variable.other.constant, support.constant | #ffad61 | bold |
| string, string.quoted, string.template | #7eefa9 | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name | #f2c86d | — |
| variable, variable.other, variable.parameter, variable.other.readwrite, variable.other.php, punctuation.definition.variable.php, variable.other.js, variable.other.ts, variable.other.python | #66D9FF | — |
| entity.name.function, meta.function-call, support.function, variable.function | #00FFDD | bold |
| keyword, keyword.control, storage.type, storage.modifier | #FF47F7 | bold |
| string, string.quoted, string.template | #7eefa9 | — |
| entity.name.type, entity.name.class, support.class, support.type | #00FF9D | bold |
| constant, variable.other.constant, support.constant, variable.other.enummember | #ffad61 | bold |
| variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name | #FF66C4 | — |
| keyword.operator, keyword.operator.logical, keyword.operator.assignment, keyword.operator.comparison | #36F9F6 | bold |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...