After Sunset Theme
Publisher: Kamil MarutThemes in package: 1
Minimal dark syntax theme for VS Code
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.activeBorder#e5c100
- activityBar.background#1c1c1c
- activityBar.border#272727
- activityBar.foreground#aaaaaa
- activityBarBadge.background#e5c100
- badge.background#272727
- badge.foreground#f8f8f2
- breadcrumb.activeSelectionForeground#e5c100
- breadcrumb.focusForeground#f8f8f2
- breadcrumb.foreground#aaaaaa
- breadcrumbPicker.background#1c1c1c
- button.background#e6c200
- button.hoverBackground#ccac00
- debugExceptionWidget.border#e5c100
- debugToolBar.background#272727
- debugToolBar.border#272727
- descriptionForeground#aaaaaa
- dropdown.background#1c1c1c
- dropdown.border#272727
- dropdown.foreground#d4d4d4
- dropdown.listBackground#1c1c1c
- editor.background#1c1c1c
- editor.findMatchBackground#e5c10090
- editor.findMatchBorder#e5c10000
- editor.findMatchHighlightBackground#e5c10030
- editor.findMatchHighlightBorder#e5c10050
- editor.findRangeHighlightBackground#e5c10080
- editor.foreground#d4d4d4
- editor.lineHighlightBackground#272727
- editor.rangeHighlightBackground#e5c10020
- editor.selectionBackground#444444
- editor.selectionForeground#25313e
- editor.selectionHighlightBackground#27272750
- editor.selectionHighlightBorder#e5c1007a
- editor.wordHighlightBackground#42557b30
- editor.wordHighlightBorder#00000000
- editor.wordHighlightStrongBackground#42557b30
- editor.wordHighlightStrongBorder#00000000
- editorBracketMatch.background#1c1c1c
- editorBracketMatch.border#777777
- editorCursor.foreground#e5c100
- editorError.foreground#c42412
- editorGroup.border#272727
- editorGroup.dropBackground#1c1c1c
- editorGroup.emptyBackground#1c1c1c
- editorGroupHeader.tabsBackground#1c1c1c
- editorGroupHeader.tabsBorder#272727
- editorHint.foreground#e6db74
- editorHoverWidget.background#1c1c1c
- editorHoverWidget.border#e5c100
- editorIndentGuide.activeBackground1#b2cffb2a
- editorIndentGuide.background1#3a3a3a
- editorLineNumber.activeForeground#e5c100
- editorLineNumber.foreground#777777
- editorMarkerNavigation.background#1f2330
- editorOverviewRuler.border#b2cffb2a
- editorOverviewRuler.selectionHighlightForeground#f39b35
- editorPane.background#1f2330
- editorRuler.foreground#c7adfb2f
- editorSuggestWidget.background#272727
- editorSuggestWidget.border#e5c100
- editorSuggestWidget.foreground#e5c100
- editorSuggestWidget.highlightForeground#777777
- editorSuggestWidget.selectedBackground#272727
- editorWarning.foreground#f39b35
- editorWhitespace.foreground#272727
- editorWidget.background#272727
- editorWidget.border#e5c100
- errorForeground#c42412
- focusBorder#e5c10055
- foreground#d4d4d4
- input.background#1c1c1c
- input.border#272727
- input.foreground#aaaaaa
- input.placeholderForeground#444444
- inputOption.activeBorder#363c4c
- inputValidation.errorBackground#1c1c1c
- inputValidation.errorBorder#c42412
- inputValidation.infoBackground#1c1c1c
- inputValidation.infoBorder#919cb9
- inputValidation.warningBackground#1c1c1c
- inputValidation.warningBorder#f39b35
- list.activeSelectionBackground#899bbf3a
- list.dropBackground#f6f0ff15
- list.errorForeground#e22813
- list.focusBackground#899bbf30
- list.focusForeground#f6f0ff
- list.highlightForeground#f8f8f2
- list.hoverBackground#919cb915
- list.hoverForeground#f6f0ffea
- list.inactiveSelectionBackground#899bbf2c
- list.inactiveSelectionForeground#aaaaaa
- list.warningForeground#f39b35
- menu.background#1c1c1c
- menu.foreground#d4d4d4
- menu.selectionBackground#899bbf3a
- menu.selectionBorder#0f13207a
- menu.selectionForeground#f6f0ffea
- menubar.selectionBackground#899bbf3a
- menubar.selectionBorder#0f13200a
- menubar.selectionForeground#aaaaaa
- notificationCenter.border#e5c100
- notificationCenterHeader.background#1f2330
- notifications.border#e5c100
- notificationToast.border#e5c100
- panel.background#1c1c1c
- panel.border#272727
- panelTitle.activeBorder#e5c100
- panelTitle.activeForeground#e5c100
- panelTitle.inactiveForeground#aaaaaa
- peekView.border#e5c100
- peekViewEditor.background#1c1c1c
- peekViewEditor.matchHighlightBackground#363c4c
- peekViewResult.background#1c1c1c
- peekViewResult.matchHighlightBackground#363c4c
- peekViewResult.selectionBackground#35355190
- peekViewTitle.background#1f2330
- pickerGroup.border#b2cffb1a
- pickerGroup.foreground#e5c100
- progressBar.background#e5c100
- scrollbar.shadow#1c1c1c
- scrollbarSlider.activeBackground#555555
- scrollbarSlider.background#444444
- scrollbarSlider.hoverBackground#555555
- selection.background#444444
- settings.checkboxBackground#272727
- settings.checkboxBorder#1c1c1c
- settings.checkboxForeground#d4d4d4
- settings.dropdownBackground#1c1c1c
- settings.dropdownBorder#272727
- settings.dropdownForeground#d4d4d4
- settings.headerForeground#d4d4d4
- settings.numberInputBackground#1c1c1c
- settings.numberInputBorder#272727
- settings.numberInputForeground#d4d4d4
- settings.textInputBackground#1c1c1c
- settings.textInputBorder#272727
- settings.textInputForeground#d4d4d4
- sideBar.background#1c1c1c
- sideBar.border#272727
- sideBar.dropBackground#363c4c5f
- sideBar.foreground#aaaaaa
- sideBarSectionHeader.background#1c1c1c
- sideBarSectionHeader.foreground#aaaaaa
- sideBarTitle.foreground#aaaaaa
- statusBar.background#1c1c1c
- statusBar.border#272727
- statusBar.debuggingBackground#1c1c1c
- statusBar.debuggingForeground#e6c200
- statusBar.foreground#aaaaaa
- statusBar.noFolderBackground#1c1c1c
- statusBar.noFolderForeground#aaaaaa
- tab.activeBackground#1c1c1c
- tab.activeBorder#e5c100
- tab.activeForeground#f1f1ef
- tab.border#1c1c1c
- tab.hoverBorder#e5c100
- tab.inactiveBackground#1c1c1c
- tab.inactiveForeground#d4d4d4
- tab.unfocusedActiveBorder#272727
- tab.unfocusedActiveForeground#777777
- tab.unfocusedHoverBorder#777777
- tab.unfocusedInactiveForeground#79839c
- terminal.ansiBlack#1c1c1c
- terminal.ansiBlue#00a7aa
- terminal.ansiBrightBlack#555555
- terminal.ansiBrightBlue#00a7aa
- terminal.ansiBrightCyan#37e5e7
- terminal.ansiBrightGreen#98e342
- terminal.ansiBrightMagenta#ffb1f2
- terminal.ansiBrightRed#fc4384
- terminal.ansiBrightWhite#f1f1ef
- terminal.ansiBrightYellow#e6db74
- terminal.ansiCyan#37e5e7
- terminal.ansiGreen#98e342
- terminal.ansiMagenta#ffb1f2
- terminal.ansiRed#fc4384
- terminal.ansiWhite#d4d4d4
- terminal.ansiYellow#e6db74
- terminal.background#1c1c1c
- terminal.foreground#cccccc
- terminal.selectionBackground#42557b5a
- terminalCursor.background#1c1c1c
- terminalCursor.foreground#d4d4d4
- textBlockQuote.background#919cb91c
- textBlockQuote.border#e5c100
- textLink.activeForeground#ffb1f2
- textLink.foreground#e5c100
- textPreformat.foreground#a06fca
- textSeparator.foreground#919cb9
- titleBar.activeBackground#272727
- titleBar.activeForeground#d4d4d4
- titleBar.border#272727
- titleBar.inactiveBackground#444444
- titleBar.inactiveForeground#777777
- widget.shadow#1c1c1c
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #676B79 | italic |
| keyword | #FF75B5 | — |
| keyword.control, keyword.operator.new | #FF75B5 | — |
| keyword.operator | #E6E6E6 | — |
| keyword.operator.logical, keyword.operator.comparison | #FFCC95 | — |
| keyword.operator.misc, keyword.operator.sigil | #FF75B5 | — |
| storage | #FFB86C | — |
| constant | #FFB86C | — |
| constant.character.escape | #45A9F9 | — |
| variable | #E6E6E6 | — |
| variable.parameter | #BBBBBB | — |
| variable.other.constant, variable.language.this, variable.interpolation | #FF9AC1 | — |
| variable.other.object | #FF9AC1 | — |
| variable.other.property | #E6E6E6 | — |
| string | #19f9d8 | — |
| punctuation.definition.template-expression | #FFCC95 | — |
| support | #FFCC95 | — |
| support.class | #FFCC95 | — |
| support.function | #E5C100 | — |
| entity.name.function | #E5C100 | — |
| entity.other.inherited-class | #FF9AC1 | — |
| entity.name.tag.yaml | #FFCC95 | — |
| meta.decorator punctuation.decorator | #FFB86C | — |
| meta.decorator variable | #6FC1FF | — |
| keyword.other.special-method | #45A9F9 | — |
| keyword.control.at-rule | #B084EB | — |
| keyword.other.important | #FF4B82 | — |
| variable.interpolation | #FF75B5 | — |
| entity.name.type | #19f9d8 | italic |
| meta.source.handlebars entity.name.tag | #6FC1FF | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #FFCC95 | italic |
| entity.name.function.expression | #FF75B5 | — |
| entity.unescaped.expression | #B084EB | — |
| constant.other.symbol | #19f9d8 | — |
| entity.expression variable.parameter.name | #FFB86C | — |
| entity.expression variable.parameter.value | #6FC1FF | — |
| entity.expression support.function.builtin | #FF9AC1 | — |
| entity.name.tag.html | #FFCC95 | — |
| entity.other.attribute-name.handlebars | #FFCC95 | — |
| support.class.component | #FF75B5 | italic |
| entity.other.attribute-name | #FFB86C | — |
| markup.bold | #FFB86C | bold |
| punctuation.definition.bold.markdown | #FFCC95 | bold |
| markup.changed | #FF75B5 | — |
| markup.deleted | #FF2C6D | — |
| markup.italic | #FF9AC1 | italic |
| punctuation.definition.italic.markdown | #FF75B5 | italic |
| markup.inserted | #19f9d8 | — |
| punctuation.definition.heading | #19f9d8 | — |
| entity.name.section.markdown | #BBBBBB | — |
| markup.quote | #FFB86C | — |
| markup.inline.raw | #19f9d8 | italic |
| beginning.punctuation.definition.list | #FF75B5 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #757575 | — |
| fenced_code.block.language | #BBBBBB | italic |
| string.other.link | #BBBBBB | — |
| meta.link.inline.markdown | #45A9F9 | italic |
| text.html.markdown punctuation.definition.string | #FFCC95 | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #FF2C6D | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml | #FF2C6D | — |
| entity.name.tag.xml, meta.tag.xml | #FF2C6D | — |
| entity.name.tag.css | #FF2C6D | — |
| support.type.property-name.css | #E6E6E6 | — |
| variable.scss | #FF9AC1 | — |
| entity.name.tag.reference.scss | #FF2C6D | — |
| keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css | #FFB86C | — |
| string.regexp | #6FC1FF | — |
| string.regexp keyword, string.regexp keyword.control | #FF75B5 | |
| string.regexp keyword.operator | #FF9AC1 | — |
| comment.block.documentation | — | |
| comment.block storage | #FFCC95 | — |
| comment.block storage.custom | #FF9AC1 | — |