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

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

npm i -D unocss-preset-theme

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

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

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

This will be the final generated 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

<div class="dark">
  Dark mode
  <div class="compact">
    <div class="px-md">Use compact theme</div>
  </div>
</div>

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

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

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

• playground
• media

MIT License