Different color sets for dark and light modes?

[Aman-Aalam]

Hi Team,

I am using the params.toml settings to specify colour configurations, as the documentation mentions here: https://gethinode.com/docs/configuration/colors/

Is there a way to configure different colour sets separately for dark and light modes?

The colours I need to use are too close to the default mode colours, and I want to use different colour combinations for them.

Thanks in advance!

[markdumay]

Hinode supports Bootstrap's color modes. I'd suggest to modify the dark variables in the SCSS file(s) as needed. You can copy the file assets/scss/common/_variables-dark.scss to your own repository. This file will then take precedence. Within the stylesheet, you can override the different colors as needed.

For example, the next adjustment assigns the color yellow to the --bs-primary variable in dark mode (#{$prefix} is a variable that defaults to bs):

@if $enable-dark-mode {
    @include color-mode(dark) {
        --#{$prefix}primary: yellow;
    }
}

The result looks like this:

You can check the various color variables in the Bootstrap docs. The Sass stylesheets use a mix of compiled variables (such as $primary) and dynamic (CSS) variables (such as --bs-primary). It can be challenging to get all the colors to your liking, especially considering background styles, borders, and component-specific styling. It is all fully customizable, but telling from experience, it can be tedious to get right.

[Aman-Aalam]

Thanks, this was very helpful, I was able to get to where I wanted.