Usage

React

import { createContext, useContext, useState, type ReactNode } from 'react';
import Umbra, { type Options } from '@emrocode/umbra';
const options: Partial<Options> = {
 autoMatchTheme: true,
 // useColorScheme: ['#ffffff', '#000000'],
 // useStorage: 'local',
 // usePlugins: []
}
let u = new Umbra('', options);
const ThemeContext = createContext<{
 theme: string;
 toggleTheme: () => void;
} | null>(null);
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
 const [theme, setTheme] = useState<string>(() => u.getCurrentTheme());
 const toggleTheme = () => {
 u.toggleTheme();
 setTheme(u.getCurrentTheme());
 };
 return (
 <ThemeContext.Provider value={{ theme, toggleTheme }}>
 {children}
 </ThemeContext.Provider>
 );
};
export const useTheme = () => {
 const context = useContext(ThemeContext);
 if (!context) {
 throw new Error('useTheme must be used within a ThemeProvider');
 }
 return context;
};

TailwindCSS

// tailwind.config.js
darkMode: ['selector', '[data-theme="dark"]']

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme {
 --color-background: #fff;
 --color-foreground: #000;
}
@variant dark {
 --color-background: #000;
 --color-foreground: #fff;
}
@layer base {
 html,
 body {
 @apply bg-background text-foreground;
 }
}