Tailwind Catalyst Theme
Publisher: Jasper GorchovThemes in package: 1
A modern color theme based on the docs of the UI kit "Catalyst" by Tailwind Labs
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#71717a
- activityBar.background#18181b
- activityBar.border#FFFFFF1A
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#a1a1aa
- activityBarBadge.background#1C3544
- activityBarBadge.foreground#7DD3FC
- badge.background#1C3544
- badge.foreground#7DD3FC
- button.background#52525b
- button.border#5B5B63
- diffEditor.insertedLineBackground#2DD4BF26
- diffEditor.insertedTextBackground#34d39940
- diffEditor.removedLineBackground#fb718540
- diffEditor.removedTextBackground#fb718540
- editor.background#09090b
- editor.foreground#f9fafb
- editor.lineHighlightBackground#18181b
- editor.lineHighlightBorder#00000000
- editorGroupHeader.noTabsBackground#18181b
- editorGroupHeader.tabsBackground#18181b
- editorGroupHeader.tabsBorder#FFFFFF1A
- editorGutter.addedBackground#34d399
- editorGutter.deletedBackground#fb7185
- editorGutter.modifiedBackground#60a5fa
- editorHoverWidget.background#18181b
- editorHoverWidget.border#FFFFFF1A
- editorLineNumber.activeForeground#a1a1aa
- editorLineNumber.foreground#52525b
- editorWhitespace.foreground#FFFFFF1A
- focusBorder#0ea5e9
- foreground#d4d4d8
- gitDecoration.deletedResourceForeground#fb7185
- gitDecoration.modifiedResourceForeground#7dd3fc
- gitDecoration.untrackedResourceForeground#bef264
- input.background#242427
- input.border#FFFFFF1A
- list.activeSelectionBackground#ffffff26
- list.errorForeground#fda4af
- list.focusAndSelectionOutline#00000000
- list.hoverBackground#2D2D30
- list.inactiveSelectionBackground#2D2D30
- panel.background#18181b
- panel.border#FFFFFF1A
- quickInput.background#18181b
- sideBar.background#18181b
- sideBar.border#FFFFFF1A
- statusBar.background#2D2D30
- statusBar.border#FFFFFF1A
- statusBar.noFolderBackground#2D2D30
- statusBarItem.remoteBackground#0EA5E933
- statusBarItem.remoteForeground#7DD3FC
- tab.activeBorder#09090b
- tab.activeBorderTop#fff
- tab.border#FFFFFF1A
- tab.inactiveBackground#18181b
- tab.inactiveBorder#FFFFFF1A
- terminal.ansiBlack#ffffff
- terminal.ansiBlue#3b82f6
- terminal.ansiBrightBlack#94a3b8
- terminal.ansiBrightBlue#60a5fa
- terminal.ansiBrightCyan#67e8f9
- terminal.ansiBrightGreen#6ee7b7
- terminal.ansiBrightMagenta#d8b4fe
- terminal.ansiBrightRed#fb7185
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fcd34d
- terminal.ansiCyan#22d3ee
- terminal.ansiGreen#34d399
- terminal.ansiMagenta#c084fc
- terminal.ansiRed#fb7185
- terminal.ansiWhite#cbd5e1
- terminal.ansiYellow#fbbf24
- terminal.background#18181b
- terminal.foreground#f3f4f6
- terminalCommandDecoration.errorBackground#fb718540
- terminalCommandDecoration.successBackground#34d39940
- titleBar.activeBackground#18181b
- titleBar.border#FFFFFF1A
- titleBar.inactiveBackground#18181b
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #9ca3af | italic |
| punctuation | #d1d5db | — |
| constant | #fde68a | — |
| entity | #d1d5db | — |
| entity.name | #f472b6 | — |
| entity.name.function | #99f6e4 | — |
| keyword | #c4b5fd | — |
| keyword.operator.assignment | #9ca3af | — |
| storage | #d1d5db | — |
| string, punctuation.definition.string | #7dd3fc | — |
| support | #c4b5fd | — |
| variable | #fda4af | — |
| variable.other.constant.object | #fda4af | — |
| text.html entity | #f472b6 | — |
| text.html entity.other.attribute-name | #d1d5db | — |
| text.html string.quoted, text.html punctuation.definition.string | #7dd3fc | — |
| text.html punctuation, text.html keyword.operator, text.html meta.tag | #d1d5db | — |
| text.html meta.tag.sgml, text.html meta.tag.sgml punctuation | #93c5fdbf | — |
| text.html entity.name.function | #99f6e4 | — |
| source.css entity, source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.pseudo-class, source.css punctuation.definition.entity | #f472b6 | — |
| source.css meta.attribute-selector, source.css meta.attribute-selector punctuation.definition.string, source.css entity.other.attribute-name | #c4b5fd | — |
| source.css keyword.control.at-rule, source.css punctuation.definition.keyword | #d1d5db | — |
| source.css meta.property-value, source.css meta.property-value.css punctuation.definition.constant, source.css meta.property-list meta.at-rule, source.css variable.parameter | #f9fafb | — |
| source.css constant, source.css support.constant | #f9fafb | — |
| source.css meta.property-name, source.css support.type.property-name, source.css string | #7dd3fc | — |
| source.css support.function | #dbeafe | — |
| source.css keyword.control, source.css keyword.operator | #d1d5db | — |
| source.css keyword.other.unit | #ccfbf1 | — |
| source.css variable, source.css entity.other.attribute-name.placeholder, source.css entity.other.attribute-name.placeholder punctuation.definition.entity | #99f6e4 | — |
| source.css punctuation.section, source.css punctuation.separator, source.css punctuation.terminator, source.css punctuation.definition.constant, source.css meta.attribute-selector punctuation.definition, source.css punctuation.definition.parameters, source.css punctuation.access, source.css meta.property-list | #d1d5db | — |
| source.js meta.block entity.name.tag, source.ts meta.block entity.name.tag, source.tsx meta.block entity.name.tag | #f472b6 | — |
| source.js meta.block entity.other.attribute-name, source.ts meta.block entity.other.attribute-name, source.tsx meta.block entity.other.attribute-name | #d1d5db | — |
| source.js meta.block string.quoted, source.ts meta.block string.quoted, source.tsx meta.block string.quoted, source.js meta.block punctuation.definition.string, source.ts meta.block punctuation.definition.string, source.tsx meta.block punctuation.definition.string | #7dd3fc | — |
| source.js meta.block meta.jsx.children, source.ts meta.block meta.jsx.children, source.tsx meta.block meta.jsx.children | #f9fafb | — |
| source.js meta.block meta.embedded.expression variable.other, source.ts meta.block meta.embedded.expression variable.other, source.tsx meta.block meta.embedded.expression variable.other, source.js meta.block meta.embedded.expression variable.other.readwrite, source.ts meta.block meta.embedded.expression variable.other.readwrite, source.tsx meta.block meta.embedded.expression variable.other.readwrite | #fda4af | — |
| source.js meta.block keyword.operator.ternary, source.ts meta.block keyword.operator.ternary, source.tsx meta.block keyword.operator.ternary | #c4b5fd | — |
| source.json support | #e5e7eb | — |
| source.json constant | #fda4af | — |
| constant.character.escape | #cbd5e1 | — |
| variable.other.property.js | #d1d5db | — |
| meta.import keyword.control.import | #d1d5db | — |
| meta.import keyword.control.from, meta.import punctuation | #d1d5db | — |
| meta.import string, meta.import string punctuation.definition.string | #e5e7eb | — |
| meta.import variable.other.readwrite | #7dd3fc | — |