Sonder
Publisher: Hexkey Co.Themes in package: 1
Yet another dark theme for VSCode.
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#181818
- activityBar.border#2b2b2b
- activityBar.foreground#e3e3e3
- activityBarBadge.background#B794F6
- activityBarBadge.foreground#2b2b2b
- activityBarTop.foreground#e3e3e3
- badge.background#B794F6
- badge.foreground#2b2b2b
- breadcrumb.focusForeground#e3e3e3
- breadcrumb.foreground#e3e3e3
- button.background#2b2b2b
- button.border#2b2b2b
- button.foreground#e3e3e3
- button.hoverBackground#181818
- button.secondaryBackground#252526
- button.secondaryForeground#e3e3e3
- button.separator#e3e3e3
- checkbox.background#181818
- checkbox.border#2b2b2b
- commandCenter.activeBackground#1e1e1e
- commandCenter.activeBorder#2b2b2b
- commandCenter.background#181818
- commandCenter.border#2b2b2b
- commandCenter.inactiveBorder#2b2b2b
- debugConsole.errorForeground#ff3a3a
- debugConsole.infoForeground#e3e3e3
- debugConsole.sourceForeground#F9E79F
- debugConsole.warningForeground#ffce3a
- debugIcon.breakpointForeground#ff3a3a
- debugIcon.pauseForeground#B794F6
- debugIcon.restartForeground#6A9955
- debugIcon.stepBackForeground#B794F6
- debugIcon.stepIntoForeground#B794F6
- debugIcon.stepOutForeground#B794F6
- debugIcon.stepOverForeground#B794F6
- debugIcon.stopForeground#ff3a3a
- debugToolBar.background#181818
- debugView.stateLabelBackground#252526
- descriptionForeground#e3e3e399
- dropdown.background#181818
- dropdown.border#2b2b2b
- dropdown.foreground#e3e3e3
- editor.background#1e1e1e
- editor.findMatchBackground#045677
- editor.findMatchHighlightBackground#04648B30
- editor.findMatchHighlightBorder#04648Bf0
- editor.findRangeHighlightBackground#31313173
- editor.foreground#e3e3e3
- editor.hoverHighlightBackground#045677d0
- editor.lineHighlightBackground#2e2e2e
- editor.rangeHighlightBackground#313131f0
- editor.selectionBackground#045677a0
- editor.selectionHighlightBorder#04648Bf0
- editor.stackFrameHighlightBackground#ffffff3e
- editor.wordHighlightBackground#04567710
- editor.wordHighlightBorder#04648B
- editorBracketHighlight.foreground1#F89F68
- editorBracketHighlight.foreground2#DB9EFF
- editorBracketHighlight.foreground3#99B1FF
- editorCommentsWidget.rangeActiveBackground#04648Ba0
- editorCommentsWidget.rangeBackground#04648B80
- editorCommentsWidget.replyInputBackground#1e1e1e
- editorCommentsWidget.unresolvedBorder#a374f4
- editorCursor.foreground#e3e3e3
- editorError.foreground#ff3a3a
- editorGroup.border#2b2b2b
- editorGroup.dropBackground#1050993f
- editorGroupHeader.tabsBackground#181818
- editorGroupHeader.tabsBorder#2b2b2b
- editorIndentGuide.background1#ffffff38
- editorInlayHint.foreground#e3e3e3c5
- editorLineNumber.activeForeground#e3e3e3
- editorLineNumber.foreground#e3e3e330
- editorLink.activeForeground#B794F6
- editorRuler.foreground#313131
- editorStickyScrollHover.background#313131
- editorSuggestWidget.border#2b2b2b
- editorSuggestWidget.focusHighlightForeground#B794F6
- editorSuggestWidget.highlightForeground#B794F6
- editorWidget.background#252526
- editorWidget.border#2b2b2b
- editorWidget.foreground#e3e3e3
- errorForeground#ff3a3a
- extensionButton.background#2b2b2b
- extensionButton.foreground#e3e3e3
- extensionButton.hoverBackground#181818
- extensionButton.separator#e3e3e3
- focusBorder#2b2b2b
- foreground#e3e3e3
- git.blame.editorDecorationForeground#9a9a9aa0
- gitDecoration.modifiedResourceForeground#F9E79F
- gitlens.gutterBackgroundColor#1e1e1e00
- gitlens.gutterForegroundColor#e3e3e3
- gitlens.trailingLineForegroundColor#9a9a9aa0
- icon.foreground#e3e3e3
- input.background#252526
- input.border#2b2b2b
- input.foreground#e3e3e3
- keybindingLabel.background#313131
- keybindingLabel.border#2b2b2b
- keybindingLabel.bottomBorder#2b2b2b
- keybindingLabel.foreground#e3e3e3
- list.activeSelectionBackground#313131
- list.activeSelectionForeground#e3e3e3
- list.dropBackground#1050993f
- list.errorForeground#ff3a3a
- list.hoverBackground#313131
- list.hoverForeground#e3e3e3
- list.inactiveSelectionBackground#313131
- list.inactiveSelectionForeground#e3e3e3
- menu.background#252526
- menu.foreground#e3e3e3
- menu.selectionBackground#313131
- menu.selectionForeground#e3e3e3
- multiDiffEditor.headerBackground#181818
- notifications.background#181818
- notifications.border#2b2b2b
- panel.background#181818
- panel.border#2b2b2b
- panelInput.border#2b2b2b
- panelSection.dropBackground#1050993f
- panelTitle.activeForeground#e3e3e3
- panelTitle.inactiveForeground#e3e3e3
- peekView.border#2b2b2b
- peekViewEditor.background#252526
- peekViewResult.background#181818
- peekViewResult.fileForeground#e3e3e3
- peekViewResult.lineForeground#e3e3e3
- peekViewResult.matchHighlightBackground#045677
- peekViewResult.selectionBackground#2b2b2b
- peekViewResult.selectionForeground#e3e3e3
- peekViewTitle.background#181818
- peekViewTitleLabel.foreground#e3e3e3
- quickInput.background#181818
- quickInput.foreground#e3e3e3
- quickInputList.focusBackground#313131
- quickInputList.focusIconForeground#e3e3e3
- sash.hoverBorder#B794F6
- scrollbar.shadow#2b2b2b
- scrollbarSlider.activeBackground#e3e3e3B0
- scrollbarSlider.background#e3e3e360
- scrollbarSlider.hoverBackground#e3e3e390
- selection.background#04648Bf0
- settings.focusedRowBorder#2b2b2b
- settings.headerBorder#ffffff
- settings.headerForeground#e3e3e3
- sideBar.background#181818
- sideBar.border#2b2b2b
- sideBar.dropBackground#1050993f
- sideBar.foreground#e3e3e3
- sideBarSectionHeader.background#181818
- sideBarSectionHeader.border#2b2b2b
- statusBar.background#181818
- statusBar.border#2b2b2b
- statusBar.debuggingBackground#ac1f0d
- statusBar.debuggingForeground#e3e3e3
- statusBar.foreground#e3e3e3
- statusBar.noFolderBackground#181818
- statusBarItem.remoteBackground#B794F6
- statusBarItem.remoteForeground#181818
- statusBarItem.remoteHoverBackground#B794F6
- statusBarItem.remoteHoverForeground#e3e3e3
- tab.activeBorder#1e1e1e
- tab.activeBorderTop#B794F6
- tab.activeForeground#e3e3e3
- tab.activeModifiedBorder#B794F6
- tab.border#2b2b2b
- tab.hoverBackground#252526
- tab.inactiveBackground#181818
- tab.inactiveModifiedBorder#B794F6
- tab.lastPinnedBorder#2b2b2b
- terminal.dropBackground#1050993f
- terminal.foreground#e3e3e3
- terminalStickyScrollHover.background#313131
- textLink.activeForeground#B794F6
- textLink.foreground#B794F6
- titleBar.activeBackground#181818
- titleBar.activeForeground#e3e3e3
- titleBar.border#2b2b2b
- titleBar.inactiveBackground#181818
- titleBar.inactiveForeground#e3e3e392
- tree.indentGuidesStroke#e3e3e3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #9a9a9a | — |
| string, punctuation.definition.string, string.quoted.single.python | #82C76B | |
| constant.character.escape, support.other.escape.special | #F89F68 | bold |
| constant.numeric, constant.language.json.comments | #82C76B | — |
| constant.language.boolean.yaml, constant.language.null.yaml | — | bold |
| entity.name.type.enum, variable.other.enummember | #DB9EFF | |
| entity.name.namespace | — | |
| entity.name.type, support.type, storage.type | #DB9EFF | |
| keyword.control | — | bold |
| storage.type.struct | #DB9EFF | |
| entity.name.type.class, support.class | #DB9EFF | |
| entity.name.type.interface | #DB9EFF | |
| entity.name.function, support.function, entity.name.function.member | — | |
| entity.name.function.macro | #F89F68 | — |
| variable.other.readwrite, entity.name.variable, variable.other.constant, support.constant | — | — |
| variable.parameter | — | — |
| variable.parameter, variable.other.parameter | — | — |
| variable.other.event | — | — |
| keyword.function, keyword.control, keyword.var, keyword.type, keyword.package, keyword.interface | #99B1FF | — |
| punctuation.definition.decorator.python, entity.name.function.decorator.python, meta.function.decorator.python, entity.name.function.decorator.python | #F89F68 | — |
| constant.language.python, keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python, storage.type.class.python, storage.type.function.async.python, storage.type.function.lambda.python, storage.type.function.python | #99B1FF | — |
| variable.parameter.function-call.python | #e3e3e3 | |
| entity.name.tag.html | #99B1FF | — |
| entity.name.tag.js.jsx, entity.name.tag.tsx | #99B1FF | — |
| keyword.operator.ternary.js.jsx, keyword.operator.ternary.tsx, keyword.operator.ternary.js, keyword.operator.ternary.ts | — | bold |
| constant.language.boolean.false.js, constant.language.boolean.false.jsx, constant.language.boolean.false.ts, constant.language.boolean.false.tsx, constant.language.boolean.true.js, constant.language.boolean.true.jsx, constant.language.boolean.true.ts, constant.language.boolean.true.tsx, constant.language.null.js, constant.language.null.jsx, constant.language.null.ts, constant.language.null.tsx, constant.language.undefined.js, constant.language.undefined.jsx, constant.language.undefined.ts, constant.language.undefined.tsx, keyword.control.as.js, keyword.control.as.jsx, keyword.control.as.ts, keyword.control.as.tsx, keyword.control.conditional.js, keyword.control.conditional.jsx, keyword.control.conditional.ts, keyword.control.conditional.tsx, keyword.control.export.js, keyword.control.export.jsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.from.js, keyword.control.from.jsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.import.js, keyword.control.import.jsx, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.loop.js, keyword.control.loop.jsx, keyword.control.loop.ts, keyword.control.loop.tsx, keyword.control.switch.js, keyword.control.switch.jsx, keyword.control.switch.ts, keyword.control.switch.tsx, keyword.control.trycatch.js, keyword.control.trycatch.jsx, keyword.control.trycatch.ts, keyword.control.trycatch.tsx, keyword.operator.expression.delete.js, keyword.operator.expression.delete.jsx, keyword.operator.expression.delete.ts, keyword.operator.expression.delete.tsx, keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.jsx, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, keyword.operator.expression.is.js, keyword.operator.expression.is.jsx, keyword.operator.expression.is.ts, keyword.operator.expression.is.tsx, keyword.operator.expression.keyof.js, keyword.operator.expression.keyof.jsx, keyword.operator.expression.keyof.ts, keyword.operator.expression.keyof.tsx, keyword.operator.expression.of.js, keyword.operator.expression.of.jsx, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.jsx, keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx, keyword.operator.new.js, keyword.operator.new.jsx, keyword.operator.new.ts, keyword.operator.new.tsx, storage.modifier.async.js, storage.modifier.async.jsx, storage.modifier.async.ts, storage.modifier.async.tsx, storage.modifier.js, storage.modifier.jsx, storage.modifier.ts, storage.modifier.tsx, storage.type.class.js, storage.type.class.jsx, storage.type.class.ts, storage.type.class.tsx, storage.type.enum.js, storage.type.enum.jsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.function.js, storage.type.function.jsx, storage.type.function.ts, storage.type.function.tsx, storage.type.interface.js, storage.type.interface.jsx, storage.type.interface.ts, storage.type.interface.tsx, storage.type.js, storage.type.jsx, storage.type.namespace.js, storage.type.namespace.jsx, storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.ts, storage.type.tsx, storage.type.type.js, storage.type.type.jsx, storage.type.type.ts, storage.type.type.tsx, variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsx, variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx | #99B1FF | — |
| meta.template.expression.tsx, meta.template.expression.jsx | #F89F68 | — |
| meta.embedded.line.tsx, meta.embedded.line.jsx | #e3e3e3 | |
| variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx | — | underline |
| variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsx | — | underline |
| keyword.other.debugger.js, keyword.other.debugger.jsx, keyword.other.debugger.ts, keyword.other.debugger.tsx | #fe6f6f | bold |
| keyword.control.go | — | bold |
| markup.heading | #99B1FF | bold |
| markup.fenced_code.block | #DB9EFF | — |
| markup.underline.link | #F89F68 | — |
| markup.italic | — | italic |
| markup.bold | — | bold |
| markup.strikethrough | — | strikethrough |
| markup.underline | — | underline |
| markup.quote | #82C76B | italic |
| keyword.control.rust, keyword.operator.question.rust | — | bold |
| keyword.other.rust, keyword.other.fn.rust, keyword.other.crate.rust | #99B1FF | — |
| storage.type.rust, storage.modifier.mut.rust | #99B1FF | — |
| constant.language.bool.rust | #99B1FF | — |
| meta.attribute.rust | #F89F68 | — |
| meta.diff.header, meta.diff.index | #DB9EFF | — |
| meta.diff.range.unified | #F89F68 | — |
| punctuation.definition.deleted.diff, markup.deleted.diff, meta.diff.header.from-file | #FF4A1C | — |
| punctuation.definition.inserted.diff, markup.inserted.diff, meta.diff.header.to-file | #82FF74 | — |
| meta.resultLinePrefix.lineNumber.search, meta.resultLinePrefix.matchLinePrefix.search | #e3e3e3a0 |