https://github.com/jakejarvis/dark-mode

🌓 Super simple CSS theme switching with saved preferences and automatic OS setting detection
https://github.com/jakejarvis/dark-mode

css dark-mode dark-theme frontend javascript npm

Last synced: 15 days ago
JSON representation

🌓 Super simple CSS theme switching with saved preferences and automatic OS setting detection

• Host: GitHub
• URL: https://github.com/jakejarvis/dark-mode
• Owner: jakejarvis
• License: mit
• Created: 2021-08-03T14:25:24.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-24T03:05:38.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T17:36:33.351Z (about 1 month ago)
• Topics: css, dark-mode, dark-theme, frontend, javascript, npm
• Language: HTML
• Homepage:
• Size: 323 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🌓 Dark Mode Switcheroo™

[![CI](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml)

[![npm](https://img.shields.io/npm/v/dark-mode-switcheroo)](https://www.npmjs.com/package/dark-mode-switcheroo)

Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and [only ~500 bytes gzipped!](https://bundlephobia.com/package/dark-mode-switcheroo)

- [View the example.](https://jakejarvis.github.io/dark-mode/)

- [Read the blog post.](https://jarv.is/notes/dark-mode/)

- [See it in action.](https://jarv.is/)

## Usage

### Options

`darkMode.init([...options])`

- **`toggle`**: The clickable [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) used to toggle between the two themes. (optional, default: `null`)

- **`classes`**: An object containing the `` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`)

- **`default`**: The initial `` class hard-coded into the HTML template. (optional, default: `"light"`)

- **`storageKey`**: Name of the `localStorage` key holding the user's preference. (optional, default: `"dark_mode_pref"`)

- **`onInit([toggle])`**: Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: `null`)

- **`onUserToggle([toggle])`**: Callback function executed when a user manually interacts with the toggle button. The toggle above (if set) is passed in. (optional, default: `null`)

- **`onChange([theme, toggle])`**: Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: `null`)

### Browser

```html

💡 Click to see the light... or not.

  window.darkMode.init({

    toggle: document.querySelector(".dark-mode-toggle"),

    classes: {

      light: "light",

      dark: "dark",

    },

    default: "light",

    storageKey: "dark_mode_pref",

    onInit: function (toggle) {

      toggle.style.visibility = "visible"; // toggle appears now that we know JS is enabled

    },

    onChange: function (theme, toggle) {

      console.log("Theme is now " + theme);

    },

  });

```

### Node

```bash

npm install dark-mode-switcheroo

# or...

yarn add dark-mode-switcheroo

```

#### Module via `import`

```js

import { init } from "dark-mode-switcheroo";

init({

  // ...same as browser.

});

```

#### CommonJS via `require()`

```js

const darkMode = require("dark-mode-switcheroo");

darkMode.init({

  // ...same as browser.

});

```

## To-Do

- [ ] Support more than two themes

- [ ] Better readme docs

- [x] Add callback function `onChange` (or `onToggle` etc.) passed in as an option

## License

MIT