Dark mode

It's never been easier

It's effortless to switch to Dark Mode in Dashly. You can either enable Dark Mode by default or create a Dark/Light/Auto switch. For information on how to set the default mode "Dark" or "Auto", please see the configuration page.

Try the theme switcher in the header, or the "Customize" button on the demo site. If you switch to auto mode, Dashly will switch to the Operating System's defined mode.
To be able to use dark or auto mode in Dashly, make sure that you have the following attribute in the html tag. It's added by default ;)

<html data-theme="{{theme}}">
    ...
</html>

Theme switcher

The theme switcher will change the data-theme value on the page, which will use "Dark mode" CSS. As Dashly uses CSS variables, you don't need to worry about extra CSS, everything is handled within our theme CSS file without code duplication.

<html data-theme="{{theme}}">
    <head>
        {{> scripts/script-theme-switcher}}
    </head>

    <body>
        // Place the theme-switcher somewhere on the page
        <div class="dropdown themeSwitcher">
            <a href="javascript: void(0);" class="dropdown-toggle no-arrow d-flex align-items-center justify-content-center bg-dark rounded-circle shadow-sm w-40px h-40px link-secondary" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-offset="0,0">
                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>light-mode-sunny</title><circle cx="12" cy="12" r="3.75"/><path d="M6.25,12a1,1,0,0,0-1-1H1a1,1,0,0,0,0,2H5.25A1,1,0,0,0,6.25,12Z"/><path d="M6.793,8.207A1,1,0,0,0,8.207,6.793l-1.5-1.5A1,1,0,0,0,5.293,6.707Z"/><path d="M12,17.75a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V18.75A1,1,0,0,0,12,17.75Z"/><path d="M6.793,15.793l-1.5,1.5a1,1,0,0,0,1.414,1.414l1.5-1.5a1,1,0,0,0-1.414-1.414Z"/><path d="M23,11H18.75a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M17.207,15.793a1,1,0,0,0-1.414,1.414l1.5,1.5a1,1,0,0,0,1.414-1.414Z"/><path d="M12,6.25a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V5.25A1,1,0,0,0,12,6.25Z"/><path d="M17.207,8.207l1.5-1.5a1,1,0,1,0-1.414-1.414l-1.5,1.5a1,1,0,0,0,1.414,1.414Z"/></svg>
            </a>

            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <button type="button" class="dropdown-item active" data-theme-value="light">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="me-2" height="18" width="18"><g><path d="M12,4.64A7.36,7.36,0,1,0,19.36,12,7.37,7.37,0,0,0,12,4.64Zm0,12.72A5.36,5.36,0,1,1,17.36,12,5.37,5.37,0,0,1,12,17.36Z" style="fill: currentColor"/><path d="M12,3.47a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V2.47A1,1,0,0,0,12,3.47Z" style="fill: currentColor"/><path d="M4.55,6a1,1,0,0,0,.71.29A1,1,0,0,0,6,6,1,1,0,0,0,6,4.55l-1-1A1,1,0,0,0,3.51,4.93Z" style="fill: currentColor"/><path d="M2.47,11H1a1,1,0,0,0,0,2H2.47a1,1,0,1,0,0-2Z" style="fill: currentColor"/><path d="M4.55,18l-1,1a1,1,0,0,0,0,1.42,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l1-1A1,1,0,0,0,4.55,18Z" style="fill: currentColor"/><path d="M12,20.53a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V21.53A1,1,0,0,0,12,20.53Z" style="fill: currentColor"/><path d="M19.45,18A1,1,0,0,0,18,19.45l1,1a1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.42Z" style="fill: currentColor"/><path d="M23,11H21.53a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z" style="fill: currentColor"/><path d="M18.74,6.26A1,1,0,0,0,19.45,6l1-1a1,1,0,1,0-1.42-1.42l-1,1A1,1,0,0,0,18,6,1,1,0,0,0,18.74,6.26Z" style="fill: currentColor"/></g></svg>
                        Light mode
                    </button>
                </li>
                <li>
                    <button type="button" class="dropdown-item" data-theme-value="dark">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="me-2" height="18" width="18"><path d="M19.57,23.34a1,1,0,0,0,0-1.9,9.94,9.94,0,0,1,0-18.88,1,1,0,0,0,.68-.94,1,1,0,0,0-.68-.95A11.58,11.58,0,0,0,8.88,2.18,12.33,12.33,0,0,0,3.75,12a12.31,12.31,0,0,0,5.11,9.79A11.49,11.49,0,0,0,15.61,24,12.55,12.55,0,0,0,19.57,23.34ZM10,20.17A10.29,10.29,0,0,1,5.75,12a10.32,10.32,0,0,1,4.3-8.19A9.34,9.34,0,0,1,15.59,2a.17.17,0,0,1,.17.13.18.18,0,0,1-.07.2,11.94,11.94,0,0,0-.18,19.21.25.25,0,0,1-.16.45A9.5,9.5,0,0,1,10,20.17Z" style="fill: currentColor"/></svg>
                        Dark mode
                    </button>
                </li>
                <li>
                    <button type="button" class="dropdown-item" data-theme-value="auto">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="me-2" height="18" width="18"><path d="M24,12a1,1,0,0,0-1-1H19.09a.51.51,0,0,1-.49-.4,6.83,6.83,0,0,0-.94-2.28.5.5,0,0,1,.06-.63l2.77-2.76a1,1,0,1,0-1.42-1.42L16.31,6.28a.5.5,0,0,1-.63.06A6.83,6.83,0,0,0,13.4,5.4a.5.5,0,0,1-.4-.49V1a1,1,0,0,0-2,0V4.91a.51.51,0,0,1-.4.49,6.83,6.83,0,0,0-2.28.94.5.5,0,0,1-.63-.06L4.93,3.51A1,1,0,0,0,3.51,4.93L6.28,7.69a.5.5,0,0,1,.06.63A6.83,6.83,0,0,0,5.4,10.6a.5.5,0,0,1-.49.4H1a1,1,0,0,0,0,2H4.91a.51.51,0,0,1,.49.4,6.83,6.83,0,0,0,.94,2.28.5.5,0,0,1-.06.63L3.51,19.07a1,1,0,1,0,1.42,1.42l2.76-2.77a.5.5,0,0,1,.63-.06,6.83,6.83,0,0,0,2.28.94.5.5,0,0,1,.4.49V23a1,1,0,0,0,2,0V19.09a.51.51,0,0,1,.4-.49,6.83,6.83,0,0,0,2.28-.94.5.5,0,0,1,.63.06l2.76,2.77a1,1,0,1,0,1.42-1.42l-2.77-2.76a.5.5,0,0,1-.06-.63,6.83,6.83,0,0,0,.94-2.28.5.5,0,0,1,.49-.4H23A1,1,0,0,0,24,12Zm-8.74,2.5A5.76,5.76,0,0,1,9.5,8.74a5.66,5.66,0,0,1,.16-1.31A.49.49,0,0,1,10,7.07a5.36,5.36,0,0,1,1.8-.31,5.47,5.47,0,0,1,5.46,5.46,5.36,5.36,0,0,1-.31,1.8.49.49,0,0,1-.35.32A5.53,5.53,0,0,1,15.26,14.5Z" style="fill: currentColor"/></svg>
                        Auto
                    </button>
                </li>
            </ul>
        </div>
    </body>
</html>