https://github.com/femincan/light-dark

🔦 Manage light-dark mode with ease
https://github.com/femincan/light-dark

Last synced: 2 days ago
JSON representation

🔦 Manage light-dark mode with ease

• Host: GitHub
• URL: https://github.com/femincan/light-dark
• Owner: femincan
• License: mit
• Created: 2024-04-19T05:24:13.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-27T20:56:57.000Z (4 months ago)
• Last Synced: 2024-11-01T01:47:24.686Z (17 days ago)
• Language: TypeScript
• Size: 60.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🔦 `light-dark`

`light-dark` is a light-dark theme management library, especially with [`shadcn/ui`](https://github.com/shadcn-ui/ui).

The library sets the initial theme with local storage if an entry exists or uses the default theme `light`. Then, listeners are set up for changes in theme preference, local storage, and manual theme changes.

## Getting Started

You can install the library with your preferred package manager:

```bash

npm install light-dark

# Or pnpm

pnpm add light-dark

# Or Yarn

yarn add light-dark

# Or Bun

bun add light-dark

```

Then you can use the `setupTheme` function for initial setup:

```js

setupTheme();

```

**This function must be only called once in a project. Multiple calls can cause unstable behavior.**

Then you can use the `getTheme` function to get the current theme in your application. It returns either `light` or `dark`.

```js

setupTheme();

const theme = getTheme();

console.log(theme); // light or dark

```

Or you can use the `setTheme` function to set the theme with a value. The value can be either `light` or `dark`.

```js

setupTheme();

const theme = getTheme();

console.log(theme); // let's assume light is logged

setTheme("dark");

const newTheme = getTheme();

console.log(newTheme); // dark

```

Or you can use the `toggleTheme` function to toggle the theme without any specified value. It toggles between `light` and `dark` values.

```js

setupTheme();

const theme = getTheme();

console.log(theme); // let's assume dark is logged

toggleTheme();

const newTheme = getTheme();

console.log(newTheme); // light

```

## License

This repository is licensed under the [MIT](./LICENSE) license.