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.

I'm visible in {{< mark >}}light mode{{< /mark >}} only
{.d-none-dark}

I'm visible in {{< mark >}}dark mode{{< /mark >}} only
{.d-none-light}

Accessibility  

Contrast is an important aspect of your site accessibility. The WCAG color contrast guidelines  recommends a minimum contrast ratio of 4.5:1 for most content elements. Defining a color scheme that has sufficient contrast in all color modes can be challenging. Hinode supports two attributes to enhance the contrast ratio of the primary color in dark mode.

The argument darkModeTint lightens the primary color with a given percentage, while darkModeShade darkens the primary background color. You can adjust these settings in the style section of the site parameters.

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%);
}