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.
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 bg-body text-bg-white rounded-3 border">body</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-body-tertiary text-bg-white rounded-3 border">body-tertiary</div>
</div>
</div>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.
<div class="col-md-2">
<div class="p-3 mb-3 bg-success rounded-3 text-center"><a class="link-bg-success" href="#!">Success</a></div>
</div>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);
}
}
}