@figliolia/day-night-toggle

Day Night Toggle

A dark mode toggle with day/night visualizations built for React

Installation

npm i @figliolia/day-night-toggle
# or 
yarn add @figliolia/day-night-toggle

Basic Usage

Rendering your toggle:

import { ITheme, DayNightToggle } from "@figliolia/day-night-toggle";

const App = () => {
  const [theme, setTheme] = useState<ITheme>("light");
  return (
    <DayNightToggle theme={theme} onChange={setTheme} />
  );
}

Changing the Size of your toggle (CSS)

The toggle scales based on a custom property (--height) on the component. It's the only value that needs to change when scaling the dimensions of the toggle:

.my-app .day-night-toggle {
  --height: <your-value>;
}

Browser Support

This package relies on CSS @property rules as well as CSS custom properties in order to function. For more detailed information on specific browser version support, please reference the Can I Use @property and Can I Use CSS Custom Properties support tables.