bechbox-ui supports both light and dark themes. You can use themes in two ways: with the ThemeProvider component (recommended) or by manually setting the theme attribute.
Using ThemeProvider (Recommended)
The ThemeProvider component manages theme state, persists the user's preference to localStorage, and automatically applies the theme to your application.
Basic Setup
import { ThemeProvider, Button, useTheme } from "bechbox-ui";
function App() {
return (
<ThemeProvider defaultTheme="light">
<YourAppContent />
</ThemeProvider>
);
}Theme Toggle Example
import { ThemeProvider, useTheme, Button } from "bechbox-ui";
function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
return (
<Button onClick={toggleTheme}>
Switch to {theme === "light" ? "dark" : "light"} mode
</Button>
);
}
function App() {
return (
<ThemeProvider defaultTheme="light">
<ThemeToggle />
{/* Rest of your app */}
</ThemeProvider>
);
}ThemeProvider Props
defaultTheme?: "light" | "dark"- The default theme to use (defaults to "light")storageKey?: string- The localStorage key to store the theme preference (defaults to "bechbox-ui-theme")children: React.ReactNode- Your application content
useTheme Hook
The useTheme hook provides access to the current theme and theme control functions:
const { theme, setTheme, toggleTheme } = useTheme();
// theme: "light" | "dark" - Current theme
// setTheme: (theme: "light" | "dark") => void - Set theme directly
// toggleTheme: () => void - Toggle between light and darkNote: useTheme must be used within a ThemeProvider. If used outside, it will throw an error.
Manual Theme Switching (Without ThemeProvider)
You can also control themes manually by setting the data-theme attribute on the document's root element (<html>).
Setting Theme Manually
// Set to dark theme
document.documentElement.setAttribute("data-theme", "dark");
// Set to light theme
document.documentElement.setAttribute("data-theme", "light");Toggle Theme Manually
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", newTheme);
}React Example (Manual)
import { useState, useEffect } from "react";
import { Button } from "bechbox-ui";
function App() {
const [theme, setTheme] = useState<"light" | "dark">("light");
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
// Optionally save to localStorage
localStorage.setItem("my-theme", theme);
}, [theme]);
const toggleTheme = () => {
setTheme((prev) => (prev === "light" ? "dark" : "light"));
};
return (
<div>
<Button onClick={toggleTheme}>
Switch to {theme === "light" ? "dark" : "light"} mode
</Button>
{/* Rest of your app */}
</div>
);
}Theme Persistence
When using ThemeProvider, the theme preference is automatically saved to localStorage and restored on page load. If you're managing themes manually, you'll need to handle persistence yourself:
// On mount, restore theme from localStorage
useEffect(() => {
const savedTheme = localStorage.getItem("my-theme") as "light" | "dark";
if (savedTheme) {
document.documentElement.setAttribute("data-theme", savedTheme);
}
}, []);
// Save theme when it changes
useEffect(() => {
const theme = document.documentElement.getAttribute("data-theme");
if (theme) {
localStorage.setItem("my-theme", theme);
}
}, [theme]);Available Themes
- light - Light theme with white backgrounds and dark text
- dark - Dark theme with dark backgrounds and light text
All components automatically adapt to the current theme using CSS custom properties. The theme system is CSS-based, so it works even without JavaScript enabled (though you'll need JS to switch themes).