@hdoc/react-toggle-theme
Simple button component for toggle between light
and dark
theme in your React app.
Installation
npm install @hdoc/react-toggle-theme
Usage
First, import load-theme.js
in your index.html
:
<script
type="module"
src="/path/to/@hdoc/react-toggle-theme/dist/load-theme.js"
></script>
Then, in your App.jsx
or another file:
import { ThemeButton } from "@hdoc/react-toggle-theme";
function App() {
return (
<>
<ThemeButton
lightElement={<span>Light</span>}
darkElement={<span>Dark</span>}
fullRounded
/>
</>
);
}
Finally, you will need to add your styles manually:
/* For light theme: */
[data-theme="light"] { ... }
[data-theme="light"] .my-class { ... }
/* For dark theme: */
[data-theme="dark"] { ... }
[data-theme="dark"] .my-class { ... }
Props
lightElement
Element to render when the theme is light
.
Type: ReactNode
darkElement
Element to render when the theme is dark
.
Type: ReactNode
fullRounded
Whether to render the button with rounded corners as a circle.
Type: boolean
CSS classes
theme-button
Default class name
theme-button--full-rounded
Styles the button as a circle when fullRounded=true
Customization
You can customize the background color of the button with the following CSS custom properties:
.theme-button {
--button-bg: #fff;
--button-bg-hover: #eee;
--button-bg-active: #ddd;
}
/* The same custom properties applies for dark theme. */
[data-theme="dark"] .theme-button {
--button-bg: #333;
--button-bg-hover: #444;
--button-bg-active: #555;
}