Colors
Use Bootstrap's color system to easily adjust your website's 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.
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.
{{< card-group cols="2" padding="3" gutter="3" wrapper="my-4 p-4" class="border rounded-3" >}}
{{< card class="bg-body text-bg-white" >}}body{{< /card >}}
{{< card class="bg-body-tertiary text-bg-white" >}}body-tertiary{{< /card >}}
{{< /card-group >}}
Components such as the timeline support subtle background colors. These colors are also adaptive. The following background colors are available.
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 constrasting with the background color bg-success
.
{{< card class="col-md-2 rounded-3 text-center" color="success" >}}{{< link href="#!" class="link-bg-success" >}}success{{< /link >}}{{< /card >}}
Below grid illustrates the contrasting colors for each background.
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);
}
}
}