Material UI
Publisher: nxt3Themes in package: 1
VS Code theme ported from material-design-syntax on Atom
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#1E88E5
- activityBar.border#000000cc
- activityBar.foreground#ffffff
- activityBarBadge.background#FFFFFF
- activityBarBadge.foreground#00212B80
- badge.background#406281
- badge.foreground#ffffff
- button.background#2196F3
- button.foreground#ffffff
- button.hoverBackground#1E88E5
- debugExceptionWidget.background#23272E
- debugExceptionWidget.border#1E88E5
- debugToolBar.background#1E88E5
- diffEditor.insertedTextBackground#69F0AE30
- diffEditor.removedTextBackground#B7373060
- dropdown.background#353942
- dropdown.border#353942
- dropdown.foreground#93A1A1
- editor.background#212121
- editor.findMatchBackground#558dfcef
- editor.findMatchHighlightBackground#324464
- editor.findRangeHighlightBackground#324464
- editor.foreground#eeeeee
- editor.hoverHighlightBackground#3E4451
- editor.inactiveSelectionBackground#2196F350
- editor.lineHighlightBackground#2C323C
- editor.lineHighlightBorder#2C323C
- editor.rangeHighlightBackground#3E4451
- editor.selectionBackground#3E4451
- editor.selectionHighlightBackground#3E4451
- editor.wordHighlightBackground#2196F350
- editor.wordHighlightStrongBackground#1E88E5
- editorBracketMatch.background#558EFF
- editorBracketMatch.border#558EFF
- editorCodeLens.foreground#ffffff44
- editorCursor.foreground#ffffff
- editorError.border#7049B800
- editorError.foreground#E53935
- editorGroup.border#30343C
- editorGroup.dropBackground#2196F320
- editorGroup.emptyBackground#1a1a1a
- editorGroupHeader.noTabsBackground#1E1F29
- editorGroupHeader.tabsBackground#1C1D25
- editorGroupHeader.tabsBorder#00000000
- editorGutter.addedBackground#69F0AE
- editorGutter.background#1a1a1a
- editorGutter.deletedBackground#E53935
- editorGutter.modifiedBackground#FFD740
- editorHoverWidget.background#1E1F29
- editorHoverWidget.border#2196F3
- editorIndentGuide.activeBackground#9E9E9E
- editorIndentGuide.background#4B5262
- editorLineNumber.foreground#BDBDBD
- editorLink.activeForeground#5AB6C1
- editorMarkerNavigationError.background#F44336
- editorMarkerNavigationWarning.background#FFD740
- editorOverviewRuler.addedForeground#69F0AE91
- editorOverviewRuler.border#696F79
- editorOverviewRuler.deletedForeground#E5393591
- editorOverviewRuler.findMatchForeground#26c6da91
- editorOverviewRuler.modifiedForeground#FFD74091
- editorRuler.foreground#3C4049
- editorSuggestWidget.border#353A42
- editorSuggestWidget.foreground#ffffff
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#2196F3
- editorWarning.border#7049B800
- editorWarning.foreground#FFD740
- editorWhitespace.foreground#3B4048
- editorWidget.background#282C34
- editorWidget.border#2196F3
- errorForeground#FF4081
- extensionButton.prominentBackground#1E88E520
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#2196F3
- focusBorder#1E88E5
- foreground#9096A2
- gitDecoration.addedResourceForeground#69F0AE
- gitDecoration.conflictingResourceForeground#FF4081
- gitDecoration.deletedResourceForeground#FF8A80
- gitDecoration.ignoredResourceForeground#ffffff88
- gitDecoration.modifiedResourceForeground#FFE57F
- gitDecoration.untrackedResourceForeground#8C9EFF
- input.background#35394200
- input.border#2B2E37
- input.foreground#ABB2BF
- input.placeholderForeground#4F525D
- inputOption.activeBorder#FFFFFF
- inputValidation.errorBackground#B71C1C
- inputValidation.errorBorder#F44336
- inputValidation.warningBackground#43392E
- inputValidation.warningBorder#FFD740
- list.activeSelectionBackground#2196F3
- list.activeSelectionForeground#ffffff
- list.dropBackground#2196F3
- list.focusBackground#2196F3
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#424242
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#2195f34b
- list.inactiveSelectionForeground#e0e0e0
- listFilterWidget.background#353A42
- listFilterWidget.noMatchesOutline#FF8A80
- listFilterWidget.outline#69F0AE
- merge.border#1E1F29
- merge.currentContentBackground#B737307F
- merge.currentHeaderBackground#B73730
- merge.incomingContentBackground#2E73667F
- merge.incomingHeaderBackground#2E7366
- minimap.findMatchHighlight#26c6da
- minimap.selectionHighlight#1E88E5
- minimapGutter.addedBackground#69F0AE
- minimapGutter.deletedBackground#E53935
- minimapGutter.modifiedBackground#FFD740
- minimapSlider.activeBackground#ffffff70
- minimapSlider.background#ffffff1a
- minimapSlider.hoverBackground#ffffff55
- notifications.background#212121
- notifications.foreground#FFFFFF
- panel.background#1E1F29
- panel.border#00000070
- panelTitle.activeBorder#1E88E5
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#9097A2
- peekView.border#1E88E5
- peekViewEditor.background#2b2b2b
- peekViewEditor.matchHighlightBackground#558EFF40
- peekViewEditorGutter.background#202020
- peekViewResult.background#202020
- peekViewResult.fileForeground#ffffffb0
- peekViewResult.lineForeground#ffffffb0
- peekViewResult.matchHighlightBackground#1E88E5
- peekViewResult.selectionBackground#3E4451
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#1E88E5
- peekViewTitleDescription.foreground#ffffff
- peekViewTitleLabel.foreground#ffffff
- pickerGroup.border#1E88E5
- pickerGroup.foreground#ffffff
- progressBar.background#FFFFFF
- quickInput.background#1a1a1a
- quickInput.foreground#ffffff
- quickInputList.focusBackground#2196F3
- scrollbar.shadow#000000cc
- scrollbarSlider.activeBackground#ffffff70
- scrollbarSlider.background#ffffff1a
- scrollbarSlider.hoverBackground#ffffff55
- selection.background#9E9E9E
- settings.checkboxBackground#1a1a1a
- settings.checkboxBorder#1a1a1a
- settings.checkboxForeground#eeeeee
- settings.dropdownBackground#1a1a1a
- settings.dropdownBorder#1a1a1a
- settings.dropdownForeground#eeeeee
- settings.headerForeground#eeeeee
- settings.numberInputBackground#1a1a1a
- settings.numberInputBorder#1a1a1a
- settings.numberInputForeground#eeeeee
- settings.textInputBackground#1a1a1a
- settings.textInputBorder#1a1a1a
- settings.textInputForeground#eeeeee
- sideBar.background#212121
- sideBar.border#00000030
- sideBar.foreground#e0e0e0
- sideBarSectionHeader.background#1C1D25
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#2196F3
- statusBar.background#252830
- statusBar.border#00000030
- statusBar.debuggingBackground#E53935
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#9095A1
- statusBar.noFolderBackground#23272E
- statusBar.noFolderForeground#9095A1
- statusBarItem.activeBackground#213237
- statusBarItem.hoverBackground#213237
- tab.activeBackground#ffffff00
- tab.activeBorder#2196F3
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#ffffff
- tab.border#1C1D25
- tab.inactiveBackground#282C34
- tab.inactiveForeground#ffffff40
- tab.unfocusedActiveBorder#282C34
- tab.unfocusedActiveForeground#ffffff80
- tab.unfocusedInactiveForeground#ffffff40
- terminal.ansiBlack#000000
- terminal.ansiBlue#2096f3
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#64b5f6
- terminal.ansiBrightCyan#4dd0e1
- terminal.ansiBrightGreen#25e47a
- terminal.ansiBrightMagenta#ba68c8
- terminal.ansiBrightRed#e57373
- terminal.ansiBrightWhite#fafafa
- terminal.ansiBrightYellow#fff176
- terminal.ansiCyan#04bcd4
- terminal.ansiGreen#00c853
- terminal.ansiMagenta#9c30b0
- terminal.ansiRed#F44336
- terminal.ansiWhite#bfbfbf
- terminal.ansiYellow#ffeb3b
- terminal.background#1E1F29
- terminal.foreground#ffffff
- titleBar.activeBackground#2196F3
- titleBar.activeForeground#ffffff
- titleBar.border#2196F3
- titleBar.inactiveBackground#2196F3
- titleBar.inactiveForeground#ffffff85
- tree.indentGuidesStroke#ffffff40
- walkThrough.embeddedEditorBackground#2C323C7F
- welcomePage.buttonBackground#1C1D25
- welcomePage.buttonHoverBackground#1E88E520
- widget.shadow#000000d0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, unused.comment, wildcard.comment | #78909c | italic |
| comment.block.documentation.js storage.type.class.doc, comment.block.documentation.js storage.type.class.jsdoc | #78909c | bold italic |
| storage, storage.modifier, source.ts storage.type, meta.var.expr storage.type, meta.method.declaration meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type, meta.arrow storage.type.function.arrow, keyword.other.special-method, punctuation.definition.heading, punctuation.definition.identity, support.function.any-method, entity.name.section, entity.other.attribute-name.id, meta.attribute.id.html entity.other.attribute-name.html, meta.require, markup.heading, markup.punctuation.definition.heading, variable.other.readwrite.alias.ts, meta.structure.dictionary.json string.quoted.double.json, meta.path.search punctuation.separator | #64b5f6 | — |
| meta.path.basename.search, meta.class meta.method.declaration storage.type.property | #64b5f6 | bold |
| meta.class meta.method.declaration storage.type | #64b5f6 | bold underline |
| variable, entity.other.inherited-class, constant.language.json, support.property-name.css, constant.numeric.css | #ffffff | — |
| entity.name.function, entity.name.type.class, entity.name.type.interface | #ffffff | bold |
| meta.arrow variable.parameter | #FFFFFF | italic |
| meta.method.declaration meta.definition.method entity.name.function, meta.function meta.definition.function entity.name.function | #FFFFFF | bold underline |
| keyword.control, keyword.operator, constant.other.symbol, markup.raw.inline, markup.heading, markup.inserted, punctuation.method-parameters.begin.java, punctuation.method-parameters.end.java | #00e676 | — |
| keyword.operator.type.annotation, storage.type.annotation, punctuation.definition.separator.list.comma, punctuation.definition.separator.delimiter, source.ts storage.type.class, source.ts storage.type.interface, meta.structure.dictionary.value.json string.quoted.double.json punctuation.definition.string.begin.json, meta.structure.dictionary.value.json string.quoted.double.json punctuation.definition.string.end.json, meta.resultLinePrefix.lineNumber.search, meta.resultLinePrefix.matchLinePrefix.search punctuation.separator | #cfd8dc | — |
| string, constant, keyword.other.unit, punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, entity.other.attribute-name, meta.link, markup.quote | #fff176 | — |
| markup.bold | #fff176 | bold |
| storage.type.primitive, variable.interpolation, string.other.link, support.type.primitive, meta.object-literal.key, markup.deleted, markup.list, storage.type.primitive.ts, meta.structure.dictionary.value.json meta.structure.array.json string.quoted.double.json | #ef5350 | — |
| storage.type, entity.name.type | #ef5350 | bold |
| entity.name.tag | #ef5350 | underline |
| variable.language | #ec407a | — |
| keyword, meta.selector, markup.changed, meta.tag.doctype.html | #b388ff | — |
| punctuation.definition.italic, markup.italic | #b388ff | italic |
| variable.object, variable.other.object.ts, variable.other.object.property.ts, meta.attribute.class.html entity.other.attribute-name.html, meta.path.dirname.search | #8c9eff | — |
| constant.character.escape, constant.other.color, string.regexp, punctuation.definition.array, punctuation.definition.template-expression, support.function, meta.brace.round, meta.brace.square, meta.brace.curly, meta.separator.key-value, meta.attribute.unrecognized entity.other.attribute-name.html, entity.other.attribute-name.html, source.css punctuation.delimiter | #26c6da | — |
| source.css keyword.other.unit | #1de9b6 | — |
| constant.language.null, constant.language.undefined, punctuation.definition.bold, support.class, support.type.builtin | #ff8a65 | — |
| meta.separator, variable.parameter.function, variable.object.property.ts | #eeeeee | — |
| storage.type.class.todo, storage.type.class.fixme, storage.type.class.changed, storage.type.class.xxx, storage.type.class.idea, storage.type.class.hack, storage.type.class.note, storage.type.class.review, storage.type.class.nb, storage.type.class.bug, storage.type.class.question, storage.type.class.combak, storage.type.class.temp, storage.type.class.debug, storage.type.class.optimize | #ff4081 | bold italic |
| invalid.illegal, invalid.illegal.scss | #ef5350 | — |
| #eeeeee | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...