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