UnoCSS Light Dark Preset ​

Leverage the modern CSS light-dark() function to automatically handle light and dark mode colors with UnoCSS.

• Installation

• Try the Playground

Features ​

🌗 Modern CSS Support ​

Uses the native CSS light-dark() function introduced in CSS Color Module Level 5. This means colors automatically adapt to the user's color scheme preference without any JavaScript.

🎨 Automatic Color Switching ​

Define colors once and they automatically switch between light and dark variants based on the user's system preference or explicit color scheme setting.

🔧 Flexible Configuration ​

Support for different dark mode strategies:

• Media Queries: @media (prefers-color-scheme: dark)
• Class-based: .dark or custom class selectors
• Custom Selectors: [data-theme="dark"] or any CSS selector

Quick Start ​

npm install unocss-preset-light-dark

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

export default defineConfig({
  presets: [
    presetLightDark({
      colors: {
        primary: ['#3b82f6', '#1d4ed8'], // [light, dark]
        secondary: { light: '#10b981', dark: '#059669' },
      }
    })
  ]
})

<!-- Colors automatically switch based on user preference -->
<div class="bg-primary text-secondary">Auto-adapting colors!</div>

How It Works ​

The preset generates CSS using the light-dark() function:

.bg-primary {
  background-color: light-dark(#3b82f6, #1d4ed8);
}

This modern CSS function automatically selects the appropriate color based on the computed color-scheme value, eliminating the need for complex CSS selectors or JavaScript.

Browser Support ​

Next Steps ​

• Installation Guide

• Configuration Options

• Basic Usage

• Examples