Dark Mode - Dapper UI

Control Dark Mode

The dark mode is controlled by toggling the d4r-dark class. To apply and remember the user's preference, you can add the following script to the <head> of your page:

<script>
    if (typeof window !== 'undefined') {
        if (
            localStorage['d4r-theme'] === 'dark' ||
            (!('d4r-theme' in localStorage) &&
                window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            document.documentElement.classList.add('d4r-dark');
        } else {
            document.documentElement.classList.remove('d4r-dark');
        }
    }
</script>

You can then toggle the dark mode by adding or removing the d4r-dark class and storing the user's preference in localStorage:

// Enable light mode
localStorage['d4r-theme'] = 'light'
document.documentElement.classList.remove('d4r-dark');

// Enable dark mode
localStorage['d4r-theme'] = 'dark'
document.documentElement.classList.add('d4r-dark');

Dark Color Sheme

By default, Dapper UI uses the following color scheme for dark mode:

100

200

300

400

500

600

700

800

900

Apply colors

For your main background color in dark mode, we recommend using the 700 shade. You can apply a background to your elements using the following utility CSS classes: d4r-bg-dark-[shade] and d4r-bg-neutral-[shade], where [shade] is a value from 50 to 900 (e.g. d4r-bg-dark-50). To apply the background color only in dark mode, prefix the class with "dark:" (e.g. dark:d4r-bg-dark-50).

<div
    class="d4r-bg-neutral-200 dark:d4r-bg-dark-700"
/>

<style>
    div {
        width: 64px;
        height: 64px;
    }
</style>

If you prefer not to use utility classes, you can access the dark mode colors (and any other colors) using the --d4r-color-dark-[shade] CSS variable. The color is in the format "R G B" and can be used as follows:

<div />

<style>
    div {
        width: 64px;
        height: 64px;
        background-color: rgb(var(--d4r-color-dark-700));
    }
    :global(.d4r-dark) div {
        background-color: rgb(var(--d4r-color-neutral-200));
    }
</style>

Text

For text, we recommend using the Text component, which automatically adjusts the text color based on whether dark mode is enabled or not.