unocss-preset-theme

This preset will help you easily make dynamic theme switching. Inspired by here

> Next, I will build unocss-preset-antd based on this preset

Installation

``bash
npm i -D unocss-preset-theme
`

Usages

Usually you just need to set your light theme to unocss and your dark theme to presetTheme. This preset will transform your provide theme into css variables, then you just need to set the dark class or compact class (Depends on your theme name) in your html and you're done.

Just like this

`typescript
import type { Theme } from 'unocss/preset-uno'
import { presetUno } from 'unocss'
import Unocss from 'unocss/vite'
import presetTheme from 'unocss-preset-theme'

Unocss({
// Configure light themes
theme: {
},
presets: [
presetUno(),
presetTheme({
theme: {
// Configure dark themes
dark: {
},
// Configure compact themes
compact: {
}
}
})
]
})
`

This will be the final generated css

`css
/ darkMode: class /
.dark{}
:root{}
.compact{}

/ If you set darkMode to media, the css will look like this /
.compact{}
@media (prefers-color-scheme: dark){}
@media (prefers-color-scheme: light){}
`

Then, you simply apply it as follows

`html


The prefix of the generated css variables, default is --un-preset-theme

$3

Your different theme. like { dark: {}, other: {} }

$3

Customize the selectors of the generated css variables { light: ':root', [themeName]: '.[themeName]' }`

Examples

- playground
- media

Contributors

License

MIT License