Drac Jr.

An itty bitty web design tool for handling dark mode the right way

• Absolutely no bloat
• 100% vanilla
• Checks user light/dark preference at OS/browser level
• Automatically saves preference for future visits
• No opinionated button/switch element - set onClick={toggleDark} wherever you want
• No smoke and mirrors - set actual dark mode values in css via the [data-theme=dark] data attribute selector
• No blend-mode voodoo - keep all resultant colours completely predictable and explicitly defined

Quick install:

npm install drac-jr

...or just copy `dist/drac-jr.js'

If you're using React, Node etc. then the src version is totally fine. Otherwise the dist version should be solid.

How to use:

0. import dracJr

import dracJr, { toggleDark } from "drac-jr"

1. Run dracJr() somewhere sensible

App = () => {
    dracJr()
    
    return ...

...or for simple/vanilla browser setups:

dracJr() runs an initial check to see whether the user has previously saved a preference with you. ...if not, the (prefers-color-scheme: dark) query is checked and OS/browser level preference applied

2. Add a light/dark toggle

<button onClick={toggleDark}>Lights out</button>

...or for simple/vanilla browser setups: Lights out Every time a toggle is triggered, preference is saved via localStorage.setItem()

3. Apply your dark styles

[data-theme=dark] body {
    background-color: #424242;
}

...or if you really want to do things the right way:

--text: black;
--background: white;
--dark-text: white;
--dark-background: black;

[data-theme="dark] {
    --text: var(--dark-text);
    --background: var(--dark-background);
}

body {
    color: var(--text);
    background-color: var(--background);
}