Aesthetic Theme
Publisher: Luis MonsalveThemes in package: 2
A minimal, aesthetic dark theme crafted for a clean coding experience.
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#0b0b0e
- activityBar.border#00000000
- activityBar.dropBackground#0b0b0e
- activityBar.foreground#E5E7EB
- activityBar.inactiveForeground#4B5563
- activityBarBadge.background#2563eb
- activityBarBadge.foreground#E5E7EB
- badge.background#1d4ed8
- badge.foreground#F3F4F6
- breadcrumb.background#0b0b0e
- breadcrumb.focusForeground#E5E7EB
- breadcrumb.foreground#9CA3AF
- button.background#1e40af
- button.foreground#E5E7EB
- button.hoverBackground#1d4ed8
- button.secondaryBackground#4B5563
- button.secondaryForeground#F3F4F6
- button.secondaryHoverBackground#6B7280
- debugToolBar.background#19191a
- diffEditor.border#9CA3AF
- diffEditor.insertedTextBackground#ca8a0459
- diffEditor.insertedTextBorder#9CA3AF
- diffEditor.removedTextBackground#dc262659
- diffEditor.removedTextBorder#9CA3AF
- dropdown.background#29292e
- dropdown.border#00000000
- dropdown.foreground#F3F4F6
- editor.background#0b0b0e
- editor.findMatchBackground#4B55638C
- editor.findMatchBorder#00000000
- editor.findMatchHighlightBackground#4B55638C
- editor.findMatchHighlightBorder#00000000
- editor.foldBackground#4B55638C
- editor.foreground#bdc3cc
- editor.inactiveSelectionBackground#6B72808C
- editor.lineHighlightBackground#4B55634D
- editor.rangeHighlightBackground#6B72808C
- editor.rangeHighlightBorder#00000000
- editor.selectionBackground#4B55638C
- editor.selectionHighlightBackground#4B55638C
- editor.selectionHighlightBorder#00000000
- editor.wordHighlightBackground#4B55638C
- editor.wordHighlightBorder#00000000
- editor.wordHighlightStrongBackground#4B55638C
- editor.wordHighlightStrongBorder#00000000
- editorBracketMatch.background#37415159
- editorCodeLens.foreground#9CA3AF
- editorCursor.background#030712
- editorCursor.foreground#9CA3AF
- editorError.foreground#ef4444
- editorGroup.border#9CA3AF
- editorGroup.dropBackground#0b0b0eE6
- editorGroupHeader.border#00000000
- editorGroupHeader.noTabsBackground#0b0b0e
- editorGroupHeader.tabsBackground#0b0b0e
- editorGroupHeader.tabsBorder#00000000
- editorGutter.addedBackground#22c55e
- editorGutter.background#0b0b0e
- editorGutter.commentRangeForeground#4B5563
- editorGutter.deletedBackground#ef4444
- editorGutter.foldingControlForeground#9CA3AF
- editorGutter.itemHoverBackground#19191a
- editorGutter.modifiedBackground#eab308
- editorHoverWidget.background#0b0b0e
- editorHoverWidget.border#6B7280
- editorHoverWidget.foreground#E5E7EB
- editorHoverWidget.statusBarBackground#19191a
- editorIndentGuide.background#1F2937
- editorInfo.foreground#3b82f6
- editorLineNumber.activeForeground#bdc3cc
- editorLineNumber.foreground#6B7280
- editorLink.activeForeground#3b82f6
- editorMarkerNavigation.background#0b0b0e
- editorMarkerNavigationError.background#dc2626
- editorMarkerNavigationInfo.background#2563eb
- editorMarkerNavigationWarning.background#ca8a04
- editorOverviewRuler.addedForeground#22c55e
- editorOverviewRuler.border#00000000
- editorOverviewRuler.bracketMatchForeground#60a5fa
- editorOverviewRuler.deletedForeground#7f1d1d
- editorOverviewRuler.errorForeground#ef4444
- editorOverviewRuler.findMatchForeground#3b82f673
- editorOverviewRuler.infoForeground#a855f7
- editorOverviewRuler.modifiedForeground#eab308
- editorOverviewRuler.warningForeground#713f12
- editorSuggestWidget.background#0b0b0e
- editorSuggestWidget.border#00000000
- editorSuggestWidget.focusHighlightForeground#F3F4F6
- editorSuggestWidget.foreground#9CA3AF
- editorSuggestWidget.highlightForeground#9CA3AF
- editorSuggestWidget.selectedBackground#19191a
- editorSuggestWidget.selectedForeground#E5E7EB
- editorSuggestWidget.selectedIconForeground#F3F4F6
- editorWarning.foreground#eab308
- editorWhitespace.foreground#1F2937
- editorWidget.background#19191a
- editorWidget.border#00000000
- editorWidget.resizeBorder#6B7280
- errorForeground#9CA3AF
- focusBorder#00000000
- foreground#9CA3AF
- gitDecoration.addedResourceForeground#22c55e
- gitDecoration.conflictingResourceForeground#a855f7
- gitDecoration.deletedResourceForeground#ef4444
- gitDecoration.ignoredResourceForeground#4B5563
- gitDecoration.modifiedResourceForeground#eab308
- gitDecoration.stageDeletedResourceForeground#b91c1c
- gitDecoration.stageModifiedResourceForeground#854d0e
- gitDecoration.submoduleResourceForeground#a16207
- gitDecoration.untrackedResourceForeground#15803d
- input.background#29292e
- input.foreground#E5E7EB
- input.placeholderForeground#374151
- inputOption.activeBackground#29292e
- inputOption.activeBorder#2563eb
- inputValidation.errorBackground#7f1d1d
- inputValidation.errorBorder#00000000
- inputValidation.errorForeground#bdc3cc
- inputValidation.infoBackground#1e3a8a
- inputValidation.infoBorder#00000000
- inputValidation.infoForeground#bdc3cc
- inputValidation.warningBackground#713f12
- inputValidation.warningBorder#00000000
- inputValidation.warningForeground#bdc3cc
- list.activeSelectionBackground#4B556366
- list.activeSelectionForeground#bdc3cc
- list.dropBackground#00000000
- list.filterWidget.background#19191a
- list.filterWidget.noMatchesOutline#dc2626
- list.filterWidget.outline#9CA3AF
- list.focusAndSelectionOutline#00000000
- list.focusBackground#29292e
- list.focusForeground#E5E7EB
- list.focusOutline#00000000
- list.highlightForeground#3b82f6
- list.hoverBackground#37415159
- list.hoverForeground#bdc3cc
- list.inactiveFocusBackground#19191a
- list.inactiveSelectionBackground#4B556366
- list.inactiveSelectionForeground#bdc3cc
- listFilterWidget.noMatchesOutline#dc2626
- listFilterWidget.outline#111827
- listFilterWidget.shadow#000
- menu.background#19191a
- menu.border#00000000
- menu.foreground#bdc3cc
- menu.selectionBackground#29292e
- menu.selectionBorder#00000000
- menu.selectionForeground#bdc3cc
- menu.separatorBackground#52525b
- menubar.selectionBorder#00000000
- merge.commonContentBackground#37415159
- merge.commonHeaderBackground#4B556359
- merge.currentContentBackground#22c55e59
- merge.currentHeaderBackground#22c55e59
- merge.incomingContentBackground#9333ea59
- merge.incomingHeaderBackground#a855f759
- notificationCenter.background#19191a
- notificationCenterHeader.background#19191a
- notificationCenterHeader.border#9CA3AF
- notificationCenterHeader.foreground#E5E7EB
- notificationLink.foreground#3b82f6
- notifications.background#19191a
- notifications.border#00000000
- notifications.foreground#bdc3cc
- notificationsErrorIcon.foreground#ef4444
- notificationsInfoIcon.foreground#3b82f6
- notificationsWarningIcon.foreground#eab308
- notificationToast.border#00000000
- peekView.border#6B7280
- peekViewEditor.background#0b0b0e
- peekViewEditor.matchHighlightBackground#4B556380
- peekViewEditorGutter.background#0b0b0e
- peekViewResult.background#0b0b0e
- peekViewResult.fileForeground#E5E7EB
- peekViewResult.hoverBackground#37415159
- peekViewResult.lineForeground#9CA3AF
- peekViewResult.matchHighlightBackground#4B556380
- peekViewResult.selectionForeground#E5E7EB
- peekViewTitle.background#19191a
- peekViewTitleDescription.foreground#9CA3AF
- peekViewTitleLabel.foreground#E5E7EB
- progressBar.background#2563eb
- scrollbar.shadow#000
- scrollbarSlider.activeBackground#71717a
- scrollbarSlider.background#29292e
- scrollbarSlider.hoverBackground#52525b
- sideBar.background#0b0b0e
- sideBar.border#29292e
- sideBar.dropBackground#52525b
- sideBar.foreground#9CA3AFCC
- sideBarSectionHeader.background#19191a
- sideBarSectionHeader.border#29292e
- sideBarSectionHeader.foreground#E5E7EB
- sideBarTitle.foreground#9CA3AF
- statusBar.background#19191a
- statusBar.debuggingBackground#29292e
- statusBar.foreground#bdc3cc
- statusBar.noFolderBackground#19191a
- statusBarItem.activeBackground#52525b
- statusBarItem.errorBackground#7f1d1d
- statusBarItem.errorForeground#fecaca
- statusBarItem.hoverBackground#52525b
- statusBarItem.remoteBackground#29292e
- statusBarItem.remoteForeground#bdc3cc
- statusBarItem.warningBackground#713f12
- statusBarItem.warningForeground#fef08a
- tab.activeBackground#29292e
- tab.activeBorder#2563eb
- tab.activeBorderBottom#2563eb
- tab.activeBorderTop#00000000
- tab.activeForeground#F3F4F6
- tab.border#00000000
- tab.hoverBackground#19191a
- tab.hoverForeground#E5E7EB
- tab.inactiveBackground#0b0b0e
- tab.inactiveForeground#9CA3AF
- tab.unfocusedActiveBackground#19191a
- tab.unfocusedActiveForeground#bdc3cc
- tab.unfocusedInactiveBackground#0b0b0e
- tab.unfocusedInactiveForeground#4B5563
- terminal.ansiBlack#000000
- terminal.ansiBlue#2472c8
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#3b8eea
- terminal.ansiBrightCyan#29b8db
- terminal.ansiBrightGreen#23d18b
- terminal.ansiBrightMagenta#d670d6
- terminal.ansiBrightRed#f14c4c
- terminal.ansiBrightWhite#e5e5e5
- terminal.ansiBrightYellow#f5f543
- terminal.ansiCyan#11a8cd
- terminal.ansiGreen#0dbc79
- terminal.ansiMagenta#bc3fbc
- terminal.ansiRed#cd3131
- terminal.ansiWhite#e5e5e5
- terminal.ansiYellow#e5e510
- terminal.background#0b0b0e
- terminal.border#6B7280
- terminal.foreground#E5E7EB
- terminal.inactiveSelectionBackground#6B728059
- terminal.selectionBackground#6B728059
- terminalCursor.background#bdc3cc
- terminalCursor.foreground#bdc3cc
- textLink.foreground#3b82f6
- titleBar.activeBackground#0b0b0e
- titleBar.activeForeground#9CA3AF
- titleBar.background#0b0b0e
- titleBar.border#00000000
- titleBar.inactiveBackground#0b0b0e
- titleBar.inactiveForeground#9CA3AF
- tree.indentGuidesStroke#1F2937
- widget.shadow#000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character | #009E60 | — |
| comment, punctuation.definition.comment, comment.block.documentation, comment.block.documentation punctuation | #6B7280 | — |
| variable.other.constant, constant.language, constant.numeric, support.constant, constant.other.caps | #fa9f38 | — |
| storage.type, meta.var.expr storage.type, storage.modifier, keyword, keyword.control, keyword.other.important, keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.operator, meta.import keyword.other, keyword.control.as | #2d69ec | bold |
| keyword.other, keyword.operator.bitwise.shift, punctuation.accessor, expression.embbeded.vue punctuation.definition.tag, punctuation.separator.key-value, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, text.html.vue-html meta.tag, meta.attribute.directive, punctuation.terminator.rule, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url, meta.embedded.inline.phpx punctuation.definition.tag.begin.html, meta.embedded.inline.phpx punctuation.definition.tag.end.html | #bdc3cc | — |
| keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.control.at-rule, keyword.operator.or.regexp | #2d69ec | bold |
| meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs | #bf88f3 | — |
| meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.block entity.name.label | #6D90DA | — |
| variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property | #6D90DA | — |
| entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function | #bf88f3 | — |
| variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable | #fa9f38 | — |
| support.class, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.function, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier | #099ec3 | bold |
| variable.other.readwrite.alias, variable.other.constant.object | #bdc3cc | — |
| string.regexp | #11cd8e | — |
| entity.name.section.markdown, punctuation.definition.heading.markdown | #099ec3 | bold |
| markup.heading.setext | #099ec3 | — |
| punctuation.definition.bold.markdown | #2d69ec | — |
| punctuation.definition.list.begin.markdown | #2d69ec | — |
| markup.inline.raw.markdown, markup.inline.raw.string.markdown | #11cd8e | — |
| punctuation.definition.list.markdown | #9CA3AF | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #9CA3AF | — |
| punctuation.definition.metadata.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown | #9CA3AF | — |
| markup.underline.link.markdown,markup.underline.link.image.markdown | #2d69ec | — |
| string.other.link.title.markdown,string.other.link.description.markdown | #11cd8e | — |
| markup.quote.markdown | #bf88f3 | italic |
| punctuation.definition.quote.begin.markdown | #bf88f3 | — |
| markup.italic.markdown | — | italic |
| meta.separator.markdown | #2d69ec | bold |
| markup.italic.markdown | #099ec3 | italic |
| markup.bold.markdown | #2d69ec | bold |
| markup.strikethrough.markdown | #fa9f38 | — |
| markup.fenced_code.block.markdown | #2d69ec | bold |
| fenced_code.block.language.markdown | #099ec3 | — |
| invalid.deprecated.entity.other.attribute-name.html | #fa9f38 | — |
| constant.character.entity | #099ec3 | bold |
| entity.name.tag | #2d69ec | — |
| entity.other.attribute-name | #fa9f38 | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end | #2d69ec99 | — |
| comment.block.html | #6B7280 | — |
| support.class.component | #099ec3 | — |
| entity.name.tag.css | #099ec3 | bold |
| entity.other.attribute-name.id | #fa9f38 | bold |
| meta.property-name.scss, support.type.property-name | #2d69ec | — |
| entity.other.attribute-name.class, string.unquoted.less, entity.other.attribute-name.class.css | #009E60 | bold |
| variable.scss, variable.css, variable.less, variable.argument.css, support.other.variable.less, punctuation.definition.variable.less, variable.other.less | #fa9f38 | bold |
| support.constant.property-value, meta.property-value | #099ec3 | normal |
| keyword.other.unit, constant.other.color.rgb-value.hex | #099ec3 | — |
| keyword.operator.css, keyword.operator.less, keyword.operator.scss | #099ec3 | bold |
| support.constant.color.w3c-extended-color-name, support.constant.color.w3c-standard-color-name | #099ec3 | — |
| support.type.vendored.property-name | #099ec3 | — |
| entity.other.attribute-name.pseudo-element, entity.other.attribute-name.parent, entity.other.attribute-name.pseudo-class, entity.name.tag.reference.css, entity.name.tag.reference.scss, entity.name.tag.reference.less | #099ec3 | bold |
| support.function.transform, support.function.calc, support.function.misc | #bf88f3 | — |
| support.constant.font-name | #009E60 | — |
| variable.parameter.css, variable.parameter.scss, variable.parameter.url.css, variable.parameter.url.scss | #099ec3 | — |
| keyword.control.at-rule.forward.scss, keyword.control.at-rule.import.less | #2d69ec | — |
| keyword.control | #2d69ec | bold |
| meta.property-name.scss, meta.property-list | #bf88f3 | — |
| punctuation.terminator.rule.scss, punctuation.separator.list.comma.css, punctuation.separator.delimiter.scss, punctuation.definition.begin.bracket.round.scss, punctuation.section.function.begin.bracket.round.css, punctuation.definition.end.bracket.round.scss, punctuation.section.function.end.bracket.round.css, punctuation.separator.key-value.scss, punctuation.section.function.scss, punctuation.definition.group.begin.less, punctuation.definition.group.end.less, punctuation.definition.block.begin.less, punctuation.separator.less, punctuation.definition.block.end.less, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.definition.block.scss, punctuation.terminator.rule.css, punctuation.terminator.rule.less, punctuation.separator.key-value.css, punctuation.section.braces.end.less, punctuation.section.braces.begin.less, punctuation.separator.key-value.less, punctuation.definition.block.begin.bracket.curly.scss, punctuation.definition.block.end.bracket.curly.scss, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.media-query.begin.bracket.round.scss, punctuation.definition.media-query.end.bracket.round.scss, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.less, punctuation.section.property-list.end.bracket.curly.less | #bdc3cc | — |
| meta.at-rule.if, support.type.property-name.media, support.constant.media, meta.at-rule.else | #bdc3cc | — |
| constant.numeric.css, constant.numeric.scss, constant.numeric.less | #bdc3cc | — |
| entity.name.tag.wildcard | #099ec3 | — |
| constant.character.escape | #11cd8e | — |
| constant.language.json | #099ec3 | — |
| support.type.property-name.json | #2d69ec | bold |
| string.quoted.double.json | #009E60 | — |
| support.variable.property.importmeta.ts | #6D90DA | bold |
| keyword.operator.expression.typeof, keyword.operator.type.annotation.ts | #099ec3 | bold |
| variable.other.env | #2d69ec | bold |
| keyword.operator.assignment.env | #bdc3cc | — |
| keyword.operator.access.dot.rust | #bdc3cc | — |
| entity.name.function.macro.rust | #bf88f3 | — |
| variable.other.rust | #fa9f38 | — |
| punctuation.definition.block.sequence.item.yaml | — | bold |
| entity.tag.apacheconf | #099ec3 | — |
| entity.mime-type.apacheconf | #009E60 | — |
| entity.name.function.graphql | #bf88f3 | — |
| variable.parameter.graphql | #fa9f38 | — |
| meta.type.object.graphql | #6D90DA | — |
| keyword.other.DML | #099ec3 | — |