Minimal Automatic Dark Mode Library – Darkify

Category: Color , Javascript | January 25, 2024
Author:emrocode
Views Total:36 views
Official Page:Go to website
Last Update:January 25, 2024
License:MIT

Preview:

Minimal Automatic Dark Mode Library – Darkify

Description:

Darkify is a simple, lightweight JavaScript/TypeScript library for enabling automatic dark mode on your websites and web applications.

It uses the CSS prefers-color-scheme media query to check the user’s color scheme preference and automatically toggle between light and dark modes. You can also remember user preferences through local storage or session storage to make sure your returning visitors always be greeted with their preferred viewing experience.

How to use it:

1. Install and import the Darkify.

# NPM
$ npm i darkify-js
import Darkify from 'darkify-js'

2. Create a new Darkify instance and specify the element used to switch between dark and light modes.

<button type="button" id="toggle">
  Toggle Dark Mode
</button>
var darkMode = new Darkify('#toggle')

3. Write CSS styles for dark and light modes.

:root {
  --pmcolor: #f1f0f9;
  --sdcolor: #fefefe;
  --ttcolor: #2e2e2e;
  --qncolor: #f5f5f5;
}
:root:is([data-theme='dark']) {
  --pmcolor: #2e2e2e;
  --sdcolor: #3b3b3b;
  --ttcolor: #e2e2e2;
  --qncolor: #484848;
}
html,
body {
  font-size: 100%;
  color: var(--ttcolor);
  background-color: var(--pmcolor);
}
...

4. Possible options:

var darkMode = new Darkify('#toggle', {
    autoMatchTheme: true,
    useLocalStorage: true,
    useSessionStorage: false,
    useColorScheme: ['#ffffff', '#000000'],
})

Changelog:

v1.1.2 (01/25/2024)

  • Code optimization
  • Bug fixes

v1.1.1 (12/18/2023)

  • Code optimization
  • Added use color scheme option
  • Bug fixes

v1.1.0 (12/17/2023)

  • Minor changes
  • Bug fixes

v1.200 (10/30/2023)

  • Minor changes
  • Bug fixes

v1.100 (10/30/2023)

  • Code optimization
  • Bug fixes

You Might Be Interested In:


Leave a Reply