Monochrome - Tailwind CSS
Publisher: Carl AssmannThemes in package: 8
Monochromatic readable theme collection based on Tailwind CSS grays
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#f3f4f6
- activityBar.background#f3f4f6
- activityBar.border#e1e3e6
- activityBar.foreground#111827
- activityBar.inactiveForeground#878b93
- activityBarBadge.background#494e5a
- badge.background#c5c7cc
- badge.foreground#111827
- button.background#c8cbcf
- button.hoverBackground#bcbfc4
- checkbox.border#e1e3e6
- dart.closingLabels#d0d1d6
- debugIcon.breakpointCurrentStackframeForeground#111827
- debugIcon.breakpointDisabledForeground#111827
- debugIcon.breakpointForeground#111827
- debugIcon.breakpointStackframeForeground#111827
- debugIcon.breakpointUnverifiedForeground#111827
- debugIcon.continueForeground#111827
- debugIcon.disconnectForeground#111827
- debugIcon.pauseForeground#111827
- debugIcon.restartForeground#111827
- debugIcon.startForeground#111827
- debugIcon.stepBackForeground#111827
- debugIcon.stepIntoForeground#111827
- debugIcon.stepOutForeground#111827
- debugIcon.stepOverForeground#111827
- debugIcon.stopForeground#111827
- debugToolBar.background#f3f4f6
- dropdown.background#f3f4f6
- dropdown.foreground#111827
- editor.background#f3f4f6
- editor.findMatchBackground#f3f4f6
- editor.findMatchBorder#111827
- editor.findMatchHighlightBackground#f3f4f6
- editor.findMatchHighlightBorder#878b93
- editor.foldBackground#f3f4f6
- editor.foreground#111827
- editor.hoverHighlightBackground#d8dade
- editor.lineHighlightBackground#e8e9ec
- editor.selectionBackground#d8dade
- editorBracketMatch.background#f3f4f6
- editorBracketMatch.border#878b93
- editorCursor.foreground#111827
- editorError.foreground#505561
- editorGroup.border#e1e3e6
- editorGroupHeader.tabsBackground#f3f4f6
- editorGroupHeader.tabsBorder#e1e3e6
- editorHoverWidget.statusBarBackground#f3f4f6
- editorIndentGuide.activeBackground#878a93
- editorIndentGuide.background#cfd1d5
- editorInfo.foreground#505561
- editorLightBulb.foreground#111827
- editorLineNumber.activeForeground#7e828b
- editorLineNumber.foreground#c5c7cc
- editorLink.activeForeground#111827
- editorOverviewRuler.border#e1e3e6
- editorRuler.foreground#cfd1d5
- editorSuggestWidget.foreground#494e5a
- editorSuggestWidget.highlightForeground#111827
- editorWarning.foreground#505561
- editorWhitespace.foreground#c5c7cc
- editorWidget.background#f3f4f6
- focusBorder#f3f4f6
- gitDecoration.addedResourceForeground#111827
- gitDecoration.conflictingResourceForeground#111827
- gitDecoration.deletedResourceForeground#494e5a
- gitDecoration.ignoredResourceForeground#adb0b6
- gitDecoration.modifiedResourceForeground#111827
- gitDecoration.submoduleResourceForeground#494e5a
- gitDecoration.untrackedResourceForeground#111827
- icon.foreground#90939b
- input.background#f3f4f6
- input.border#f3f4f6
- input.foreground#111827
- list.activeSelectionBackground#e1e3e6
- list.activeSelectionForeground#111827
- list.errorForeground#c12016
- list.filterMatchBackground#c5c7cc
- list.filterMatchBorder#f3f4f6
- list.focusBackground#e1e3e6
- list.highlightForeground#111827
- list.hoverBackground#f3f4f6
- list.inactiveSelectionBackground#f3f4f6
- list.inactiveSelectionForeground#111827
- list.warningForeground#c07e22
- listFilterWidget.background#f3f4f6
- listFilterWidget.noMatchesOutline#c12016
- listFilterWidget.outline#878b93
- menu.background#f3f4f6
- menu.foreground#111827
- menubar.selectionBackground#e1e3e6
- panel.border#e1e3e6
- panelTitle.activeBorder#f3f4f6
- panelTitle.activeForeground#111827
- panelTitle.inactiveForeground#878b93
- peekView.border#90939b
- peekViewEditor.background#f3f4f6
- peekViewEditor.matchHighlightBackground#f3f4f6
- peekViewEditor.matchHighlightBorder#878b93
- peekViewEditorGutter.background#f3f4f6
- peekViewResult.background#e8eaec
- peekViewResult.fileForeground#111827
- peekViewResult.lineForeground#878b93
- peekViewResult.matchHighlightBackground#d8dade
- peekViewResult.selectionBackground#f3f4f6
- peekViewResult.selectionForeground#111827
- pickerGroup.foreground#111827
- sash.hoverBorder#d8dade
- scrollbar.shadow#f3f4f6
- scrollbarSlider.activeBackground#1118271e
- scrollbarSlider.background#1118271e
- scrollbarSlider.hoverBackground#1118271e
- settings.checkboxBorder#e1e3e6
- settings.dropdownBorder#e1e3e6
- settings.modifiedItemIndicator#90939b
- settings.textInputBorder#e1e3e6
- sideBar.background#f3f4f6
- sideBar.border#e1e3e6
- sideBar.foreground#494e5a
- sideBarSectionHeader.background#f3f4f6
- sideBarSectionHeader.border#e1e3e6
- statusBar.background#f3f4f6
- statusBar.border#e1e3e6
- statusBar.debuggingBackground#f3f4f6
- statusBar.debuggingBorder#e1e3e6
- statusBar.debuggingForeground#111827
- statusBar.foreground#111827
- statusBar.noFolderBackground#f3f4f6
- statusBar.noFolderBorder#e1e3e6
- statusBar.noFolderForeground#111827
- statusBarItem.activeBackground#f3f4f6
- statusBarItem.hoverBackground#f3f4f6
- symbolIcon.arrayForeground#111827
- symbolIcon.booleanForeground#111827
- symbolIcon.classForeground#111827
- symbolIcon.colorForeground#111827
- symbolIcon.constantForeground#111827
- symbolIcon.constructorForeground#111827
- symbolIcon.enumeratorForeground#111827
- symbolIcon.enumeratorMemberForeground#111827
- symbolIcon.eventForeground#111827
- symbolIcon.fieldForeground#111827
- symbolIcon.fileForeground#111827
- symbolIcon.folderForeground#111827
- symbolIcon.functionForeground#111827
- symbolIcon.interfaceForeground#111827
- symbolIcon.keyForeground#111827
- symbolIcon.keywordForeground#111827
- symbolIcon.methodForeground#111827
- symbolIcon.moduleForeground#111827
- symbolIcon.namespaceForeground#111827
- symbolIcon.nullForeground#111827
- symbolIcon.numberForeground#111827
- symbolIcon.objectForeground#111827
- symbolIcon.operatorForeground#111827
- symbolIcon.packageForeground#111827
- symbolIcon.propertyForeground#111827
- symbolIcon.referenceForeground#111827
- symbolIcon.snippetForeground#111827
- symbolIcon.stringForeground#111827
- symbolIcon.structForeground#111827
- symbolIcon.textForeground#111827
- symbolIcon.typeParameterForeground#111827
- symbolIcon.unitForeground#111827
- symbolIcon.variableForeground#111827
- tab.activeForeground#111827
- tab.border#f3f4f6
- tab.inactiveBackground#f3f4f6
- tab.inactiveForeground#878b93
- terminal.ansiBlack#f3f4f6
- terminal.ansiBlue#999ca3
- terminal.ansiBrightBlack#c6c8cd
- terminal.ansiBrightBlue#999ca3
- terminal.ansiBrightCyan#3e4450
- terminal.ansiBrightGreen#6b707a
- terminal.ansiBrightMagenta#111827
- terminal.ansiBrightRed#111827
- terminal.ansiBrightWhite#111827
- terminal.ansiBrightYellow#111827
- terminal.ansiCyan#3e4450
- terminal.ansiGreen#6b707a
- terminal.ansiMagenta#111827
- terminal.ansiRed#111827
- terminal.ansiWhite#111827
- terminal.ansiYellow#111827
- terminal.background#f3f4f6
- terminal.foreground#111827
- terminalCursor.background#f3f4f6
- terminalCursor.foreground#111827
- textLink.activeForeground#111827
- textLink.foreground#111827
- textPreformat.foreground#111827
- titleBar.activeBackground#f3f4f6
- titleBar.activeForeground#111827
- titleBar.border#e1e3e6
- titleBar.inactiveBackground#f3f4f6
- tree.indentGuidesStroke#d0d1d6
- window.activeBorder#e1e3e6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| variable.parameter.function | #111827 | — |
| comment, punctuation.definition.comment | #a1a5ab | — |
| punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array | #111827 | — |
| none | #111827 | — |
| keyword.operator | #111827 | — |
| keyword | #353b48 | — |
| variable | #2c3340 | — |
| entity.name.function, meta.require, support.function.any-method | #494e5a | — |
| support.class, entity.name.class, entity.name.type.class | #111827 | — |
| meta.class | #111827 | — |
| keyword.other.special-method | #494e5a | — |
| storage | #353b48 | — |
| support.function | #111827 | — |
| string, constant.other.symbol, entity.other.inherited-class | #111827 | — |
| constant.numeric | #111827 | — |
| none | #111827 | — |
| none | #111827 | — |
| constant | #111827 | — |
| entity.name.tag | #2c3340 | — |
| entity.other.attribute-name | #111827 | — |
| entity.other.attribute-name.id, punctuation.definition.entity | #494e5a | — |
| meta.selector | #353b48 | — |
| none | #111827 | — |
| markup.heading punctuation.definition.heading, entity.name.section | #494e5a | |
| keyword.other.unit | #111827 | — |
| markup.bold, punctuation.definition.bold | #111827 | bold |
| markup.italic, punctuation.definition.italic | #353b48 | italic |
| markup.raw.inline | #111827 | — |
| string.other.link, punctuation.definition.string.end.markdown | #2c3340 | — |
| meta.link | #111827 | — |
| markup.list | #2c3340 | — |
| markup.quote | #111827 | — |
| meta.separator | #111827 | — |
| markup.inserted | #111827 | — |
| markup.deleted | #2c3340 | — |
| markup.changed | #353b48 | — |
| constant.other.color | #111827 | — |
| string.regexp | #111827 | — |
| constant.character.escape | #111827 | — |
| punctuation.section.embedded, variable.interpolation | #353b48 | — |
| invalid.illegal | #111827 | — |
| invalid.broken | #f3f4f6 | — |
| invalid.deprecated | #111827 | — |
| invalid.unimplemented | #111827 | — |