# unocss-preset-theme

> dynamic theme

Latest version **0.14.1** (published 2024-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install unocss-preset-theme
pnpm add unocss-preset-theme
yarn add unocss-preset-theme
bun add unocss-preset-theme
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.14.1 |
| Published | 2024-10-21 |
| First published | 2022-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 24 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 153 |
| Author | Dunqing |
| Maintainers | dengqing |
| Keywords | unocss, unocss-preset, unocss-theme |

## Links

- npm: https://www.npmjs.com/package/unocss-preset-theme
- Repository: https://github.com/Dunqing/unocss-preset-theme
- Homepage: https://github.com/Dunqing/unocss-preset-theme#readme
- Issues: https://github.com/Dunqing/unocss-preset-theme/issues
- npm.io page: https://npm.io/package/unocss-preset-theme

## Dependencies (2)

- [@unocss/core](https://npm.io/package/@unocss/core.md) ^0.63.4
- [@unocss/rule-utils](https://npm.io/package/@unocss/rule-utils.md) ^0.63.4

## Recent versions

- 0.14.1 (latest) — 2024-10-21
- 0.14.0 — 2024-10-21
- 0.13.0 — 2024-07-01
- 0.12.0 — 2023-12-06
- 0.11.0 — 2023-10-27
- 0.10.1 — 2023-10-05
- 0.10.0 — 2023-09-21
- 0.9.3 — 2023-09-15
- 0.9.2 — 2023-09-08
- 0.9.1 — 2023-08-14
- 0.9.0 — 2023-08-01
- 0.8.1 — 2023-07-14
- 0.8.0 — 2023-07-14
- 0.7.0 — 2023-05-23
- 0.6.0 — 2023-04-11
- … 10 more at https://npm.io/package/unocss-preset-theme/versions

## 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 type { Theme } from 'unocss/preset-uno'
import { presetUno } from 'unocss'
import Unocss from 'unocss/vite'
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

```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
<div class="dark">
  Dark mode
  <div class="compact">
    <div class="px-md">Use compact theme</div>
  </div>
</div>
```

## 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

<a href="https://github.com/unpreset/unocss-preset-theme/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=unpreset/unocss-preset-theme" />
</a>

## License

MIT License

---
_Source: https://npm.io/package/unocss-preset-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._