0.1.4 • Published 6 months ago
lwe8-theme-switch v0.1.4
Install
npm i lwe8-theme-switchpnpm i lwe8-theme-switchUse
1. Theme Provider
layout.tsx
import { ThemeProvider } from "lwe8-theme-switch";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}2. Dark mode selector in Tailwind v4.0
2.1 Class
globals.css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));dark as class attribute
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>2.2 Data Attribute
globals.css
@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));dark as data-theme attribute
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>3. Using <ThemeSwitch />
import { ThemeSwitch } from "lwe8-theme-switch";3.1 Theme selector attributes
types
@default "data-theme"
attribute?: "class" | "data-theme";Depend on your config of tailwindCSS
<div>
<ThemeSwitch attribute="class" />
</div>3.2 Button Type
types
@default "with-system"
btnType?: "light-icon" | "with-system";<div>
<ThemeSwitch btnType="light-icon" />
</div>