https://github.com/alexfigliolia/day-night-toggle

A dark mode toggle with day/night visualizations built for React
https://github.com/alexfigliolia/day-night-toggle

dark-mode react toggle

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/alexfigliolia/day-night-toggle
• Owner: alexfigliolia
• Created: 2024-08-02T16:57:59.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-10-06T19:48:37.000Z (4 months ago)
• Last Synced: 2024-10-06T19:49:46.859Z (4 months ago)
• Topics: dark-mode, react, toggle
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@figliolia/day-night-toggle
• Size: 2.55 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Day Night Toggle

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

## Installation

```bash

npm i @figliolia/day-night-toggle

# or 

yarn add @figliolia/day-night-toggle

```

### Basic Usage

Rendering your toggle:

```tsx

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

const App = () => {

  const [theme, setTheme] = useState("light");

  return (

    

  );

}

```

### 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:

```css

.my-app .day-night-toggle {

  --height: ;

}

```

### 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](https://caniuse.com/?search=%40property) and [Can I Use CSS Custom Properties](https://caniuse.com/?search=CSS%20custom%20properties) support tables.