Core Concepts

Dark theme

Change styles when using a dark theme.

Overview

With dark mode now being natively supported by most operating systems, it’s increasingly expected that your web apps offer a dark-themed version alongside the default appearance.

To simplify this process, Sfumato comes with a dark variant option, allowing you to customize your site’s appearance specifically for users who prefer dark mode.

<div class="w-fit mx-auto grid grid-cols-2 gap-x-4 text-center">
    <span class="bg-fuchsia-700 dark:bg-sky-700 text-white rounded-md px-5 py-2"><span light="Fuchsia" dark="Sky" class="after:content-[attr(light)] dark:after:content-[attr(dark)]"></span></span>
    <span class="bg-sky-700 dark:bg-fuchsia-700 text-white rounded-md px-5 py-2"><span light="Sky" dark="Fuchsia" class="after:content-[attr(light)] dark:after:content-[attr(dark)]"></span></span>
</div>

Try the theme switcher widget above and watch how the buttons appear to switch positions as the color and text change based on the dark/light theme.

Configuring theme modes

There are two Sfumato theme modes: system, and classes. You can configure this in your CSS file:

@layer sfumato {
    :root {
        ...
        --use-dark-theme-classes: true;
        ...
    }
    ...
}

When setting --use-dark-theme-classes: true Sfumato will generate classes that allow you to switch between normal, dark, and auto themes, where auto will switch based on the device (system) setting. These are placed on the <html> element and control the entire experience, or on separate elements to control components.

The theme class names are theme-dark and theme-auto and need to placed on the <html> or other containing elements:

<html class="theme-dark">
    <script>
        const html = document.documentElement;
        function setTheme(theme) {
            html.classList.Remove(`theme-auto`);
            html.classList.Remove(`theme-light`);
            html.classList.Remove(`theme-dark`);
            html.classList.add(theme);
        }
    </script>
    <body>
        <p><a onclick="setTheme(`theme-auto`);">System theme</a></p>
        <p><a onclick="setTheme(`theme-light`);">Light theme</a></p>
        <p><a onclick="setTheme(`theme-dark`);">Dark theme</a></p>
    </body>
</html>

When setting --use-dark-theme-classes: false Sfumato will only switch to dark theme styles based on the device (system). This will happen automatically so no theme classes need to be put in your markup.

Custom dark theme trigger

You can override the built-in dark variant with your own, like the one below that will cause dark theme styles to be triggered when the class dark is on an element or one of its ancestors:

@layer sfumato {
    ...
    @custom-variant dark (&:where(.dark, .dark *));
}

Likewise, you could override the dark mode variant with one that uses a data attribute:

@layer sfumato {
    ...
    @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
}

Responsive design

Colors

Core Concepts

Dark theme

Overview

Configuring theme modes

Custom dark theme trigger

Sfumato

Community