https://github.com/unpreset/unocss-preset-theme

The dynamic theme presets for UnoCSS.
https://github.com/unpreset/unocss-preset-theme

unocss unocss-preset unocss-theme

Last synced: 17 days ago
JSON representation

The dynamic theme presets for UnoCSS.

• Host: GitHub
• URL: https://github.com/unpreset/unocss-preset-theme
• Owner: unpreset
• Created: 2022-09-27T11:10:06.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-01T12:38:22.000Z (4 months ago)
• Last Synced: 2024-10-08T22:21:00.588Z (28 days ago)
• Topics: unocss, unocss-preset, unocss-theme
• Language: TypeScript
• Homepage: https://unocss-preset-theme.todev.cc
• Size: 447 KB
• Stars: 131
• Watchers: 1
• Forks: 11
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-unocss - unocss-preset-theme - Preset for automatic theme switching. (Presets)
• awesome-unocss - unocss-preset-theme - Preset for automatic theme switching. (Presets)

README

        
# unocss-preset-theme

This preset will help you easily make dynamic theme switching. Inspired by [here](https://github.com/unocss/unocss/issues/1390)

> Next, I will build [unocss-preset-antd](https://github.com/Dunqing/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 Unocss from 'unocss/vite'

import type { Theme } from 'unocss/preset-uno'

import { presetUno } from 'unocss'

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



  Dark mode

  


    
Use compact theme

  



```


## Options

### prefix

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

### theme

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

### selectors

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

## Examples

- [playground](./playground/)

- [media](./examples/media/)

## Contributors



  



## License

MIT License