\n ...\n \n```\n\nThat's it, you site has a light theme!\n\n## Usage\n\n### Add multiple themes\n\nInside the `createThemes` function, define multiple color themes that use the same color names.\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 })\n ],\n };\n```\n\n### Switching themes\n\nSimply switch the className.\n\n```diff\n- \n+ \n ...\n \n```\n\n...or the *data-theme* attribute\n\n```diff\n- \n+ \n ...\n \n```\n\n## Advanced usage\n\n### Nested themes\n\n```diff\n \n ...\n
\n ...\n
\n\n
\n ...\n
\n \n```\n\n### Variants\n\nBased on the current themes, specific styles can be applied with variants\n\n```html\n \n\n
\n ...\n
Serif font here
\n
\n\n
\n ...\n
Sans font here
\n
\n```\n\nVariants only work alongside theme declarations\n\nā Does not work\n\n```html\n \n ...\n
\n ā Sans font here\n
\n \n```\n\n\nā Works fine\n\n```html\n \n ...\n
\n ā Serif font here\n
\n \n```\n\n*Note: this feature might be added in future versions based on community feedback*\n\n\n \n Caveats: inherited properties \n \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 \n ...\n
\n ā Serif is active\n
\n\n
\n ā Serif is still active, it got inherited from the parent theme\n
\n \n ```\n\n ā Works as expected\n\n ```html\n \n ...\n
\n ā Serif is active\n
\n\n
\n ā Sans is active\n
\n \n ```\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 your themes with `light` or `dark`.\"\n\n*tailwind.config.js*\n```js\n const { createThemes } = require('tw-colors');\n\n module.exports = {\n // ...your tailwind config\n plugins: [\n createThemes(({ light, dark }) => ({\n 'my-light-theme': light({ \n 'primary': 'steelblue',\n 'secondary': 'darkblue',\n 'brand': '#F3F3F3',\n }),\n 'my-dark-theme': dark({ \n 'primary': 'turquoise',\n 'secondary': 'tomato',\n 'brand': '#4A4A4A',\n }),\n }))\n ],\n };\n```\n\nSee the [MDN docs][mdn-color-scheme] for more details on this feature.\n\n### CSS Variables\n\n**tw-colors** creates CSS variables using the format `--twc-[color name]` by default, they contain HSL values. \n\nFor example, with the following configuration, the variables `--twc-primary`, `--twc-secondary`, `--twc-brand` will be created.\n\n*tailwind.config.js*\n```js\n module.exports = {\n // ...your tailwind config\n plugins: [\n createThemes({\n 'my-light-theme': { \n 'primary': 'steelblue',\n 'secondary': 'darkblue',\n 'brand': '#F3F3F3',\n },\n 'my-dark-theme': { \n 'primary': 'turquoise',\n 'secondary': 'tomato',\n 'brand': '#4A4A4A',\n },\n })\n ],\n };\n```\n\nExample usage:\n\n```css \n.my-class {\n color: hsl(var(--twc-primary));\n background: hsl(var(--twc-primary) / 0.5);\n}\n```\n\n\nCustom CSS Variables \n\nThe CSS variables names can be **customized** by passing some options as `createThemes` **2nd argument**.\n\nThe available options are: \n* **cssVariablePrefix**, default: `'twc-'`\n* **cssVariableSuffix**, default: `''`\n\nWith the following configuration, the variables `--prefix-primary-suffix`, `--prefix-secondary-suffix`, `--prefix-brand-suffix` will be created.\n\n*tailwind.config.js*\n```js\n module.exports = {\n // ...your tailwind config\n plugins: [\n createThemes({\n 'my-light-theme': { \n 'primary': 'steelblue',\n 'secondary': 'darkblue',\n 'brand': '#F3F3F3',\n },\n 'my-dark-theme': { \n 'primary': 'turquoise',\n 'secondary': 'tomato',\n 'brand': '#4A4A4A',\n },\n }, {\n cssVariablePrefix: 'prefix-', \n cssVariableSuffix: '-suffix' \n })\n ],\n };\n```\n\n\n