Deep Slate
Publisher: Roter-SThemes in package: 1
A dark theme with deep blue-gray tones
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#07070a
- activityBar.border#1a1a24
- activityBar.foreground#89b4fa
- activityBar.inactiveForeground#2a2a3a
- activityBarBadge.background#89b4fa
- activityBarBadge.foreground#07070a
- badge.background#7aa2f7
- badge.foreground#060910
- breadcrumb.activeSelectionForeground#7aa2f7
- breadcrumb.background#0a0e14
- breadcrumb.foreground#2a3a52
- button.background#7aa2f7
- button.foreground#060910
- button.hoverBackground#7dcfff
- button.secondaryBackground#0f1623
- button.secondaryForeground#c0caf5
- dropdown.background#0a0e14
- dropdown.border#1e2a3a
- dropdown.foreground#c0caf5
- editor.background#0c0c10
- editor.findMatchBackground#c099ff40
- editor.findMatchHighlightBackground#c099ff20
- editor.foreground#dce4ff
- editor.lineHighlightBackground#16161e
- editor.selectionBackground#363650
- editor.selectionHighlightBackground#36365030
- editor.wordHighlightBackground#36365025
- editorBracketMatch.background#2a2a40
- editorBracketMatch.border#89b4fa
- editorCursor.foreground#89b4fa
- editorGroupHeader.tabsBackground#09090d
- editorGroupHeader.tabsBorder#0f1623
- editorHoverWidget.background#09090d
- editorHoverWidget.border#0f1623
- editorIndentGuide.activeBackground1#2a2a3a
- editorIndentGuide.background1#1a1a24
- editorLineNumber.activeForeground#545c7e
- editorLineNumber.foreground#2a2a3a
- editorSuggestWidget.background#09090d
- editorSuggestWidget.border#0f1623
- editorSuggestWidget.highlightForeground#7dcfff
- editorSuggestWidget.selectedBackground#1a2a4a
- editorWidget.background#09090d
- editorWidget.border#0f1623
- focusBorder#7aa2f7
- foreground#dce4ff
- gitDecoration.deletedResourceForeground#f7768e
- gitDecoration.ignoredResourceForeground#2a3a52
- gitDecoration.modifiedResourceForeground#7aa2f7
- gitDecoration.untrackedResourceForeground#9ece6a
- input.background#0a0e14
- input.border#1e2a3a
- input.foreground#c0caf5
- input.placeholderForeground#2a3a52
- list.activeSelectionBackground#1a2a4a
- list.activeSelectionForeground#c0caf5
- list.focusBackground#1a2a4a
- list.highlightForeground#7dcfff
- list.hoverBackground#0d1220
- list.inactiveSelectionBackground#0d1220
- notificationCenterHeader.background#09090d
- notifications.background#0a0e14
- notifications.border#0f1623
- panel.background#09090d
- panel.border#0f1623
- panelTitle.activeBorder#7aa2f7
- panelTitle.activeForeground#c0caf5
- panelTitle.inactiveForeground#2a3a52
- peekView.border#7aa2f7
- peekViewEditor.background#09090d
- peekViewResult.background#060910
- scrollbarSlider.activeBackground#1e2a3a
- scrollbarSlider.background#1e2a3a40
- scrollbarSlider.hoverBackground#1e2a3a80
- selection.background#1a2a4a
- sideBar.background#09090d
- sideBar.border#1a1a24
- sideBar.foreground#45475a
- sideBarSectionHeader.background#0c0c10
- sideBarSectionHeader.border#1a1a24
- sideBarSectionHeader.foreground#45475a
- sideBarTitle.foreground#cdd6f4
- statusBar.background#060910
- statusBar.border#0f1623
- statusBar.debuggingBackground#7aa2f7
- statusBar.debuggingForeground#060910
- statusBar.foreground#3d5277
- statusBar.noFolderBackground#060910
- statusBarItem.hoverBackground#0f1623
- tab.activeBackground#0a0e14
- tab.activeBorderTop#7aa2f7
- tab.activeForeground#c0caf5
- tab.border#0f1623
- tab.hoverBackground#0d1220
- tab.inactiveBackground#09090d
- tab.inactiveForeground#2a3a52
- terminal.ansiBlue#7aa2f7
- terminal.ansiCyan#7dcfff
- terminal.ansiGreen#9ece6a
- terminal.ansiMagenta#bb9af7
- terminal.ansiRed#f7768e
- terminal.ansiYellow#e0af68
- terminal.background#09090d
- terminal.foreground#c0caf5
- terminalCursor.foreground#7dcfff
- titleBar.activeBackground#07070a
- titleBar.activeForeground#c0caf5
- titleBar.border#0f1623
- titleBar.inactiveBackground#060910
- titleBar.inactiveForeground#1e2a3a
- widget.shadow#00000090
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.block, comment.line, comment.block.documentation | #545c7e | italic |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc | #545c7e | italic |
| string, string.quoted, string.template | #f2d185 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end | #f2d185 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #d0a0ff | — |
| constant.numeric | #ffb86c | — |
| keyword, keyword.control | #d0a0ff | italic |
| keyword.control.return, keyword.control.throw, keyword.control.break, keyword.control.continue, keyword.operator.delete, keyword.control.trycatch | #ff6b8a | italic |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #d0a0ff | italic |
| storage, storage.type | #d0a0ff | italic |
| keyword.operator | #80d9ff | — |
| keyword.operator.spread, keyword.operator.rest, storage.type.function.arrow | #80d9ff | — |
| entity.name.function, meta.function-call.generic, support.function | #82aaff | — |
| meta.function-call entity.name.function, variable.function | #82aaff | — |
| entity.name.class, entity.name.type, support.class | #ffb86c | — |
| entity.name.type.ts, entity.name.type.kotlin, entity.name.type.java, meta.type.annotation | #ffb86c | — |
| entity.name.type.interface | #ffb86c | italic |
| punctuation.definition.typeparameters, entity.name.type.parameter | #ffb86c | — |
| variable, variable.other | #dce4ff | — |
| variable.other.object.property, meta.object-literal.key, support.variable.property | #dce4ff | — |
| variable.parameter | #ffb86c | — |
| constant, constant.language, constant.other | #ffb86c | bold |
| constant.language.boolean, constant.language.null, constant.language.undefined | #ffb86c | — |
| punctuation | #6c7086 | — |
| meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation.java, storage.type.annotation.kotlin | #ff9e64 | italic |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.ts.tsx, entity.name.tag.svelte, entity.name.tag.vue, entity.name.tag.astro | #f38ba8 | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.open, punctuation.definition.tag.close | #4a5e7a | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.js.jsx, support.class.component.ts.tsx, entity.name.tag.jsx support.class.component, meta.jsx.children entity.name.tag | #fab387 | — |
| punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx | #bb9af7 | — |
| punctuation.definition.tag.end.jsx, punctuation.definition.tag.end.tsx | #f7768e | — |
| entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #94e2d5 | — |
| entity.other.attribute-name.jsx constant.language, meta.jsx entity.other.attribute-name | #73daca | — |
| support.function.react, entity.name.function.react | #7aa2f7 | — |
| entity.other.attribute-name.html.vue, keyword.operator.binding-modifier.vue, meta.directive.vue entity.other.attribute-name, entity.other.attribute-name.key.vue, entity.other.attribute-name.ref.vue | #bb9af7 | italic |
| keyword.control.svelte, punctuation.definition.block.svelte, entity.name.tag.svelte, support.function.svelte | #bb9af7 | italic |
| meta.reactive.svelte, keyword.operator.svelte, variable.other.svelte | #73daca | — |
| punctuation.definition.frontmatter.astro, meta.frontmatter.astro, comment.block.frontmatter.astro | #3d5277 | — |
| entity.name.tag.astro, support.class.component.astro | #ff9e64 | — |
| meta.embedded.expression.astro, variable.other.astro | #c0caf5 | — |
| entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less | #f7768e | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #ff9e64 | — |
| support.type.property-name.css, support.type.property-name.scss | #73daca | — |
| support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css | #ffc777 | — |
| keyword.other.unit.css, keyword.other.unit.scss | #e0af68 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #bb9af7 | italic |
| variable.scss, variable.sass | #f7768e | — |
| variable.other.php, variable.language.this.php | #f7768e | — |
| keyword.control.php, storage.type.function.php, storage.type.class.php | #bb9af7 | italic |
| keyword.operator.string.php | #89ddff | — |
| keyword.blade, storage.type.blade, support.function.blade | #bb9af7 | italic |
| punctuation.definition.blade, meta.blade.output | #73daca | — |
| storage.modifier.java, storage.modifier.kotlin, keyword.modifier.kotlin, keyword.other.kotlin | #bb9af7 | italic |
| storage.type.annotation.java, storage.type.annotation.kotlin, punctuation.definition.annotation | #ff9e64 | italic |
| keyword.other.fun.kotlin, storage.type.function.kotlin, keyword.other.val.kotlin, keyword.other.var.kotlin | #bb9af7 | italic |
| storage.type.primitive.java, storage.type.primitive.array.java, support.type.kotlin | #ff9e64 | — |
| entity.name.type.ts, entity.name.type.alias.ts, entity.name.type.interface.ts, support.type.builtin.ts, entity.name.type.module.ts | #ff9e64 | — |
| keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.instanceof, keyword.operator.expression.infer, keyword.operator.type.annotation | #bb9af7 | italic |
| variable.other.enummember.ts, variable.other.enummember.tsx | #e0af68 | — |
| variable.language.special.self.python, variable.parameter.function.language.special.self.python | #f7768e | italic |
| entity.name.function.decorator.python, meta.function.decorator.python | #ff9e64 | italic |
| support.function.magic.python, entity.name.function.magic.python | #7aa2f7 | italic |
| support.function.builtin.python, support.type.python | #7dcfff | — |
| meta.fstring.python, constant.character.format.placeholder.other.python | #bb9af7 | — |
| keyword.package.go, keyword.import.go, keyword.var.go, keyword.const.go | #bb9af7 | italic |
| keyword.function.go | #bb9af7 | italic |
| entity.name.type.go, storage.type.go | #ff9e64 | — |
| support.function.builtin.go | #7dcfff | — |
| support.type.error.go | #ff5555 | — |
| entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #ff9e64 | italic |
| entity.name.function.macro.rust, support.function.macro.rust, meta.macro.rust | #7dcfff | — |
| meta.attribute.rust, entity.name.type.attribute.rust | #ff9e64 | italic |
| entity.name.type.rust, storage.type.rust, support.type.rust | #ff9e64 | — |
| keyword.other.unsafe.rust | #ff5555 | italic |
| support.type.property-name.json, string.json meta.structure.dictionary.value.json | #73daca | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #ffc777 | — |
| constant.language.json | #e0af68 | — |
| entity.name.tag.yaml, string.unquoted.plain.out.yaml | #73daca | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.alias.yaml | #bb9af7 | — |
| constant.language.boolean.yaml, constant.language.null.yaml | #e0af68 | — |
| keyword.other.sql, storage.modifier.sql, keyword.other.create.sql, keyword.other.select.sql | #bb9af7 | italic |
| support.function.aggregate.sql | #7aa2f7 | — |
| storage.type.sql, support.type.sql | #ff9e64 | — |
| entity.name.section.markdown, markup.heading | #7aa2f7 | bold |
| markup.bold.markdown | #c0caf5 | bold |
| markup.italic.markdown | #c0caf5 | italic |
| markup.inline.raw.string.markdown | #ffc777 | — |
| markup.underline.link.markdown, string.other.link.title.markdown | #73daca | — |
| markup.quote.markdown | #3d5277 | italic |
| invalid, invalid.illegal | #f7768e | underline |