Customization

Dark Mode

Perfect UI follows the operating system by default. There is nothing to configure and nothing to import.

On this page

Colors are declared with light-dark(), and the browser resolves them.

The switch

An explicit choice is a single attribute on <html>:

<html data-pui-mode="dark">
  <!-- ... -->
</html>
ValueResult
lightalways light
darkalways dark
no attributefollows the system

Switching from JavaScript

import { setMode, getMode } from "@chrissgon/perfectui/mode";

setMode("dark"); // sets the attribute and remembers the choice
setMode("light");
setMode(); // clears both, back to the system preference

getMode(); // "system" | "light" | "dark"

setMode persists the choice in a cookie named pui-mode, not in localStorage. A cookie travels with the request, which is what lets a server render the right mode on the first paint.

Avoiding the flash

If the page is rendered by a server, read the cookie and render the attribute:

// any server framework
const mode = cookies.get("pui-mode"); // "light" | "dark" | undefined

<html data-pui-mode="{{ mode }}"></html>

For a static site, put this in the <head> before the stylesheet:

<script>
  (function (m) {
    if (m) document.documentElement.setAttribute("data-pui-mode", m[1]);
  })(document.cookie.match(/(?:^|; )pui-mode=(light|dark)/));
</script>