@maz-ui/themes

High-performance and typed theme system for Maz-UI.

Features

- 🎨 HSL CSS Variables - Uses HSL CSS variables for maximum flexibility
- 🌓 Automatic dark mode - Native dark mode support with prefers-color-scheme
- 🚀 Automatic generation - Automatically generates color variants (50-950)
- ⚡ Flexible strategies - Runtime, build-time or hybrid
- 🛡️ Strict TypeScript - Complete types for optimal DX
- 🎯 Zero FOUC - Critical CSS injected inline
- 🔧 Configurable presets - Ready-to-use and customizable presets

Installation

``bash
npm install @maz-ui/themes
`

Basic usage

$3

`typescript
// main.ts
import { MazUiTheme } from '@maz-ui/themes/plugin'
import { mazUi } from '@maz-ui/themes/presets/mazUi'
import { createApp } from 'vue'

const app = createApp(App)

app.use(MazUiTheme, {
preset: mazUi,
strategy: 'hybrid',
darkModeStrategy: 'class'
})
`

$3

`vue



`

Available presets

$3

`typescript
import { mazUi } from '@maz-ui/themes/presets/mazUi'
`

$3

`typescript
import { pristine } from '@maz-ui/themes/presets/pristine'
`

$3

`typescript
import { ocean } from '@maz-ui/themes/presets/ocean'
`

$3

`typescript
import { obsidian } from '@maz-ui/themes/presets/obsidian'
`

Creating custom presets

`typescript
import { definePreset, mazUi } from '@maz-ui/themes'

const myPreset = definePreset({
base: mazUi,
overrides: {
name: 'my-theme',
radius: '0.75rem',
colors: {
light: {
primary: '220 100% 50%',
secondary: '210 40% 96%'
},
dark: {
primary: '220 100% 70%',
secondary: '210 40% 15%'
}
}
}
})
`

Composable API

`typescript
import { useTheme } from '@maz-ui/themes'

const {
preset, // ComputedRef
presetName, // ComputedRef
colorMode, // Ref<'light' | 'dark' | 'auto'>
isDark, // ComputedRef
strategy, // ComputedRef<'runtime' | 'build' | 'hybrid'>
updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => void
setColorMode, // (mode: 'light' | 'dark' | 'auto') => void
toggleDarkMode, // () => void
} = useTheme()
`

Strategies

$3

CSS generated and injected dynamically on the client side.

$3

CSS generated at build-time and included in the bundle.

$3

Critical CSS injected inline, complete CSS loaded asynchronously.

Generated CSS variables

The system automatically generates:

- Base color variables: --primary, --secondary, etc.
- Color scales: --primary-50 to --primary-950
- Design variables: --radius, --font-family
- Dark mode support via .dark or @media (prefers-color-scheme: dark)

Build-time

`typescript
import { buildThemeCSS, generateThemeBundle } from '@maz-ui/themes'

// CSS for a preset
const css = buildThemeCSS({
preset: myPreset,
darkModeStrategy: 'class',
critical: true
})

// Bundle for multiple presets
const bundle = generateThemeBundle([mazUi, darkPreset], {
darkModeStrategy: 'class'
})
``