react-css-theme-switcher
Advanced tools
💫 Switch between CSS themes using React
npm i react-css-theme-switcher
or with Yarn:
yarn add react-css-theme-switcher
Import ThemeSwitcherProvider and pass a theme object with the names of the themes and their respective paths to the CSS stylesheet (normally, public folder).
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeSwitcherProvider } from 'react-css-theme-switcher';
const themes = {
light: 'public/light.css',
dark: 'public/dark.css',
};
const App = () => {
return (
<ThemeSwitcherProvider defaultTheme="light" themeMap={themes}>
<Component />
</ThemeSwitcherProvider>
);
};
Use useThemeSwitcher Hook:
import { useThemeSwitcher } from 'react-css-theme-switcher';
const Component = () => {
const { switcher, themes, currentTheme, status } = useThemeSwitcher();
const [isDarkMode, setIsDarkMode] = React.useState(false);
if (status === 'loading') {
return <div>Loading styles...</div>;
}
const toggleDarkMode = () => {
setIsDarkMode(previous => {
switcher({ theme: previous ? themes.light : themes.dark });
return !previous;
});
};
return (
<div>
<h2>Current theme: {currentTheme}</h2>
<button onClick={toggleDarkMode} />
</div>
);
};
react-css-theme-switcher provides a way to avoid collision with other stylesheets or appended styles by providing where to inject the styles. To achieve this, add an HTML comment like <!--inject-styles-here--> somewhere on the head and then provide 'inject-styles-here' or your custom name in the insertionPoint prop in ThemeSwitcherProvider.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
color: inherit;
}
html {
font-family: 'Poppins', sans-serif;
}
</style>
<!-- inject-styles-here -->
<title>Playground</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
const App = () => {
return (
<ThemeSwitcherProvider
defaultTheme="light"
insertionPoint="inject-styles-here"
themeMap={themes}
>
<Component />
</ThemeSwitcherProvider>
);
};
Some libraries and frameworks make it hard to use comments in head for handling injection order. To solve this issue, you can provide a DOM element as the insertion point. Take for example a <noscript></noscript> element:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
color: inherit;
}
html {
font-family: 'Poppins', sans-serif;
}
</style>
<noscript id="inject-styles-here"></noscript>
<title>Playground</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
const App = () => {
return (
<ThemeSwitcherProvider
defaultTheme="light"
insertionPoint={document.getElementById('inject-styles-here')}
themeMap={themes}
>
<Component />
</ThemeSwitcherProvider>
);
};
| Name | Type | Default value | Description |
|---|---|---|---|
| attr | String | data-theme | Attribute name for that will be appended to the body tag. Its value will be the current theme name. |
| defaultTheme | String | Default theme to load on mount. Must be in themeMap | |
| id | String | current-theme-style | Id of the current selected CSS. |
| insertionPoint | String or HTMLElement | Comment string or element where pre-fetch styles and current themes will be injected. The library will look for the comment string inside head element. If missing will append styles at the end of the head. This is useful for CSS override. | |
| themeMap | Object | Object with all themes available. Key is the theme name and the value is the path for the CSS file. |
| Name | Type | Default value | Description |
|---|---|---|---|
| currentTheme | String or Undefined | undefined | Current selected theme |
| themes | Object | themeMap keys | All themes supplied in the themeMap. |
| switcher | ({ theme }: { theme: string }) => void; | Function | Function to change themes. |
| status | enum('idle', 'loading', 'loaded') | idle | Current load status of the selected stylesheet. Useful to prevent flicker when changing themes. |
Thanks goes to these wonderful people (emoji key):
 Jose Felix 💻 📖 ⚠️ |
This project follows the all-contributors specification. Contributions of any kind are welcome!
Give a ⭐️ if this project helped you!
FAQs
Switch between CSS themes using React
We found that react-css-theme-switcher demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.