Installation ​

Package Installation ​

Install the preset using your preferred package manager:

bash
npm install unocss-preset-light-dark
bash
yarn add unocss-preset-light-dark
bash
pnpm add unocss-preset-light-dark
bash
bun add unocss-preset-light-dark

Setup ​

Add the preset to your UnoCSS configuration:

uno.config.ts
ts
import { defineConfig } from 'unocss'
import { presetLightDark } from 'unocss-preset-light-dark'

export default defineConfig({
  presets: [
    presetLightDark(),
  ],
})

Nuxt ​

For Nuxt projects, it is hightly recommended to use the @nuxtjs/color-mode module for better integration with the light-dark() function.