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.
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.
@each $color, $value in $theme-colors {
$contrast-color: color-contrast($value);
$color-rgb: to-rgb($value);
.link-bg-#{$color} {
color: $contrast-color if($enable-important-utilities, !important, null);
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: if($contrast-color == $color-contrast-light,
shade-color($contrast-color, $link-shade-percentage),
tint-color($contrast-color, $link-shade-percentage))
if($enable-important-utilities, !important, null);
}
}
}
}