{"id":18040502,"url":"https://github.com/l-blondy/tw-colors","last_synced_at":"2025-05-14T14:09:55.769Z","repository":{"id":65029533,"uuid":"566943547","full_name":"L-Blondy/tw-colors","owner":"L-Blondy","description":"Tailwind plugin to easily add multiple color themes to your projects.","archived":false,"fork":false,"pushed_at":"2025-01-29T16:02:02.000Z","size":525,"stargazers_count":499,"open_issues_count":1,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T20:43:36.129Z","etag":null,"topics":["dark","multiple-themes","tailwind","tailwindcss","theme"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/L-Blondy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-16T18:37:09.000Z","updated_at":"2025-04-12T09:07:03.000Z","dependencies_parsed_at":"2023-10-23T08:33:08.565Z","dependency_job_id":"ac1842e6-c284-46bd-b6f9-8976ade50eb6","html_url":"https://github.com/L-Blondy/tw-colors","commit_stats":{"total_commits":72,"total_committers":1,"mean_commits":72.0,"dds":0.0,"last_synced_commit":"c6ad961983e52e323384c24c6fda4fd04899c9c9"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L-Blondy%2Ftw-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L-Blondy%2Ftw-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L-Blondy%2Ftw-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L-Blondy%2Ftw-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/L-Blondy","download_url":"https://codeload.github.com/L-Blondy/tw-colors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160558,"owners_count":22024571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark","multiple-themes","tailwind","tailwindcss","theme"],"created_at":"2024-10-30T15:06:16.608Z","updated_at":"2025-05-14T14:09:50.742Z","avatar_url":"https://github.com/L-Blondy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [tw-colors](https://github.com/L-Blondy/tw-colors)\n\nIntroducing the ultimate game-changer for your Tailwind app! Say goodbye to cluttered dark variants and messy CSS variables. With this tailwind plugin, switching between color themes is as effortless as changing one className.\n\n## 🚨 Tailwind 4 🚨\n\nThis plugin was originally designed for Tailwind CSS v3. With Tailwind v4's release, you may want to consider using Tailwind's built-in CSS configuration for managing multiple themes instead.\n\n## Highlights\n\n* 🚀 **Scalable**, add as many themes and colors as you want. There is no limit on the number of themes and color you can use\n* 💫 **Flexible**, don't limit yourself to colors, with the built-in **variants** you can theme any css property\n* ✨ **Easy to adopt**, no need to change your markup, it just works!\n* 🤩 **Nested themes** are supported for complex use cases \n* 🎯 **Full [Tailwind CSS Intellisense][tailwind-intellisense-url] support** 🔥🔥🔥\n\n## Changelog\n\nSee the full [changelog here](https://github.com/L-Blondy/tw-colors/blob/master/CHANGELOG.md) \n\n## Installation\n\n### Tailwind 4\n\n```bash\nnpm i -D tw-colors@4.0.0-beta.1\n```\n\n### Tailwind 3\n\n```bash\nnpm i -D tw-colors@3.3.2\n```\n\n\n## Usage\n\nTake an existing tailwind config and move the colors in the `createThemes` plugin, giving it a name (e.g. light).\n\n*tailwind.config.js*\n```diff\n+  const { createThemes } = require('tw-colors');\n\n   module.exports = {\n      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],\n      theme: {\n         extends: {\n-           colors: {\n-              'primary': 'steelblue',\n-              'secondary': 'darkblue',\n-              'brand': '#F3F3F3',\n-              // ...other colors\n-           }\n         },\n      },\n      plugins: [\n+        createThemes({\n+           light: { \n+              'primary': 'steelblue',\n+              'secondary': 'darkblue',\n+              'brand': '#F3F3F3',\n+              // ...other colors\n+           }\n+        })\n      ],\n   };\n\n```\n\n*💡 **tip:** you can use any color name as you usually do, not just the ones from the example. The same goes for the theme names.*\n\n**Note:** With Tailwind 4, you need to import your js config in your css config file (e.g. `@config \"./tailwind.config.js\"`)\n\nApply `class='light'` anywhere in your app (the html or the body tag is a good spot for it) \n\n*See the [options](https://github.com/L-Blondy/tw-colors#producethemeclass) to customize the className*\n\n```diff\n-  \u003chtml\u003e\n+  \u003chtml class='light'\u003e\n      ...\n      \u003cdiv class='bg-brand'\u003e\n         \u003ch1 class='text-primary'\u003e...\u003c/h1\u003e\n         \u003cp class='text-secondary'\u003e...\u003c/p\u003e\n      \u003c/div\u003e\n      ...\n   \u003c/html\u003e\n```\n\nThat's it, your site has a *light* theme!\n\n### Adding more themes\n\n*tailwind.config.js*\n```diff\n   const { createThemes } = require('tw-colors');\n\n   module.exports = {\n      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],\n      plugins: [\n         createThemes({\n            light: { \n               'primary': 'steelblue',\n               'secondary': 'darkblue',\n               'brand': '#F3F3F3',\n            },\n+           dark: { \n+              'primary': 'turquoise',\n+              'secondary': 'tomato',\n+              'brand': '#4A4A4A',\n+           },\n+           forest: { \n+              'primary': '#2A9D8F',\n+              'secondary': '#E9C46A',\n+              'brand': '#264653',\n+           },\n+           winter: { \n+              'primary': 'hsl(45 39% 69%)',\n+              'secondary': 'rgb(120 210 50)',\n+              'brand': 'hsl(54 93% 96%)',\n+           },\n         })\n      ],\n   };\n```\n\nYou now have a **light**, a **dark** and a **forest** theme!\n\n### Switching themes\n\nSimply switch the *class* attribute\n\n```diff\n-  \u003chtml class='light'\u003e\n+  \u003chtml class='dark'\u003e\n      ...\n   \u003c/html\u003e\n```\n\n###  Variants\n\nBased on the current theme, specific styles can be applied using variants.\n\n**Note:** In the following example the variants would have no effect with the light theme\n\n```html\n   \u003c!-- Use \"serif\" font for the dark theme only --\u003e\n   \u003cdiv class='dark font-sans dark:font-serif'\u003e\n      ...\n      \u003cdiv\u003eSerif font here\u003c/div\u003e\n\n      \u003c!-- this button is rounded when the theme is `dark` --\u003e\n      \u003cbutton class='dark:rounded'\u003eClick Me\u003c/button\u003e\n   \u003c/div\u003e\n```\n\n*See the [options](https://github.com/L-Blondy/tw-colors#producethemevariant) to customize the variant name*\n\n\n\u003cdetails\u003e\n   \u003csummary\u003e\n      \u003cstrong\u003e Caveat: group-{modifier} \u003c/strong\u003e\n   \u003c/summary\u003e\n   Always use the group variant before the theme variant.\n\n   ```html\n      \u003chtml class='theme-dark'\u003e\n         ...\n         \u003cdiv class='group'\u003e\n            \u003cdiv class='theme-dark:group-hover:bg-red-500'\u003e\n               ❌ the group variant does not work\n            \u003c/div\u003e\n            \u003cdiv class='group-hover:theme-dark:bg-red-500'\u003e\n               ✅ the group variant works properly\n            \u003c/div\u003e\n         \u003c/div\u003e    \n      \u003c/html\u003e\n   ```\n\u003c/details\u003e\n\n\n\n### Nested themes\n\n\nFor [variants](https://github.com/L-Blondy/tw-colors#variants) to work properly in nested themes, an empty `data-theme` attribute must be added alongside the nested theme `class`\n\n```diff\n   \u003chtml class='dark'\u003e\n      ...\n      \u003cdiv data-theme class='winter'\u003e\n         ...\n      \u003c/div\u003e\n\n      \u003cdiv data-theme class='forest'\u003e\n         ...\n      \u003c/div\u003e\n   \u003c/html\u003e\n```\n\n\u003cdetails\u003e\n   \u003csummary\u003e\n      \u003cstrong\u003eCaveat: inherited properties \u003c/strong\u003e\n   \u003c/summary\u003e\n\n   Inherited properties (e.g. \"font-family\") are inherited by **all descendants**, including nested themes.\n   In order to stop the propagation the base styles should be re-declared on nested themes\n\n   ❌ Unexpected behavior\n\n   ```html\n      \u003chtml class='theme-dark font-sans theme-dark:font-serif'\u003e\n         ...\n         \u003cdiv\u003e\n            ✅ Serif is active\n         \u003c/div\u003e\n\n         \u003cdiv class=\"theme-light\"\u003e\n            ❌ Serif is still active, it got inherited from the parent theme\n         \u003c/div\u003e     \n      \u003c/html\u003e\n   ```\n\n   ✅ Works as expected\n\n   ```html\n      \u003chtml class='theme-dark font-sans theme-dark:font-serif'\u003e\n         ...\n         \u003cdiv\u003e\n            ✅ Serif is active\n         \u003c/div\u003e\n\n         \u003cdiv class=\"theme-light font-sans theme-dark:font-serif\"\u003e\n            ✅ Sans is active\n         \u003c/div\u003e   \n      \u003c/html\u003e\n   ```\n\u003c/details\u003e\n\n\n### CSS color-scheme\n\n`createThemes` also accepts a function that exposes the `light` and `dark` functions. \\\nTo apply the `color-scheme` CSS property, simply wrap a theme with `light` or `dark`.\"\n\n\nSee the [MDN docs][mdn-color-scheme] for more details on this feature.\n\n*tailwind.config.js*\n```js\ncreateThemes(({ light, dark }) =\u003e ({\n   'winter': light({ \n      'primary': 'steelblue',\n      'base': 'darkblue',\n      'surface': '#F3F3F3',\n   }),\n   'forest': dark({ \n      'primary': 'turquoise',\n      'base': 'tomato',\n      'surface': '#4A4A4A',\n   }),\n}))\n```\n\n### CSS Variables\n\n**tw-colors** creates CSS variables using the format `--twc-[color name]`. \n\nFor example, with the following configuration, the variables `--twc-primary`, `--twc-base`, `--twc-surface` will be created.\n\n*tailwind.config.js*\n```js\n   module.exports = {\n      // ...your tailwind config\n      plugins: [\n         createThemes({\n            'winter': { \n               'primary': 'steelblue',\n               'base': 'darkblue',\n               'surface': '#F3F3F3',\n            },\n            'forest': { \n               'primary': 'turquoise',\n               'base': 'tomato',\n               'surface': '#4A4A4A',\n            },\n         })\n      ],\n   };\n```\n\n**v4 usage:**\n\n```css \n.my-class {\n   color: var(--twc-primary);\n}\n```\n\n**v3 usage:**\n\n```css \n.my-class {\n   color: hsl(var(--twc-primary));\n}\n```\n\n*See the [options](https://github.com/L-Blondy/tw-colors#producecssvariable) to customize the css variables*\n\n## Options\n\nThe options can be passed as the second argument to the plugin\n\n```js\ncreateThemes({\n   // your colors config here...\n}, {\n   produceCssVariable: (colorName) =\u003e `--twc-${colorName}`,\n   produceThemeClass: (themeName) =\u003e `theme-${themeName}`\n   produceThemeVariant: (themeName) =\u003e `theme-${themeName}`\n   strict: false\n})\n```\n\n\n### \u003csamp\u003edefaultTheme (v3 only)\u003c/samp\u003e\n\nThe default theme to use, think of it as a fallback theme when no theme is declared.\n\n\n**Example: simple default theme**\n```js\ncreateThemes({\n   'winter': { \n      'primary': 'steelblue',\n   },\n   'halloween': { \n      'primary': 'crimson',\n   },\n}, {\n   defaultTheme: 'winter' // 'winter' | 'halloween'\n})\n```\n\nThe default theme can also be chosen according to the user *light* or *dark* preference (see [MDN prefers-color-scheme][mdn-prefers-color-scheme])\n\n**Example: adapting to user preference**\n```js\ncreateThemes({\n   'winter': { \n      'primary': 'steelblue',\n   },\n   'halloween': { \n      'primary': 'crimson',\n   },\n}, {\n   defaultTheme: {\n      /**\n       * when `@media (prefers-color-scheme: light)` is matched, \n       * the default theme is the \"winter\" theme \n       */\n      light: 'winter', \n      /**\n       * when `@media (prefers-color-scheme: dark)` is matched, \n       * the default theme is the \"halloween\" theme \n       */\n      dark: 'halloween', \n   }\n})\n```\n\n### \u003csamp\u003estrict\u003c/samp\u003e\n\n**default**: `false`\n\nIf `false` invalid colors are ignored. \\\nIf `true` invalid colors produce an error.\n\n*Example*\n```js\ncreateThemes({\n   'christmas': { \n      // invalid color\n      'primary': 'redish',\n   },\n   'darkula': { \n      'primary': 'crimson',\n   },\n}, {\n   // an error will be thrown\n   strict: true\n})\n```\n\n### \u003csamp\u003eproduceCssVariable\u003c/samp\u003e\n\n**default**: \u003ccode\u003e(colorName) =\u003e \\`--twc-${colorName}\\`\u003c/code\u003e\n\nCustomize the css variables generated by the plugin.\n\nWith the below configuration, the following variables will be created:\n* `--a-primary-z` (instead of *twc-primary*)\n* `--a-secondary-z` (instead of *twc-secondary*)\n* `--a-base-z` (instead of *twc-base*)\n\n```js\ncreateThemes({\n   'light': { \n      'primary': 'steelblue',\n      'secondary': 'darkblue',\n      'base': '#F3F3F3',\n   },\n   'dark': { \n      'primary': 'turquoise',\n      'secondary': 'tomato',\n      'base': '#4A4A4A',\n   },\n}, {\n   produceCssVariable: (colorName) =\u003e `--a-${colorName}-z`\n})\n```\n\n### \u003csamp\u003eproduceThemeClass\u003c/samp\u003e\n\n**default**: \u003ccode\u003e(themeName) =\u003e themeName\u003c/code\u003e\n\nCustomize the classNames of the themes and variants\n\nWith the below configuration, the following theme classNames and variants will be created: \n* `theme-light` (instead of *light*)\n* `theme-dark` (instead of *dark*)\n\n\n```js\ncreateThemes({\n   'light': { \n      'primary': 'steelblue',\n      'secondary': 'darkblue',\n      'base': '#F3F3F3',\n   },\n   'dark': { \n      'primary': 'turquoise',\n      'secondary': 'tomato',\n      'base': '#4A4A4A',\n   },\n}, {\n   produceThemeClass: (themeName) =\u003e `theme-${themeName}`\n})\n```\n\n```html\n\u003chtml class='theme-dark'\u003e\n   ...\n   \u003cbutton class='theme-dark:rounded'\u003e\n      Click Me\n   \u003c/button\u003e\n   ...\n\u003c/html\u003e\n```\n\n### \u003csamp\u003eproduceThemeVariant\u003c/samp\u003e\n\n**default**: same as `produceThemeClass`\n\nCustomize the variants\n\nWith the below configuration, the following variants will be created: \n* `theme-light` (instead of *light*)\n* `theme-dark` (instead of *dark*)\n\n\n```js\ncreateThemes({\n   'light': { \n      'primary': 'steelblue',\n      'secondary': 'darkblue',\n      'base': '#F3F3F3',\n   },\n   'dark': { \n      'primary': 'turquoise',\n      'secondary': 'tomato',\n      'base': '#4A4A4A',\n   },\n}, {\n   produceThemeVariant: (themeName) =\u003e `theme-${themeName}`\n})\n```\n\n```html\n\u003chtml class='dark'\u003e\n   ...\n   \u003cbutton class='theme-dark:rounded'\u003e\n      Click Me\n   \u003c/button\u003e\n   ...\n\u003c/html\u003e\n```\n\n## From the same Author\n\n[up-fetch](https://github.com/L-Blondy/up-fetch): Tiny 1kb configuration tool for the fetch API with sensible default\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nPlease share\n\n[![][tweet]][tweet-url]\n\n\u003c/div \u003e\n\n[tweet]: https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui\n[tweet-url]: https://twitter.com/intent/tweet?text=tw-colors%0ATailwind%20color%20themes%20made%20easy!%0Ahttps://github.com/L-Blondy/tw-colors\n[tailwind-intellisense-url]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss\n[mdn-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\n[mdn-prefers-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\n\u003c!-- https://github.com/L-Blondy/tw-colors/blob/master/README.md --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl-blondy%2Ftw-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fl-blondy%2Ftw-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl-blondy%2Ftw-colors/lists"}