# Colors

Use Bootstrap's color system to easily adjust your website's colors.

## Theme colors

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

```toml
[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](color-modes). 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.

```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](timeline) support *subtle* background colors. These colors are also [adaptive](#adaptive-colors). 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

## Colored contrasting links

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`.

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

Below grid illustrates the contrasting colors for each background.

    {{< link href="#!" class="link-bg-primary" >}}primary{{< /link >}}

    {{< link href="#!" class="link-bg-secondary" >}}secondary{{< /link >}}

    {{< link href="#!" class="link-bg-success" >}}success{{< /link >}}

    {{< link href="#!" class="link-bg-danger" >}}danger{{< /link >}}

    {{< link href="#!" class="link-bg-warning" >}}warning{{< /link >}}

    {{< link href="#!" class="link-bg-info" >}}info{{< /link >}}

    {{< link href="#!" class="link-bg-light" >}}light{{< /link >}}

    {{< link href="#!" class="link-bg-dark" >}}dark{{< /link >}}

    {{< link href="#!" class="link-bg-white" >}}white{{< /link >}}

    {{< link href="#!" class="link-bg-black" >}}black{{< /link >}}

    {{< link href="#!" class="link-bg-body" >}}body{{< /link >}}

    {{< link href="#!" class="link-bg-body-tertiary" >}}body-tertiary{{< /link >}}

## Generating helper

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

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