Tailwind Ninja Themes
Publisher: Ludovic GuénetThemes in package: 2
Light and dark themes inspired by Tailwind CSS colors
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.background#111827
- activityBar.foreground#f9fafb
- activityBarBadge.background#3b82f6
- activityBarBadge.foreground#ffffff
- editor.background#111827
- editor.foreground#f9fafb
- editor.lineHighlightBackground#1f2937
- editor.selectionBackground#3b82f680
- editor.selectionHighlightBackground#3b82f640
- editorBracketMatch.background#3b82f633
- editorBracketMatch.border#3b82f6
- editorCursor.foreground#f9fafb
- editorGroup.border#374151
- editorGroupHeader.tabsBackground#111827
- editorIndentGuide.background#374151
- editorRuler.foreground#374151
- editorWhitespace.foreground#4b5563
- panel.background#111827
- panel.border#374151
- sideBar.background#111827
- sideBar.foreground#f9fafb
- sideBarSectionHeader.background#111827
- sideBarSectionHeader.foreground#f9fafb
- sideBarTitle.foreground#f9fafb
- statusBar.background#111827
- statusBar.foreground#f9fafb
- tab.activeBackground#1f2937
- tab.activeForeground#f9fafb
- tab.border#374151
- tab.inactiveBackground#111827
- tab.inactiveForeground#9ca3af
- titleBar.activeBackground#111827
- titleBar.activeForeground#f9fafb
- titleBar.inactiveBackground#111827
- titleBar.inactiveForeground#6b7280
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.class.php, support.other.namespace.php, meta.function-call.static.php support.class | #c4b5fd | — |
| keyword.control.php, keyword.operator.class.php, storage.type.php | #c4b5fd | — |
| variable.other.php, punctuation.definition.variable.php | #fda4af | — |
| entity.name.function.php, support.function.php | #99f6e4 | — |
| meta.function-call.php, meta.method-call.php, meta.function-call.object.php | #99f6e4 | — |
| constant.language.php, constant.other.php, support.constant.core.php, support.constant.std.php | #fbbf24 | — |
| entity.name.type.class.php, entity.other.inherited-class.php, meta.namespace.php | #f472b6 | — |
| entity.other.attribute-name.vue, entity.other.attribute-name.html.vue, meta.directive.vue, meta.directive.shorthand.vue | #fda4af | — |
| punctuation.definition.template-expression.begin.vue, punctuation.definition.template-expression.end.vue | #c4b5fd | — |
| expression.embedded.vue | #99f6e4 | — |
| meta.import.vue, meta.export.vue | #c4b5fd | — |
| support.variable.ref.vue, support.variable.reactive.vue | #fda4af | — |
| support.class.builtin, support.type, variable.other.class, entity.name.type.class | #c4b5fd | — |
| keyword.control, keyword.operator, storage.type, storage.modifier | #c4b5fd | — |
| variable.other.readwrite, meta.definition.variable | #fda4af | — |
| variable.other.constant, constant.language, constant.numeric | #fbbf24 | — |
| entity.name.function, support.function, meta.function-call | #99f6e4 | — |
| variable.other.property, meta.property.object | #22d3ee | — |
| comment | #9ca3af | italic |
| punctuation | #9ca3af | — |
| constant | #fbbf24 | — |
| entity | #f472b6 | — |
| entity.name | #f472b6 | — |
| entity.name.function | #99f6e4 | — |
| keyword | #c4b5fd | — |
| keyword.operator.assignment | #9ca3af | — |
| storage | #c4b5fd | — |
| string, punctuation.definition.string | #7dd3fc | — |
| support | #c4b5fd | — |
| variable | #fda4af | — |
| variable.other.constant.object | #fda4af | — |
| text.html entity | #f472b6 | — |
| text.html entity.other.attribute-name | #fda4af | — |
| text.html string.quoted, text.html punctuation.definition.string | #7dd3fc | — |
| text.html punctuation, text.html keyword.operator, text.html meta.tag | #9ca3af | — |
| text.html meta.tag.sgml, text.html meta.tag.sgml punctuation | #6b7280 | — |
| 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 | #7dd3fc | — |
| source.css keyword.control.at-rule, source.css punctuation.definition.keyword | #c4b5fd | — |
| 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 | #d1d5db | — |
| source.css constant, source.css support.constant | #d1d5db | — |
| source.css meta.property-name, source.css support.type.property-name, source.css string | #7dd3fc | — |
| source.css support.function | #99f6e4 | — |
| source.css keyword.control, source.css keyword.operator | #9ca3af | — |
| source.css keyword.other.unit | #99f6e4 | — |
| source.css variable, source.css entity.other.attribute-name.placeholder, source.css entity.other.attribute-name.placeholder punctuation.definition.entity | #fda4af | — |
| 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 | #9ca3af | — |
| 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 | #fda4af | — |
| 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 | #d1d5db | — |
| 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 | #d1d5db | — |
| source.json constant | #fb7185 | — |
| constant.character.escape | #9ca3af | — |
| variable.other.property.js | #fda4af | — |
| meta.import keyword.control.import | #c4b5fd | — |
| meta.import keyword.control.from, meta.import punctuation | #9ca3af | — |
| meta.import string, meta.import string punctuation.definition.string | #9ca3af | — |
| meta.import variable.other.readwrite | #fda4af | — |