New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
tailwindcss-theme-variants
Advanced tools
tailwindcss-theme-variants - npm Package Compare versions
Comparing version 0.5.0 to 0.5.1
| { | ||
| "name": "tailwindcss-theme-variants", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "description": "JavaScript- or media-query-based theme variants with fallback for Tailwind CSS", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
210
README.md
| This Tailwind CSS plugin registers variants for theming without needing custom properties. It has support for responsive variants, extra stacked variants, media queries, and falling back to a particular theme when none matches. | ||
| ## Installation | ||
| You are recommended to check out [the comparison table of all Tailwind CSS theming plugins below](#alternatives) before committing to one. | ||
| # Installation | ||
| ```sh | ||
@@ -9,5 +11,5 @@ npm install --save-dev tailwindcss-theme-variants | ||
| ## Basic usage | ||
| # Basic usage | ||
| ### Using selectors to choose the active theme | ||
| ## Using selectors to choose the active theme | ||
@@ -63,4 +65,16 @@ With this Tailwind configuration, | ||
| ### Using media queries to choose the active theme | ||
| After also enabling `"light"` and `"dark"` variants for `textColor` and bringing in more colors from the [default palette](https://tailwindcss.com/docs/customizing-colors/#default-color-palette), we can implement a simple themed button in HTML like this: | ||
| ```html | ||
| <html class="light-theme"> <!-- Change to dark-theme --> | ||
| <button class="light:bg-teal-200 dark:bg-teal-800 light:text-teal-700 dark:text-teal-100"> | ||
| Sign up | ||
| </button> | ||
| </html> | ||
| ``` | ||
| This will result in dark text on a light background in the light theme, and light text on a dark background in the dark theme. | ||
| ## Using media queries to choose the active theme | ||
| You may rather choose to tie your theme selection to matched media queries, like [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme): | ||
@@ -119,5 +133,4 @@ | ||
| # Full configuration | ||
| ## Full configuration | ||
| This plugin expects configuration of the form | ||
@@ -155,3 +168,3 @@ | ||
| - `baseSelector` (default `":root"`): the selector that each theme's `selector` will be applied to to determine the active theme. | ||
| - `baseSelector` (default `":root"` if you use any selectors to activate themes, otherwise `""`): the selector that each theme's `selector` will be applied to to determine the active theme. | ||
@@ -170,8 +183,9 @@ | ||
| ## Examples | ||
| 💡 At the time of writing, this documentation is a work in progress. For all examples, where I've done my best to stretch the plugin to its limits (especially towards the end of the file), see the test suite in [`tests/index.ts`](https://github.com/SirNavith/tailwindcss-theme-variants/blob/master/tests/index.ts#L46). | ||
| ### Fallback | ||
| #### Media queries | ||
| With the same media-query-activated themes above, | ||
| # Examples | ||
| 💡 At the time of writing, this documentation is a work in progress. For all examples, where I've done my best to stretch the plugin to its limits (especially towards the end of the file), see the test suite in [`tests/index.ts`](https://github.com/SirNavith/tailwindcss-theme-variants/blob/master/tests/index.ts#L67). | ||
| ## Fallback | ||
| ### Media queries | ||
| With the same media-query-activated themes as [above](#using-media-queries-to-choose-the-active-theme), | ||
| ```js | ||
@@ -227,3 +241,3 @@ themes: { | ||
| /* New addition */ | ||
| .light\\:bg-teal-500 { | ||
| .light\:bg-teal-500 { | ||
| background-color: #38B2AC; | ||
@@ -234,3 +248,3 @@ } | ||
| @media (prefers-color-scheme: light) { | ||
| .light\\:bg-teal-500 { | ||
| .light\:bg-teal-500 { | ||
| background-color: #38B2AC; | ||
@@ -241,3 +255,3 @@ } | ||
| @media (prefers-color-scheme: dark) { | ||
| .dark\\:bg-teal-500 { | ||
| .dark\:bg-teal-500 { | ||
| background-color: #38B2AC; | ||
@@ -265,5 +279,7 @@ } | ||
| #### Selectors | ||
| 💡 `fallback` also works for selector-activated themes, which would be useful for visitors without JavaScript enabled (if that's how you've chosen to set the theme). | ||
| 💡 Even though `background-color` has been used in every example, theme variants are available for *any* utility. | ||
| ### Selectors | ||
| 💡 `fallback` also works for selector-activated themes, which would be useful for visitors without JavaScript enabled—if that's how your themes are selected. | ||
| ```js | ||
@@ -287,11 +303,11 @@ themes: { | ||
| :root.light-theme .light\\:bg-gray-900 { | ||
| :root.light-theme .light\:bg-gray-900 { | ||
| background-color: #1A202C; | ||
| } | ||
| :root:not(.light-theme) .dark\\:bg-gray-900 { | ||
| :root:not(.light-theme) .dark\:bg-gray-900 { | ||
| background-color: #1A202C; | ||
| } | ||
| :root.dark-theme .dark\\:bg-gray-900 { | ||
| :root.dark-theme .dark\:bg-gray-900 { | ||
| background-color: #1A202C; | ||
@@ -325,24 +341,156 @@ } | ||
| ### Stacked variants | ||
| ## Stacked variants | ||
| 💡 All of Tailwind CSS's core variants and more are bundled for use with this plugin. You can see the full list in [`src/variants.ts`](https://github.com/SirNavith/tailwindcss-theme-variants/blob/master/src/variants.ts). | ||
| All of Tailwind CSS's core variants are bundled for use with the plugin. You can see the full list in [`src/variants.ts`](https://github.com/SirNavith/tailwindcss-theme-variants/blob/master/src/variants.ts). | ||
| By specifying `variants` in this plugin's options, you can "stack" extra variants on top of the existing theme variants. (We call it *stacking* because there are multiple variants required, like in `night:focus:border-white`, the border will only be white if the `night` theme is active **and** the element is `:focus`ed on). | ||
| TODO | ||
| Here's an example of combining [`prefers-contrast: high`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) (which you can import as `prefersHighContrast`) with the `:hover` variant (which you can import as `hover`): | ||
| ```js | ||
| themes: { | ||
| light: { | ||
| mediaQuery: prefersHighContrast /* "@media (prefers-contrast: high)" */, | ||
| }, | ||
| }, | ||
| variants: { | ||
| "hover": hover /* (selector) => `${selector}:hover` */, | ||
| }, | ||
| ``` | ||
| You could create a simple card that uses contrast pleasant for fully sighted visitors, but intelligently switches to functional high contrast for those who specify it: | ||
| ```html | ||
| <div class="bg-gray-100 high-contrast:bg-white text-gray-800 high-contrast:text-black"> | ||
| <h1>Let me tell you all about...</h1> | ||
| <h2>... this great idea I have!</h2> | ||
| <a href="text-blue-500 high-contrast:text-blue-700 hover:text-blue-600 high-contrast:hover:text-blue-900"> | ||
| See more | ||
| </a> | ||
| </div> | ||
| ``` | ||
| ### Responsive variants | ||
| Responsive variants let you distinguish the current breakpoint per theme, letting you say `lg:green-theme:border-green-200` to have a `green-200` border only when the breakpoint is `lg` (or larger) and the `green-theme` is active, for instance. | ||
| ⚠️ Responsive variants are automatically generated whenever `responsive` is listed in the utility's `variants` in the Tailwind CSS configuration, **not** this plugin's configuration. Also, because this feature is provided by Tailwind CSS rather than this plugin, you have to specify `breakpoint:` **before** the `theme-name:` instead of after like in stacked variants). | ||
| ```js | ||
| TODO | ||
| const { tailwindcssThemeVariants } = require("tailwindcss-theme-variants"); | ||
| module.exports = { | ||
| theme: { | ||
| // Your Tailwind CSS theme configuration | ||
| }, | ||
| variants: { | ||
| textColor: ["responsive", "day", "night"] | ||
| }, | ||
| plugins: [ | ||
| tailwindcssThemeVariants({ | ||
| themes: { | ||
| day: { selector: "[data-time=day]" }, | ||
| night: { selector: "[data-time=night]" }, | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
| ``` | ||
| ### | ||
| With this, we could make the landing page's title line change color at different screen sizes "within" each theme: | ||
| ```html | ||
| <h1 class="day:text-black night:text-white | ||
| sm:day:text-orange-800 sm:night:text-yellow-100 | ||
| lg:day:text-orange-600 lg:night:text-yellow-300"> | ||
| The best thing that has ever happened. Ever. | ||
| </h1> | ||
| ``` | ||
| ### Using both selectors and media queries | ||
| We could also make a group of themes for data density, like you can [configure in GMail](https://www.solveyourtech.com/switch-compact-view-gmail/): | ||
| ```js | ||
| const { tailwindcssThemeVariants } = require("tailwindcss-theme-variants"); | ||
| module.exports = { | ||
| theme: { | ||
| // Your Tailwind CSS theme configuration | ||
| }, | ||
| variants: { | ||
| padding: ["responsive", "comfortable", "compact"] | ||
| }, | ||
| plugins: [ | ||
| tailwindcssThemeVariants({ | ||
| themes: { | ||
| comfortable: { selector: "[data-density=comfortable]" }, | ||
| compact: { selector: "[data-density=compact]" }, | ||
| }, | ||
| // Fall back to the first theme listed (comfortable) when density is not configured | ||
| fallback: true, | ||
| }), | ||
| ], | ||
| }; | ||
| ``` | ||
| This will allow us to configure the padding for each theme for each breakpoint, of a list of emails in the inbox (so original!): | ||
| ```html | ||
| <li class="comfortable:p-2 compact:p-0 | ||
| md:comfortable:p-4 md:compact:p-1 | ||
| xl:comfortable:p-6 xl:compact:p-2"> | ||
| FWD: FWD: The real truth behind... | ||
| </li> | ||
| ``` | ||
| #### Extra stacked variants | ||
| You can still stack extra variants even while using responsive variants. | ||
| TODO | ||
| ## Using both selectors and media queries | ||
| TODO | ||
| TODO: Show active theme tables for every example | ||
| Such as: | ||
| <table> | ||
| <tr> | ||
| <th align="left">Match</th> | ||
| <th align="left">Neither</th> | ||
| <th align="left"><code>prefers-color-scheme: light</code></th> | ||
| <th align="left"><code>prefers-color-scheme: dark</code></th> | ||
| </tr> | ||
| ## License and Contributing | ||
| <tr> | ||
| <th align="left">Neither</th> | ||
| <td align="center">None</td> | ||
| <td align="center"><code>cyan</code></td> | ||
| <td align="center"><code>navy</code></td> | ||
| </tr> | ||
| MIT licensed. There are no contributing guidelines. Just do whatever you want to point out an issue or feature request and I'll work with it. | ||
| <tr> | ||
| <th align="left"><code>:root.day</code></th> | ||
| <td align="center"><code>cyan</code></td> | ||
| <td align="center"><code>cyan</code></td> | ||
| <td align="center"><code>cyan</code></td> | ||
| </tr> | ||
| ## Alternatives | ||
| <tr> | ||
| <th align="left"><code>:root.night</code></th> | ||
| <td align="center"><code>navy</code></td> | ||
| <td align="center"><code>navy</code></td> | ||
| <td align="center"><code>navy</code></td> | ||
| </tr> | ||
| </table> | ||
| ⚠️ If you are stacking more variants while using both selectors and media queries to define when themes should be active, then TODO: | ||
| ### Fallback | ||
| TODO | ||
| ## Call the plugin more than once for multiple groups | ||
| TODO | ||
| ## The ultimate example: how I use every feature together in production | ||
| TODO | ||
| # Alternatives | ||
| TODO: theming plugin comparison table | ||
@@ -427,5 +575,9 @@ | ||
| # License and Contributing | ||
| MIT licensed. There are no contributing guidelines. Just do whatever you want to point out an issue or feature request and I'll work with it. | ||
| --- | ||
| *Repository preview image generated with [GitHub Social Preview](https://social-preview.pqt.dev/)* |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by18.19%
38440
- Number of lines in readme file
- increased by36.19%
572
No dependency changes