# light-mode

> simple and flexible way to manage light and dark themes in web applications.

Latest version **1.0.1** (published 2024-02-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install light-mode
pnpm add light-mode
yarn add light-mode
bun add light-mode
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-02-06 |
| First published | 2024-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | VeiaG |
| Maintainers | veiag |
| Keywords | theme switcher, theme, color, ui, light mode, color scheme, media query, theming, dark mode |

## Links

- npm: https://www.npmjs.com/package/light-mode
- Repository: https://github.com/VeiaG/light-mode
- Homepage: https://github.com/VeiaG/light-mode#readme
- Issues: https://github.com/VeiaG/light-mode/issues
- npm.io page: https://npm.io/package/light-mode

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-02-06
- 1.0.0 — 2024-02-06

## README

# Simple LightMode
This library provides a simple and flexible way to manage light and dark themes in web applications. It offers a `LightMode` class that can be easily integrated into your project to enable dynamic theme switching based on user preferences or custom settings.
### Features
-   **Customizable**: Define custom theme names, target elements, and storage attributes to suit your application's needs.
-   **Automatic Detection**: Automatically detects the user's preferred color scheme based on their device settings.
-   **Persistent Storage**: Persists the selected theme mode across page reloads using local storage.
-   **Easy Integration**: Simply instantiate the `LightMode` class with optional configuration options to start managing themes effortlessly.
## Instalation
```
npm i light-mode
```
## Usage
**Initialization:** Create an instance of the `LightMode` class with optional configuration options.
```ts
// Initialize LightMode with default options
const lightMode = new LightMode();

// Initialize LightMode with custom options
const customOptions = {
    target: "#myElement",
    themeNames: { light: "day", dark: "night" },
    attribute: "data-custom-theme",
    startTheme: "light"
};
const lightModeWithCustomOptions = new LightMode(customOptions);
```
**Theme Switching**: Toggle or set the theme mode as needed.
```ts
// Toggle theme mode
lightMode.toggleTheme();

// Set theme mode
lightMode.theme = "dark";
```
**Custom options** :
|Parameter|default|Description|
|--|--|--| 
|`target`|`"html"`|Specifies the target element selector|
|`themeNames`|`{ light: "light" , dark: "dark"}`|Names of the light and dark themes that are set in data attributes.  |
|`attribute`|`"data-theme"`|Specifies the attribute used to store the theme.|
|`startTheme`|`"default"`|Specifies the initial theme mode.|


### Example
```ts
import LightMode from 'light-mode'

const  lightMode  =  new  LightMode();
const  buttons  =  document.querySelectorAll("button");
//toggling button
buttons[0].addEventListener("click",()=>{
	lightMode.toggleTheme();
});
//setting specific theme
buttons[1].addEventListener("click",()=>{
	lightMode.theme=  "light";
});
buttons[2].addEventListener("click",()=>{
	lightMode.theme  =  "dark";
});
buttons[3].addEventListener("click",()=>{
	lightMode.theme  =  "default";
});
```
## Documentation

#### `ThemeMode` Type

Defines the possible modes for the theme: `"light"`, `"dark"`, or `"default"`.

#### `ThemeOptions` Type

-   `target?: string`: Specifies the target element selector. Defaults to `"html"`.
-   `themeNames?: { light: string, dark: string }`:Names of the light and dark themes that are set in data attributes. Defaults to `"light"` and `"dark"` respectively.
-   `attribute?: string`: Specifies the attribute used to store the theme. Defaults to `"data-theme"`.
-   `startTheme?: ThemeMode`: Specifies the initial theme mode. Defaults to `"default"`.

#### `LightMode` Class

Represents a light mode theme manager.
##### Constructor

-   `constructor(options?: ThemeOptions)`: Initializes the `LightMode` instance with optional configuration options.

##### Methods

-   `toggleTheme()`: Toggles between light and dark theme modes.
-   `set theme(newMode: ThemeMode)`: Sets the theme mode.
-   `get theme(): ThemeMode`: Retrieves the current theme mode.

---
_Source: https://npm.io/package/light-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._