Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crswll/tailwindcss-theme-swapper
A helper for getting tailwind values into css custom properties and switching them between media queries and classes. You can try it out here: https://play.tailwindcss.com/Gt21fePNvv
https://github.com/crswll/tailwindcss-theme-swapper
tailwindcss theming
Last synced: 3 months ago
JSON representation
A helper for getting tailwind values into css custom properties and switching them between media queries and classes. You can try it out here: https://play.tailwindcss.com/Gt21fePNvv
- Host: GitHub
- URL: https://github.com/crswll/tailwindcss-theme-swapper
- Owner: crswll
- Created: 2020-03-06T21:51:14.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-14T10:48:40.000Z (7 months ago)
- Last Synced: 2024-08-01T17:20:32.813Z (6 months ago)
- Topics: tailwindcss, theming
- Language: JavaScript
- Homepage:
- Size: 593 KB
- Stars: 306
- Watchers: 5
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-tailwindcss - Theme Swapper - Theming using CSS variables, with media queries support. (Plugins)
README
# tailwindcss-theme-swapper
**Extend** your tailwind config with CSS Custom Properties and trigger the updating of them with any type of selector or media query.
## Requirements
* Tailwind 1.2
## Browser Support
Just needs to support CSS Custom Properties. IE11 can kind of work but only the base theme with something like `postcss-preset-env`.
## Installation
```bash
yarn add tailwindcss-theme-swapper
# or
npm install tailwindcss-theme-swapper --save-dev
```
## Try It Out
### Minimal
https://play.tailwindcss.com/Gt21fePNvv
### Fancier (radix colors, multiple themes)
https://play.tailwindcss.com/jskI9McL20
## Usage Example
In your tailwind.config.js:
```js
const themeSwapper = require('tailwindcss-theme-swapper')
module.exports = {
plugins: [
themeSwapper({
themes: [
// The only required theme is `base`. Every property used in
// other themes must exist in here.
{
name: 'base',
selectors: [':root'],
theme: {
colors: {
primary: '#f00',
},
},
},
{
name: 'dark',
selectors: ['.dark'],
mediaQuery: '@media (prefers-color-scheme: dark)',
theme: {
colors: {
primary: '#fff',
},
},
},
{
name: 'matrix',
selectors: ['.matrix'],
theme: {
colors: {
primary: '#0f0',
},
},
},
],
}),
],
}
```
### Theme Swapper Properties
```js
{
// The name of the theme. You only have to name `base`.
name: 'dark',
// Apply one of these selectors(?) to an element and all of its children to use that theme.
// `
`, ``, ``
selectors: ['.dark', '[data-theme="dark"]', '[dark]', ],
// If this media query matches the theme will apply to the entire page.
mediaQuery: '@media (prefers-color-scheme: dark)',
// This extends your tailwind theme.
// Only keys/values defined here will be made into custom properties.
theme: {
colors: {
// ...
},
spacing: {
// ...
},
borderRadius: {
// ...
},
},
}
```
## Example I:O
### Themes Input
```js
const themes = [
{
name: 'base',
selectors: [':root'],
theme: {
colors: {
primary: 'hsl(0 100% 50%)',
},
spacing: {
sm: '3px',
},
},
},
{
name: 'dark',
selectors: [
'.dark',
'[dark]',
'[data-theme="dark"]'
],
mediaQuery: '@media (prefers-color-scheme: dark)',
theme: {
colors: {
primary: 'darkslateblue',
},
},
},
{
selectors: ['.lime']
theme: {
colors: {
primary: '#0f0',
},
},
},
]
```
### CSS Output
```css
:root {
--colors-primary: hsl(0 100% 50%);
--spacing-sm: 3px
}
.dark, [dark], [data-theme="dark"] {
--colors-primary: darkslateblue
}
@media (prefers-color-scheme: dark) {
:root{
--colors-primary: darkslateblue
}
}
.lime {
--colors-primary: #0f0
}
/* ... */
.bg-primary {
--tw-bg-opacity: 1;
background-color: color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * var(--tw-bg-opacity)))
}
.text-primary {
--tw-text-opacity: 1;
background-color: color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * var(--tw-text-opacity)))
}
.p-sm {
padding: var(--spacing-sm)
}
```