Granite Theme
Publisher: Marcus SchwedaThemes in package: 1
A dark theme inspired by Coal Graal.
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#2b2b2b
- activityBar.border#3d3d3d
- activityBar.foreground#d8d9ca
- activityBarBadge.background#b998df
- activityBarBadge.foreground#2b2b2b
- button.background#85c6d9
- button.foreground#2b2b2b
- debugIcon.breakpointDisabledForeground#595959
- debugIcon.breakpointForeground#ff8088
- debugIcon.breakpointUnverifiedForeground#595959
- debugIcon.continueForeground#b4df5d
- debugIcon.disconnectForeground#ff8088
- debugIcon.pauseForeground#decb5d
- debugIcon.restartForeground#b4df5d
- debugIcon.startForeground#b4df5d
- debugIcon.stepBackForeground#84b6d9
- debugIcon.stepIntoForeground#84b6d9
- debugIcon.stepOutForeground#84b6d9
- debugIcon.stepOverForeground#84b6d9
- debugIcon.stopForeground#ff8088
- editor.background#2b2b2b
- editor.findMatchHighlightBackground#9a7b2d
- editor.foreground#d8d9ca
- editor.inactiveSelectionBackground#3d3d3d
- editor.lineHighlightBackground#363636
- editor.lineHighlightBorder#363636
- editor.selectionBackground#595959
- editor.selectionHighlightBackground#5a4e61
- editor.wordHighlightBackground#796983
- editor.wordHighlightStrongBackground#796983
- editorBracketMatch.border#897694
- editorCodeLens.foreground#595959
- editorCursor.background#d8d9ca
- editorCursor.foreground#e529d9
- editorError.foreground#ff8088
- editorGroup.background#222222
- editorGroupHeader.tabsBackground#2b2b2b
- editorGroupHeader.tabsBorder#3d3d3d
- editorIndentGuide.background#3d3d3d
- editorInfo.foreground#b4df5d
- editorLightBulb.foreground#decb5d
- editorLineNumber.foreground#595959
- editorLink.activeForeground#bbdfdd
- editorOverviewRuler.errorForeground#ff8088
- editorOverviewRuler.findMatchForeground#decb5d
- editorOverviewRuler.infoForeground#b4df5d
- editorOverviewRuler.selectionHighlightForeground#5a4e61
- editorOverviewRuler.warningForeground#edb272
- editorRuler.foreground#3d3d3d
- editorWarning.foreground#edb272
- errorForeground#ff8088
- focusBorder#5a4e61
- foreground#d8d9ca
- input.placeholderForeground#595959
- inputOption.activeBackground#595959
- inputOption.activeBorder#d8d9ca
- list.activeSelectionBackground#595959
- list.focusBackground#5a4e61
- list.highlightForeground#dbbfed
- list.hoverBackground#39313d
- list.inactiveSelectionBackground#3d3d3d
- menu.selectionBackground#39313d
- menubar.selectionBackground#5a4e61
- notification.buttonBackground#85c6d9
- notification.buttonForeground#2b2b2b
- notification.errorBackground#ff8088
- notification.errorForeground#2b2b2b
- notification.infoBackground#b4df5d
- notification.infoForeground#2b2b2b
- notification.warningBackground#edb272
- notification.warningForeground#2b2b2b
- panel.border#3d3d3d
- pickerGroup.foreground#e3e4a9
- scrollbarSlider.background#ffffff10
- selection.background#595959
- sideBar.background#2b2b2b
- sideBar.border#3d3d3d
- sideBarSectionHeader.background#2b2b2b
- sideBarSectionHeader.foreground#e3e4a9
- sideBarTitle.foreground#d8d9ca
- statusBar.background#222222
- statusBar.debuggingBackground#5a4e61
- statusBar.debuggingForeground#d8d9ca
- statusBar.foreground#d8d9ca
- tab.activeBorder#e3e4a9
- tab.activeForeground#d8d9ca
- tab.border#222222
- tab.inactiveForeground#949494
- terminal.ansiBlack#3d3d3d
- terminal.ansiBlue#377ab5
- terminal.ansiBrightBlack#595959
- terminal.ansiBrightBlue#84b6d9
- terminal.ansiBrightCyan#77d9d1
- terminal.ansiBrightGreen#b4df5d
- terminal.ansiBrightMagenta#b998df
- terminal.ansiBrightRed#ff8088
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#decb5d
- terminal.ansiCyan#2db5a7
- terminal.ansiGreen#77bf22
- terminal.ansiMagenta#7f4fbf
- terminal.ansiRed#ff323b
- terminal.ansiWhite#d8d9ca
- terminal.ansiYellow#be9c22
- terminal.background#2b2b2b
- terminal.foreground#d8d9ca
- terminalCursor.background#d8d9ca
- terminalCursor.foreground#e529d9
- textLink.activeForeground#bbdfdd
- textLink.foreground#bbdfdd
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #d8d9ca | — |
| invalid, invalid.illegal | #ff8088 | — |
| token.info-token | #85c6d9 | — |
| token.warn-token | #edb272 | — |
| token.error-token | #ff8088 | — |
| token.debug-token | #b998df | — |
| entity.name.variable, keyword.operator, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, variable, variable.parameter, variable.other, string constant.other.placeholder, support.other.variable, text.html.markdown | #d8d9ca | normal |
| *url*, *link*, *uri*, constant.other.reference.link.markdown, markup.underline, string.other.link, string.other.link.title.markdown | #bbdfdd | underline |
| constant.character, constant.escape, constant.numeric, constant.other.color, keyword.other.unit, support.constant | #e3e4a9 | normal |
| constant.other.key, constant.other.symbol, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, string, string.regexp | #b4df5d | normal |
| constant.character.escape | #cbe890 | bold |
| comment | #949494 | italic |
| punctuation.definition.comment | #949494 | — |
| constant.language, keyword, keyword.control, keyword.other, keyword.operator.expression, keyword.operator.new, punctuation.definition.keyword, punctuation.definition.block.tag, storage.modifier, source.js storage.type, variable.language | #b998df | bold |
| entity.name, entity.other.inherited-class, markup.changed.git_gutter, meta.use.php, storage.type, support.type, support.class, support.orther.namespace.use.php, support.other.namespace.php, support.type.sys-types | #85c6d9 | normal |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.other.attribute-name.class, punctuation entity.other.attribute-name.parent-selector-suffix, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.placeholder.css, source.css meta.property-name | #edb272 | bold |
| support.type.property-name, invalid.deprecated.color.system.css | #decb5d | normal |
| support.type.vendored.property-name | #decb5d | italic |
| variable.scss, variable.less, variable.stylus | #85c6d9 | normal |
| markup.heading.markdown punctuation.definition.heading.markdown, punctuation.definition.markdown, beginning.punctuation.definition.list.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.raw.markdown | #b998df | bold |
| markup.heading.markdown entity.name | #85c6d9 | — |
| markup.italic | — | italic |
| markup.bold, markup.bold string | — | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | — | italic bold |
| markup.strike | — | strike |
| markup.quote punctuation.definition.blockquote.markdown, markup.quote, string.other.link.description.title.markdown | #b4df5d | normal |
| meta.separator | #949494 | bold |
| punctuation.definition.list_item.markdown, markup.raw.block, markup.inline.raw.string.markdown, fenced_code.block.language, variable.language.fenced.markdown | #e3e4a9 | — |
| meta.tag, keyword.other.template, keyword.other.substitution | #d8d9ca | normal |
| entity.other.attribute-name.html, entity.other.attribute-name | #decb5d | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #a3aad8 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #FF5370 | — |
| entity.name.method.js | #82AAFF | italic |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #82AAFF | — |
| entity.other.attribute-name.class | #edb270 | — |
| source.sass keyword.control | #a3aad8 | — |
| markup.inserted | #9ddf9d | — |
| markup.deleted | #ff8088 | — |
| markup.changed | #e4d962 | — |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82AAFF | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF5370 | italic |
| text.html.markdown markup.inline.raw.markdown | #C792EA | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #65737E | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #EEFFFF | — |
| markup.table | #ff0000 | — |