2.1.5 • Published 3 months ago
@hdoc-react/toggle-theme v2.1.5
@hdoc-react/toggle-theme
Simple button component for toggle between light
and dark
theme in your
React app.
- It saves the theme in
localStorage
with the keytheme
. - If there is no theme in
localStorage
, the default is the user's preferred theme.
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:
body {
background-color: var(--color-bg, #fff);
color: var(--color-text, #000);
}
.my-class {
color: var(--my-color-text, #000);
}
/* FOR LIGHT THEME: */
/* This is usually unnecessary. */
[data-theme="light"] {
--color-bg: #fff;
--color-text: #000;
--my-color-text: #000;
}
[data-theme="light"] .my-class {
--my-color-text: #000;
/* or */
color: #000;
}
/* FOR DARK THEME: */
[data-theme="dark"] {
--color-bg: #242424;
--color-text: #fff;
--my-color-text: #fff;
}
[data-theme="dark"] .my-class {
--my-color-text: #fff;
/* or */
color: #fff;
}
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;
}