Mastering Dark Mode in 5 Minutes

Implementing dark mode used to be hard. You'd need separate CSS files or complex class switching logic. AtomAttr simplifies this with the dark- modifier. Just prefix any attribute with dark- to define what it should look like in dark mode.

The Basics

It starts with the `html` tag. If you add the class `dark` to your `html` tag, AtomAttr activates all `dark-` attributes. You can toggle this class using JavaScript.

Example Code

<div bg="white" dark-bg="slate-900" text="black" dark-text="white">
    <h1>Automatic Dark Mode</h1>
</div>

That's literally it. No configuration, no plugins. It just works.