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#f5f5f5
- activityBar.background#f5f5f5
- activityBar.border#e4e4e4
- activityBar.foreground#171717
- activityBar.inactiveForeground#8b8b8b
- activityBarBadge.background#4e4e4e
- badge.background#c8c8c8
- badge.foreground#171717
- button.background#cbcbcb
- button.hoverBackground#bfbfbf
- checkbox.border#e4e4e4
- dart.closingLabels#d2d2d2
- debugIcon.breakpointCurrentStackframeForeground#171717
- debugIcon.breakpointDisabledForeground#171717
- debugIcon.breakpointForeground#171717
- debugIcon.breakpointStackframeForeground#171717
- debugIcon.breakpointUnverifiedForeground#171717
- debugIcon.continueForeground#171717
- debugIcon.disconnectForeground#171717
- debugIcon.pauseForeground#171717
- debugIcon.restartForeground#171717
- debugIcon.startForeground#171717
- debugIcon.stepBackForeground#171717
- debugIcon.stepIntoForeground#171717
- debugIcon.stepOutForeground#171717
- debugIcon.stepOverForeground#171717
- debugIcon.stopForeground#171717
- debugToolBar.background#f5f5f5
- dropdown.background#f5f5f5
- dropdown.foreground#171717
- editor.background#f5f5f5
- editor.findMatchBackground#f5f5f5
- editor.findMatchBorder#171717
- editor.findMatchHighlightBackground#f5f5f5
- editor.findMatchHighlightBorder#8b8b8b
- editor.foldBackground#f5f5f5
- editor.foreground#171717
- editor.hoverHighlightBackground#dbdbdb
- editor.lineHighlightBackground#eaeaea
- editor.selectionBackground#dbdbdb
- editorBracketMatch.background#f5f5f5
- editorBracketMatch.border#8b8b8b
- editorCursor.foreground#171717
- editorError.foreground#555555
- editorGroup.border#e4e4e4
- editorGroupHeader.tabsBackground#f5f5f5
- editorGroupHeader.tabsBorder#e4e4e4
- editorHoverWidget.statusBarBackground#f5f5f5
- editorIndentGuide.activeBackground#8a8a8a
- editorIndentGuide.background#d1d1d1
- editorInfo.foreground#555555
- editorLightBulb.foreground#171717
- editorLineNumber.activeForeground#828282
- editorLineNumber.foreground#c8c8c8
- editorLink.activeForeground#171717
- editorOverviewRuler.border#e4e4e4
- editorRuler.foreground#d1d1d1
- editorSuggestWidget.foreground#4e4e4e
- editorSuggestWidget.highlightForeground#171717
- editorWarning.foreground#555555
- editorWhitespace.foreground#c8c8c8
- editorWidget.background#f5f5f5
- focusBorder#f5f5f5
- gitDecoration.addedResourceForeground#171717
- gitDecoration.conflictingResourceForeground#171717
- gitDecoration.deletedResourceForeground#4e4e4e
- gitDecoration.ignoredResourceForeground#b1b1b1
- gitDecoration.modifiedResourceForeground#171717
- gitDecoration.submoduleResourceForeground#4e4e4e
- gitDecoration.untrackedResourceForeground#171717
- icon.foreground#939393
- input.background#f5f5f5
- input.border#f5f5f5
- input.foreground#171717
- list.activeSelectionBackground#e4e4e4
- list.activeSelectionForeground#171717
- list.errorForeground#c1210e
- list.filterMatchBackground#c8c8c8
- list.filterMatchBorder#f5f5f5
- list.focusBackground#e4e4e4
- list.highlightForeground#171717
- list.hoverBackground#f5f5f5
- list.inactiveSelectionBackground#f5f5f5
- list.inactiveSelectionForeground#171717
- list.warningForeground#c07e19
- listFilterWidget.background#f5f5f5
- listFilterWidget.noMatchesOutline#c1210e
- listFilterWidget.outline#8b8b8b
- menu.background#f5f5f5
- menu.foreground#171717
- menubar.selectionBackground#e4e4e4
- panel.border#e4e4e4
- panelTitle.activeBorder#f5f5f5
- panelTitle.activeForeground#171717
- panelTitle.inactiveForeground#8b8b8b
- peekView.border#939393
- peekViewEditor.background#f5f5f5
- peekViewEditor.matchHighlightBackground#f5f5f5
- peekViewEditor.matchHighlightBorder#8b8b8b
- peekViewEditorGutter.background#f5f5f5
- peekViewResult.background#ebebeb
- peekViewResult.fileForeground#171717
- peekViewResult.lineForeground#8b8b8b
- peekViewResult.matchHighlightBackground#dbdbdb
- peekViewResult.selectionBackground#f5f5f5
- peekViewResult.selectionForeground#171717
- pickerGroup.foreground#171717
- sash.hoverBorder#dbdbdb
- scrollbar.shadow#f5f5f5
- scrollbarSlider.activeBackground#1717171e
- scrollbarSlider.background#1717171e
- scrollbarSlider.hoverBackground#1717171e
- settings.checkboxBorder#e4e4e4
- settings.dropdownBorder#e4e4e4
- settings.modifiedItemIndicator#939393
- settings.textInputBorder#e4e4e4
- sideBar.background#f5f5f5
- sideBar.border#e4e4e4
- sideBar.foreground#4e4e4e
- sideBarSectionHeader.background#f5f5f5
- sideBarSectionHeader.border#e4e4e4
- statusBar.background#f5f5f5
- statusBar.border#e4e4e4
- statusBar.debuggingBackground#f5f5f5
- statusBar.debuggingBorder#e4e4e4
- statusBar.debuggingForeground#171717
- statusBar.foreground#171717
- statusBar.noFolderBackground#f5f5f5
- statusBar.noFolderBorder#e4e4e4
- statusBar.noFolderForeground#171717
- statusBarItem.activeBackground#f5f5f5
- statusBarItem.hoverBackground#f5f5f5
- symbolIcon.arrayForeground#171717
- symbolIcon.booleanForeground#171717
- symbolIcon.classForeground#171717
- symbolIcon.colorForeground#171717
- symbolIcon.constantForeground#171717
- symbolIcon.constructorForeground#171717
- symbolIcon.enumeratorForeground#171717
- symbolIcon.enumeratorMemberForeground#171717
- symbolIcon.eventForeground#171717
- symbolIcon.fieldForeground#171717
- symbolIcon.fileForeground#171717
- symbolIcon.folderForeground#171717
- symbolIcon.functionForeground#171717
- symbolIcon.interfaceForeground#171717
- symbolIcon.keyForeground#171717
- symbolIcon.keywordForeground#171717
- symbolIcon.methodForeground#171717
- symbolIcon.moduleForeground#171717
- symbolIcon.namespaceForeground#171717
- symbolIcon.nullForeground#171717
- symbolIcon.numberForeground#171717
- symbolIcon.objectForeground#171717
- symbolIcon.operatorForeground#171717
- symbolIcon.packageForeground#171717
- symbolIcon.propertyForeground#171717
- symbolIcon.referenceForeground#171717
- symbolIcon.snippetForeground#171717
- symbolIcon.stringForeground#171717
- symbolIcon.structForeground#171717
- symbolIcon.textForeground#171717
- symbolIcon.typeParameterForeground#171717
- symbolIcon.unitForeground#171717
- symbolIcon.variableForeground#171717
- tab.activeForeground#171717
- tab.border#f5f5f5
- tab.inactiveBackground#f5f5f5
- tab.inactiveForeground#8b8b8b
- terminal.ansiBlack#f5f5f5
- terminal.ansiBlue#9c9c9c
- terminal.ansiBrightBlack#c9c9c9
- terminal.ansiBrightBlue#9c9c9c
- terminal.ansiBrightCyan#434343
- terminal.ansiBrightGreen#707070
- terminal.ansiBrightMagenta#171717
- terminal.ansiBrightRed#171717
- terminal.ansiBrightWhite#171717
- terminal.ansiBrightYellow#171717
- terminal.ansiCyan#434343
- terminal.ansiGreen#707070
- terminal.ansiMagenta#171717
- terminal.ansiRed#171717
- terminal.ansiWhite#171717
- terminal.ansiYellow#171717
- terminal.background#f5f5f5
- terminal.foreground#171717
- terminalCursor.background#f5f5f5
- terminalCursor.foreground#171717
- textLink.activeForeground#171717
- textLink.foreground#171717
- textPreformat.foreground#171717
- titleBar.activeBackground#f5f5f5
- titleBar.activeForeground#171717
- titleBar.border#e4e4e4
- titleBar.inactiveBackground#f5f5f5
- tree.indentGuidesStroke#d2d2d2
- window.activeBorder#e4e4e4
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| variable.parameter.function | #171717 | — |
| comment, punctuation.definition.comment | #a5a5a5 | — |
| punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array | #171717 | — |
| none | #171717 | — |
| keyword.operator | #171717 | — |
| keyword | #3b3b3b | — |
| variable | #323232 | — |
| entity.name.function, meta.require, support.function.any-method | #4e4e4e | — |
| support.class, entity.name.class, entity.name.type.class | #171717 | — |
| meta.class | #171717 | — |
| keyword.other.special-method | #4e4e4e | — |
| storage | #3b3b3b | — |
| support.function | #171717 | — |
| string, constant.other.symbol, entity.other.inherited-class | #171717 | — |
| constant.numeric | #171717 | — |
| none | #171717 | — |
| none | #171717 | — |
| constant | #171717 | — |
| entity.name.tag | #323232 | — |
| entity.other.attribute-name | #171717 | — |
| entity.other.attribute-name.id, punctuation.definition.entity | #4e4e4e | — |
| meta.selector | #3b3b3b | — |
| none | #171717 | — |
| markup.heading punctuation.definition.heading, entity.name.section | #4e4e4e | |
| keyword.other.unit | #171717 | — |
| markup.bold, punctuation.definition.bold | #171717 | bold |
| markup.italic, punctuation.definition.italic | #3b3b3b | italic |
| markup.raw.inline | #171717 | — |
| string.other.link, punctuation.definition.string.end.markdown | #323232 | — |
| meta.link | #171717 | — |
| markup.list | #323232 | — |
| markup.quote | #171717 | — |
| meta.separator | #171717 | — |
| markup.inserted | #171717 | — |
| markup.deleted | #323232 | — |
| markup.changed | #3b3b3b | — |
| constant.other.color | #171717 | — |
| string.regexp | #171717 | — |
| constant.character.escape | #171717 | — |
| punctuation.section.embedded, variable.interpolation | #3b3b3b | — |
| invalid.illegal | #171717 | — |
| invalid.broken | #f5f5f5 | — |
| invalid.deprecated | #171717 | — |
| invalid.unimplemented | #171717 | — |