rc-theme-switcher
v1.0.4
Published
A simple Theme/Style Manager for React that allows switching between **light**, **dark**, and **custom themes**, supports **system preference**. Perfect for React projects of any size. It uses React Context API + localStorage to persist theme across sess
Maintainers
sajad_sadeghiReadme
rc-theme-switcher
A simple Theme/Style Manager for React that allows switching between light, dark, and custom themes, supports system preference. Perfect for React projects of any size. It uses React Context API + localStorage to persist theme across sessions.
✨ Features
- 🌙 Supports light/dark mode out of the box
- 🖌️ Custom themes supported
- 💾 Saves theme in
localStorage - 🎨 Automatically detects system color scheme
- ⚡ Simple hook API (
useTheme)
Installation
Using npm:
npm install rc-theme-switcherUsing yarn:
yarn add rc-theme-switcherBasic Usage
import React from "react";
import { ThemeProvider, useTheme } from "rc-theme-switcher";
import "rc-theme-switcher/dist/theme.css";
const ThemeSwitcherButton = () => {
const { theme, toggleTheme } = useTheme();
return <button onClick={toggleTheme}>Switch Theme (Current: {theme})</button>;
};
function App() {
return (
<ThemeProvider defaultTheme="light">
<div>
<h1>Hello Theme Switcher!</h1>
<ThemeSwitcherButton />
</div>
</ThemeProvider>
);
}
export default App;🎯 API
ThemeProvider
Props:
defaultTheme (optional): "light" | "dark" | string (default: "light")
useTheme()
Returns:
theme: current theme name
toggleTheme(): switch between light/dark
setCustomTheme(name: string): set a custom theme🛠️ How it works
On first load:
Checks localStorage for saved theme
If none found, matches system preference (prefers-color-scheme)
Updates <body data-theme="..."> for CSS usageAdvanced Usage
System Preference Auto Detection
<ThemeProvider defaultTheme="light" useSystemPreference>
<YourAppComponents />
</ThemeProvider>useSystemPreference prop enables automatic detection of the user's system theme (prefers-color-scheme).
Custom Themes
<ThemeProvider defaultTheme="light">
<button onClick={() => setCustomTheme("blue")}>Blue Theme</button>
</ThemeProvider>Define CSS for your custom theme:
:root[data-theme="light"] {
--bg: #ffffff;
--text: #000000;
}
:root[data-theme="dark"] {
--bg: #1a1a1a;
--text: #ffffff;
}
:root[data-theme="blue"] {
--bg: #001f3f;
--text: #ffffff;
}
body {
background: var(--bg);
color: var(--text);
}