Metropolis
Publisher: Fabian DeckmannThemes in package: 2
Color theme based on the GMK Metropolis keycaps designed by Nephlock.
Color themes
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#0E9882
- activityBar.background#E4E8EC
- activityBar.foreground#0E9882
- activityBarBadge.background#E03428
- activityBarBadge.foreground#FFFFFF
- badge.background#E03428
- button.background#0E9882
- button.foreground#FFFFFF
- diffEditor.insertedTextBackground#00809B22
- dropdown.background#FFFFFF
- dropdown.border#C5CDD5
- editor.background#F5F7FA
- editor.findMatchBackground#D4BC6B66
- editor.findMatchHighlightBackground#D4BC6B33
- editor.lineHighlightBorder#D0D8E0
- editor.selectionBackground#B8CCE0
- editorBracketHighlight.foreground1#B8960A
- editorBracketHighlight.foreground2#0080D4
- editorBracketHighlight.foreground3#C040D8
- editorBracketHighlight.unexpectedBracket.foreground#00000060
- editorBracketMatch.border#0E9882
- editorCursor.foreground#2D3748
- editorError.foreground#E02818
- editorGroup.border#D0D8E0
- editorGroup.dropBackground#0E988240
- editorGroup.emptyBackground#EAECF0
- editorGroupHeader.tabsBackground#E4E8EC
- editorHoverWidget.background#FFFFFF
- editorHoverWidget.border#0E9882
- editorIndentGuide.activeBackground1#C49A1A
- editorIndentGuide.background1#C5CDD5
- editorLineNumber.foreground#9BA6B0
- editorOverviewRuler.background#EAECF0
- editorOverviewRuler.border#D0D8E0
- editorRuler.foreground#C5CDD5
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.border#D0D8E0
- editorSuggestWidget.selectedBackground#D8DEE6
- editorUnnecessaryCode.opacity#00000060
- editorWhitespace.foreground#C5CDD5
- editorWidget.background#FFFFFF
- focusBorder#0E9882
- gitDecoration.addedResourceForeground#1E8E25
- gitDecoration.conflictingResourceForeground#E03428
- gitDecoration.deletedResourceForeground#E03428
- gitDecoration.ignoredResourceForeground#8A949E
- gitDecoration.modifiedResourceForeground#C49A1A
- gitDecoration.stageModifiedResourceForeground#5A64D8
- gitDecoration.untrackedResourceForeground#C49A1A99
- input.background#FFFFFF
- list.activeSelectionBackground#C8D6E5
- list.activeSelectionForeground#0E9882
- list.focusBackground#C8D6E5
- list.highlightForeground#2D3748
- list.hoverBackground#D8DEE6
- list.inactiveSelectionBackground#D0D8E0
- list.inactiveSelectionForeground#0E9882
- minimap.background#EAECF0
- minimap.errorHighlight#E02818C4
- minimap.findMatchHighlight#C8D6E5
- minimap.selectionHighlight#B8CCE0
- minimap.warningHighlight#C49A1A
- minimapSlider.activeBackground#0E988860
- minimapSlider.background#0E988820
- minimapSlider.hoverBackground#0E988830
- notifications.background#FFFFFF
- panel.background#EAECF0
- panel.border#D0D8E0
- panelTitle.activeBorder#0E9882
- panelTitle.activeForeground#0E9882
- panelTitle.inactiveForeground#5A6872
- peekView.border#0E9882
- peekViewEditor.background#FFFFFF
- peekViewEditor.matchHighlightBackground#C8D6E5
- peekViewResult.background#EAECF0
- peekViewResult.fileForeground#0E9882
- peekViewResult.lineForeground#0E9882
- peekViewResult.matchHighlightBackground#C8D6E5
- peekViewResult.selectionBackground#C8D6E5
- peekViewResult.selectionForeground#0E9882
- peekViewTitle.background#E4E8EC
- peekViewTitleDescription.foreground#5A6872
- peekViewTitleLabel.foreground#0E9882
- progressBar.background#0E9882
- scrollbarSlider.activeBackground#0E988860
- scrollbarSlider.background#0E988828
- scrollbarSlider.hoverBackground#0E988840
- settings.checkboxBackground#FFFFFF
- settings.checkboxBorder#C49A1A
- settings.checkboxForeground#0E9882
- settings.dropdownBackground#FFFFFF
- settings.dropdownBorder#0E9882
- settings.dropdownListBorder#0E9882
- settings.focusedRowBackground#D8DEE6
- settings.modifiedItemIndicator#C49A1A
- settings.numberInputBackground#FFFFFF
- settings.numberInputBorder#0E9882
- settings.textInputBackground#FFFFFF
- settings.textInputBorder#0E9882
- sideBar.background#EAECF0
- sideBar.dropBackground#0E988240
- sideBarSectionHeader.background#E4E8EC
- statusBar.background#E4E8EC
- statusBar.debuggingBackground#E4E8EC
- statusBar.foreground#5A6872
- statusBar.noFolderBackground#E4E8EC
- statusBarItem.hoverBackground#D0D8E0
- statusBarItem.warningBackground#C49A1A
- statusBarItem.warningForeground#FFFFFF
- tab.activeBackground#F5F7FA
- tab.activeBorderTop#0E9882
- tab.activeForeground#0E9882
- tab.border#D0D8E0
- tab.inactiveBackground#E4E8EC
- tab.inactiveForeground#6B7C88
- terminal.ansiBlack#2D3748
- terminal.ansiBlue#5A64D8
- terminal.ansiBrightBlack#5A6872
- terminal.ansiBrightBlue#717efa
- terminal.ansiBrightCyan#0E9882
- terminal.ansiBrightGreen#1E8E25
- terminal.ansiBrightMagenta#B840D8
- terminal.ansiBrightRed#E03428
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#C49A1A
- terminal.ansiCyan#0E9882
- terminal.ansiGreen#1E8E25
- terminal.ansiMagenta#B840D8
- terminal.ansiRed#E03428
- terminal.ansiWhite#F5F7FA
- terminal.ansiYellow#C49A1A
- terminal.background#EAECF0
- terminal.foreground#2D3748
- titleBar.activeBackground#E4E8EC
- titleBar.activeForeground#2D3748
- titleBar.inactiveBackground#EAECF0
- titleBar.inactiveForeground#5A6872
- tree.indentGuidesStroke#0E9882
- widget.border#0E9882
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.comment | #8590A0 | — |
| string, string.template | #3D4752 | italic |
| constant.numeric, constant.language.boolean, constant.language.undefined, constant.language.null | #3D4752 | — |
| string.unquoted, constant.other.object.key | #D06818 | — |
| keyword.control.flow | #0E9882 | bold italic |
| string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded | #B840D8 | — |
| punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace | #4A5568 | — |
| constant.language | #0E9882 | — |
| constant.character, constant.other | #0E9882 | — |
| variable.language | #E03428 | — |
| keyword.operator, keyword | #0E9882 | — |
| keyword.operator.new | #0E9882 | bold |
| storage | #E03428 | — |
| storage.type | #0E9882 | — |
| entity.name.class, entity.name.module, storage.identifier, support.class | #E03428 | — |
| variable.other.class | #A6880A | — |
| punctuation.definition.string, punctuation.definition.quasi | #E03428 | — |
| string.quoted.single, string.quoted.double, string.quoted.template | #3D4752 | italic |
| support.type.object.console | #A6880A | — |
| entity.name.type.interface, entity.name.type.alias, entity.name.type, entity.name.label | #5A64D8 | — |
| entity.name.type.class, entity.other.inherited-class | #2D8F15 | — |
| support.type.primitive, support.type.builtin | #5A64D8 | — |
| variable.object.property, variable.object.property.ts, variable.other.object.property.ts | #D06818 | — |
| variable.other.object, variable.other.constant, variable.other.global, variable.readwrite, variable.readwrite.other.block, variable.other.readwrite, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile | #A6880A | |
| variable.other.property, variable.other.block, meta.object-literal.key | #D06818 | |
| variable.other.readwrite | #A6880A | |
| meta.class.body, meta.function.body, meta.function.parameters | #2F7ABF | — |
| storage.modifier | #0E9882 | — |
| entity.name.function, storage.type.function.arrow, entity.name.function.member, meta.function-call.generic.python | #E03428 | — |
| string.quoted.module, string.quoted.template | #3D4752 | — |
| support.function | #E03428 | — |
| variable.parameter, entity.name.variable.parameter, parameter.variable | #A6880A | — |
| entity.name.function-call | #4A5568 | — |
| function.support.builtin, function.support.core | #1B8F3D | — |
| entity.name.tag.jsx, punctuation.definition.tag | #4A556880 | — |
| JSXNested | #3D4752 | — |
| entity.name.tag, entity.name.tag.class.js | #0E9882 | — |
| entity.name.tag.class, entity.name.tag.id | #0E9882 | — |
| entity.name.tag.html | #0E9882 | — |
| entity.other.attribute-name | #1B8F3D | — |
| punctuation.attribute-shorthand.event.html, punctuation.separator.key-value.html | #3D4752 | — |
| string.quoted.double.html, string.quoted.single.html | #3D4752 | italic |
| entity.other.attribute-name | #1B8F3D | — |
| support.constant | #0E9882 | — |
| support.type, support.variable | #E03428 | — |
| support.dictionary.json | #0E9882 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass | #0E9882 | — |
| entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less, entity.name.tag.sass | #A6880A | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass, keyword.control.at-rule.font-face.css | #E03428 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less, entity.other.attribute-name.class.sass, entity.other.attribute-name.element.css, entity.other.attribute-name.element.scss, entity.other.attribute-name.element.less, entity.other.attribute-name.element.sass, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less | #A6880A | — |
| support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, support.constant.property-value.css | #3D4752 | — |
| variable.css, variable.scss, variable.less, variable.sass, variable.argument.css | #A6880A | — |
| variable.css.string, variable.scss.string, variable.less.string, variable.sass.string | #A6880A | — |
| keyword.other.unit | #E03428 | — |
| unit.css, unit.scss, unit.less, unit.sass | #E03428 | — |
| function.css, function.scss, function.less, function.sass | #E03428 | — |
| punctuation.terminator.rule.css | #3D4752 | — |
| string.quoted.double, string.quoted.single | #3D4752 | — |
| support.other.variable | — | |
| invalid | #FFFFFF | — |
| invalid.deprecated | #FFFFFF | — |
| support.type.property-name.json | #0E9882 | — |
| string.detected-link | #A6880A | — |
| meta.diff, meta.diff.header | #8590A0 | — |
| markup.deleted | #E03428 | — |
| text.html.markdown | #2D3748 | — |
| markup.inserted | #1E8E25 | — |
| markup.changed | #A6880A | — |
| constant.numeric.line-number.find-in-files - match | #0E9882 | — |
| entity.name.filename.find-in-files | #A6880A | — |
| markup.italic, markup.italic.markdown | — | italic |
| punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown | #8590A0 | — |
| punctuation.definition.italic.markdown | — | italic |
| markup.underline.link.markdown | #0E9882 | underline |
| markup.bold.markdown | — | bold |
| markup.heading.markdown | #E03428 | bold |
| markup.quote.markdown | #A6880A | — |
| meta.separator.markdown | #E03428 | bold |
| markup.raw.inline.markdown, markup.raw.block.markdown | #0E9882 | — |
| punctuation.definition.list_item.markdown | #0E9882 | bold |
| meta.attribute.directive.vue, meta.attribute.directive.control.vue, punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue | #E03428 | — |
| keyword.control.loop.vue | #E03428 | — |
| variable.other, source.go | #A6880A | — |
| variable.language.special.self.python, variable.parameter.function.language.special.self.python | #2D8F15 | — |