Docs

Colors

Use Bootstrap’s color system to easily adjust your website’s colors.
Theme Colors   Adaptive Colors   Background Colors   Colored Contrasting Links   Generating Helper  

Theme Colors  

Hinode uses Bootstrap’s color system. You can adjust them in the /config/_default/params.toml file in the style section.

[style]
    primary = "#d43900"
    secondary = "#6c757d"
    success = "#198754"
    info = "#0dcaf0"
    warning = "#ffc107"
    danger = "#dc3545"
    light = "#f8f9fa"
    dark = "#212529"

In addition, the background colors black and white are available too. Below is an overview of the rendered colors.

primary
secondary
success
danger
warning
info
light
dark
white
black

Adaptive Colors  

Several components support background colors that are Color-Mode Aware . These colors respond to changes when the active theme is adjusted, such as by changing from a light theme to a dark theme. You can apply this color by adding bg-body or bg-body-tertiary to the class of an HTML element.

body
body-tertiary
markdown 
{{< card-group cols="2" padding="3" gutter="3" wrapper="my-4 p-4" class="border rounded-3" >}}
    {{< card class="bg-body" >}}body{{< /card >}}
    {{< card class="bg-body-tertiary" >}}body-tertiary{{< /card >}}
{{< /card-group >}}

Background Colors  

Components such as the Timeline support subtle background colors. These colors are also Adaptive . The following background colors are available.

bg-primary-subtle
bg-secondary-subtle
bg-success-subtle
bg-danger-subtle
bg-warning-subtle
bg-info-subtle
bg-light-subtle
bg-dark-subtle

Hinode defines additional classes to render links that contrast with their background. Simply add link-bg-<color> to the class of an a anchor element. The next example adds a link contrasting with the background color bg-success.

Success
markdown 
{{< link href="#!" class="link-bg-success bg-success p-1 rounded" >}}success{{< /link >}}

Below grid illustrates the contrasting colors for each background.

Generating Helper  

The SCSS generator for the colored links is defined in assets/scss/helpers/_colored-links.scss.

$custom-colors: (
    "primary": "light", 
    "secondary": "light", 
    "success": "light", 
    "danger": "light", 
    "dark": "light", 
    "black": "light",
    "info": "dark", 
    "warning": "dark", 
    "light": "dark", 
    "white": "dark",
    "body": "adaptive",
    "body-tertiary": "adaptive"
);

@each $color, $value in $custom-colors {
    $main-color: var(--bs-body-color);
    $emphasize-color: var(--bs-secondary-color);

    @if $value == "light" {
        $main-color: $white;
        $emphasize-color: shade-color($main-color, $link-shade-percentage);
    } @else if $value == "dark" {
        $main-color: $black;
        $emphasize-color: tint-color($main-color, $link-shade-percentage);
    }

    .link-bg-#{$color} {
        color: $main-color if($enable-important-utilities, !important, null); 

        &:hover,
        &:focus {
            color: $emphasize-color if($enable-important-utilities, !important, null);
        }
    }
}
On this page