Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joserfelix/react-css-theme-switcher
💫 Switch between CSS themes using React
https://github.com/joserfelix/react-css-theme-switcher
Last synced: 6 days ago
JSON representation
💫 Switch between CSS themes using React
- Host: GitHub
- URL: https://github.com/joserfelix/react-css-theme-switcher
- Owner: JoseRFelix
- License: mit
- Created: 2020-06-20T06:26:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:18:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T14:53:17.786Z (21 days ago)
- Language: TypeScript
- Homepage: https://react-css-theme-switcher.netlify.app/
- Size: 1.22 MB
- Stars: 103
- Watchers: 2
- Forks: 11
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React CSS Theme Switcher
> 💫 Switch between CSS themes using React
## Prerequisites
- node >=10
## Installation
```shell
npm i react-css-theme-switcher
```
or with Yarn:
```shell
yarn add react-css-theme-switcher
```
## Usage
Import ThemeSwitcherProvider and pass a theme object with the names of the themes and their respective paths to the CSS stylesheet (normally, public folder).
```jsx
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 (
);
};
```
Use `useThemeSwitcher` Hook:
```jsx
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
Loading styles...;
}
const toggleDarkMode = () => {
setIsDarkMode(previous => {
switcher({ theme: previous ? themes.light : themes.dark });
return !previous;
});
};
return (
Current theme: {currentTheme}
);
};
```
### CSS Injection Order
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 `` somewhere on the head and then provide `'inject-styles-here'` or your custom name in the insertionPoint prop in `ThemeSwitcherProvider`.
```html
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
color: inherit;
}
html {
font-family: 'Poppins', sans-serif;
}
Playground
```
```jsx
const App = () => {
return (
);
};
```
### HTML Element Insertion Point
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 `` element:
```html
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
color: inherit;
}
html {
font-family: 'Poppins', sans-serif;
}
Playground
```
```jsx
const App = () => {
return (
);
};
```
## API
### ThemeSwitcherProvider
#### Props
| 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. |
### useThemeSwitcher
#### Returns
| 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. |
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://allcontributors.org) specification.
Contributions of any kind are welcome!
## Show your support
Give a ⭐️ if this project helped you!
