Frostpane — Frosted Glass Dark
Publisher: kpabThemes in package: 1
A frosted-glass dark theme for VS Code. Cool, milky, low-contrast — no CSS injection required.
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#7bb4ea
- activityBar.background#13171e
- activityBar.foreground#dbe2ee
- activityBar.inactiveForeground#6a7688
- activityBarBadge.background#7bb4ea
- activityBarBadge.foreground#13171e
- badge.background#c4d6ec33
- badge.foreground#c4d6ec
- breadcrumb.activeSelectionForeground#a8d2f7
- breadcrumb.focusForeground#dbe2ee
- breadcrumb.foreground#6a7688
- breadcrumbPicker.background#2a3141
- button.background#7bb4ea
- button.foreground#13171e
- button.hoverBackground#a8d2f7
- button.secondaryBackground#2a3141
- button.secondaryForeground#dbe2ee
- descriptionForeground#9aa6b8
- diffEditor.insertedTextBackground#93c2a01f
- diffEditor.removedTextBackground#d98b8b1f
- dropdown.background#2a3141
- dropdown.border#333d50
- dropdown.foreground#dbe2ee
- editor.background#191e27
- editor.findMatchBackground#a8d2f757
- editor.findMatchHighlightBackground#a8d2f72e
- editor.foreground#dbe2ee
- editor.inactiveSelectionBackground#7bb4ea24
- editor.lineHighlightBackground#dbe2ee0a
- editor.rangeHighlightBackground#7bb4ea1a
- editor.selectionBackground#7bb4ea47
- editor.selectionHighlightBackground#7bb4ea29
- editor.wordHighlightBackground#7ad2d929
- editor.wordHighlightStrongBackground#7ad2d93d
- editorBracketHighlight.foreground1#7bb4ea
- editorBracketHighlight.foreground2#7ad2d9
- editorBracketHighlight.foreground3#c8b0ec
- editorBracketHighlight.foreground4#8fd3ad
- editorBracketHighlight.unexpectedBracket.foreground#d98b8b
- editorBracketMatch.background#7ad2d933
- editorBracketMatch.border#7ad2d980
- editorCodeLens.foreground#6a7688
- editorCursor.foreground#a8d2f7
- editorError.foreground#d98b8b
- editorGroup.border#333d50
- editorGroupHeader.border#333d50
- editorGroupHeader.tabsBackground#13171e
- editorGutter.addedBackground#93c2a0
- editorGutter.deletedBackground#d98b8b
- editorGutter.modifiedBackground#8fb6e0
- editorHoverWidget.background#2a3141f5
- editorHoverWidget.border#333d50
- editorIndentGuide.activeBackground1#6a7688
- editorIndentGuide.background1#454f6080
- editorInfo.foreground#8fb6e0
- editorInlayHint.background#dbe2ee0d
- editorInlayHint.foreground#6a7688
- editorLineNumber.activeForeground#9aa6b8
- editorLineNumber.foreground#454f60
- editorLink.activeForeground#a8d2f7
- editorOverviewRuler.border#333d50
- editorOverviewRuler.errorForeground#d98b8bb3
- editorOverviewRuler.findMatchForeground#a8d2f780
- editorOverviewRuler.selectionHighlightForeground#7bb4ea66
- editorOverviewRuler.warningForeground#d9c48bb3
- editorRuler.foreground#333d50
- editorSuggestWidget.background#2a3141
- editorSuggestWidget.border#333d50
- editorSuggestWidget.highlightForeground#a8d2f7
- editorSuggestWidget.selectedBackground#7bb4ea38
- editorWarning.foreground#d9c48b
- editorWhitespace.foreground#454f6099
- editorWidget.background#2a3141
- editorWidget.border#333d50
- errorForeground#d98b8b
- focusBorder#7bb4ea80
- foreground#dbe2ee
- gitDecoration.addedResourceForeground#93c2a0
- gitDecoration.deletedResourceForeground#d98b8b
- gitDecoration.ignoredResourceForeground#454f60
- gitDecoration.modifiedResourceForeground#8fb6e0
- gitDecoration.untrackedResourceForeground#7ad2d9
- icon.foreground#9aa6b8
- input.background#2a3141
- input.border#333d50
- input.foreground#dbe2ee
- input.placeholderForeground#6a7688
- inputOption.activeBorder#7bb4ea
- list.activeSelectionBackground#7bb4ea38
- list.activeSelectionForeground#dbe2ee
- list.focusBackground#7bb4ea33
- list.highlightForeground#a8d2f7
- list.hoverBackground#dbe2ee0d
- list.inactiveSelectionBackground#7bb4ea1f
- menu.background#2a3141
- menu.border#333d50
- menu.foreground#dbe2ee
- menu.selectionBackground#7bb4ea38
- menu.selectionForeground#dbe2ee
- menu.separatorBackground#333d50
- menubar.selectionBackground#dbe2ee0f
- minimap.background#191e27
- minimap.findMatchHighlight#a8d2f780
- minimap.selectionHighlight#7bb4ea66
- minimapSlider.activeBackground#9aa6b84d
- minimapSlider.background#9aa6b81f
- minimapSlider.hoverBackground#9aa6b833
- notificationCenterHeader.background#212836
- notificationLink.foreground#a8d2f7
- notifications.background#2a3141
- notifications.border#333d50
- notifications.foreground#dbe2ee
- panel.background#191e27
- panel.border#333d50
- panelSection.border#333d50
- panelTitle.activeForeground#dbe2ee
- panelTitle.inactiveForeground#6a7688
- peekViewEditor.background#13171e
- peekViewResult.background#212836
- pickerGroup.border#333d50
- pickerGroup.foreground#c4d6ec
- quickInput.background#2a3141
- quickInput.foreground#dbe2ee
- quickInputList.focusBackground#7bb4ea38
- sash.hoverBorder#7bb4ea
- scrollbar.shadow#13171e80
- scrollbarSlider.activeBackground#9aa6b861
- scrollbarSlider.background#9aa6b829
- scrollbarSlider.hoverBackground#9aa6b847
- selection.background#7bb4ea4d
- sideBar.background#212836
- sideBar.border#333d50
- sideBar.foreground#9aa6b8
- sideBarSectionHeader.background#dbe2ee08
- sideBarSectionHeader.foreground#dbe2ee
- sideBarTitle.foreground#9aa6b8
- statusBar.background#13171e
- statusBar.border#333d50
- statusBar.debuggingBackground#7bb4ea
- statusBar.debuggingForeground#13171e
- statusBar.foreground#9aa6b8
- statusBar.noFolderBackground#13171e
- statusBarItem.remoteBackground#7bb4ea
- statusBarItem.remoteForeground#13171e
- tab.activeBackground#191e27
- tab.activeBorderTop#7bb4ea
- tab.activeForeground#dbe2ee
- tab.border#13171e
- tab.hoverBackground#2a3141
- tab.inactiveBackground#212836
- tab.inactiveForeground#6a7688
- terminal.ansiBlack#13171e
- terminal.ansiBlue#7bb4ea
- terminal.ansiBrightBlack#6a7688
- terminal.ansiBrightBlue#a8d2f7
- terminal.ansiBrightCyan#7ad2d9
- terminal.ansiBrightGreen#93c2a0
- terminal.ansiBrightMagenta#c8b0ec
- terminal.ansiBrightRed#d98b8b
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#d9c48b
- terminal.ansiCyan#7ad2d9
- terminal.ansiGreen#93c2a0
- terminal.ansiMagenta#c8b0ec
- terminal.ansiRed#d98b8b
- terminal.ansiWhite#dbe2ee
- terminal.ansiYellow#d9c48b
- terminal.background#191e27
- terminal.foreground#dbe2ee
- terminal.selectionBackground#7bb4ea47
- terminalCursor.foreground#a8d2f7
- textLink.activeForeground#c4d6ec
- textLink.foreground#a8d2f7
- titleBar.activeBackground#13171e
- titleBar.activeForeground#dbe2ee
- titleBar.inactiveBackground#13171e
- titleBar.inactiveForeground#6a7688
- tree.indentGuidesStroke#454f60b3
- widget.border#333d50
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #616d80 | italic |
| variable, meta.definition.variable.name, variable.other.readwrite | #d6dfec | — |
| variable.language, variable.other.constant, support.variable | #c8b0ec | — |
| keyword, storage, storage.type, storage.modifier | #b6a3ee | italic |
| keyword.control, keyword.other.return, keyword.import | #e0a6bb | italic |
| keyword.operator, punctuation.separator, punctuation.terminator, meta.brace | #8a95a6 | — |
| entity.name.function, support.function, meta.function-call | #7cb6f0 | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #6fd0d8 | — |
| string, punctuation.definition.string, string.template | #8fd3ad | — |
| constant.numeric, constant.language, constant.character, constant.other | #c8b0ec | — |
| variable.other.property, meta.object-literal.key, support.type.property-name | #a6c6ef | — |
| constant.language.boolean, constant.language.null, constant.language.undefined | #e6b98f | — |
| variable.language.this, variable.language.self, variable.language.super | #b6a3ee | italic |
| entity.name.namespace, entity.name.module, support.other.namespace | #a9c0dd | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, storage.type.annotation, meta.annotation | #6ecfd8 | — |
| entity.name.tag, punctuation.definition.tag | #7cb6f0 | — |
| entity.other.attribute-name | #7cb6f0 | — |
| variable.parameter | #d6dfec | — |
| punctuation.definition.parameters, punctuation.definition.array, punctuation.section, punctuation.accessor, meta.brace.round, meta.brace.square, meta.brace.curly | #7a8598 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b6a3ee | — |
| constant.character.escape, string.regexp, punctuation.definition.regexp | #e0a6bb | — |
| support.type.property-name.json, meta.structure.dictionary.key.json | #a6c6ef | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css | #7cb6f0 | — |
| support.type.property-name.css, support.type.property-name.scss | #a6c6ef | — |
| support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css | #c8b0ec | — |
| meta.function.decorator.python, entity.name.function.decorator.python | #6ecfd8 | — |
| string.quoted.docstring, comment.block.documentation | #616d80 | italic |
| markup.heading, entity.name.section | #7cb6f0 | bold |
| markup.bold | #c8b0ec | bold |
| markup.italic | #b6a3ee | italic |
| markup.underline.link, string.other.link | #a8d2f7 | underline |
| markup.quote | #8a97aa | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #8fd3ad | — |
| punctuation.definition.list.begin.markdown, markup.list | #6ecfd8 | — |
| invalid, invalid.illegal | #e08a8a | — |