Color modes

Add light mode and dark mode support to your website.

Color modes

Hinode supports color modes, or themes, as introduced by Bootstrap v5.3.0. By default, the site is rendered in light mode. If dark mode is enabled, a toggler is added to the main navigation. The toggler enables switching between modes, or can be set to auto. In the latter mode, the site uses the mode as preferred by the device. Hinode uses data attributes to toggle the site’s color mode. Visit the Bootstrap documentation for more information. You can enable of disable the support for dark mode in the extended layout configuration.

Display property

Hinode defines two classes to simplify the development of color-mode aware websites. Simply add d-none-dark as class attribute to block the display of an element in dark mode. Vice versa, use d-none-light to block the content from rendering in light mode. The following example illustrates this behavior. Toggle the color mode of the current website to test the behavior.

<div class="d-none-dark">I'm visible in <mark>light mode</mark> only</div>
<div class="d-none-light">I'm visible in <mark>dark mode</mark> only</div>

Sass

The helper color-mode is available to simplify the development of color-mode aware stylesheets. The following example defines a default background gradient for the colors white and the primary theme color. If $enable-dark-mode is enabled (see extended layout configuration), the helper color-mode inserts an alternative gradient that is applicable to dark mode.

.gradient-featured {
    background: $white;
    background: linear-gradient(135deg, $white 0%, tint-color($primary, 80%) 100%);
}

@if $enable-dark-mode {
    @include color-mode(dark) {
        .gradient-featured {
            background: $gray-900;
            background: linear-gradient(135deg, $gray-900 0%, shade-color($primary, 60%) 100%);
        }
    }
}

The final CSS generated by Hinode looks like this:

.gradient-featured {
    background: #fff;
    background: linear-gradient(135deg, #fff 0%, #f6d7cc 100%);
}

[data-bs-theme="dark"] .gradient-featured {
    background: #212529;
    background: linear-gradient(135deg, #212529 0%, #551700 100%);
}