Custom css styling? Customizations don't show

[mageejp]

This is a phenomenal theme, and I'm really grateful for your work on this. I'm trying to modify the colors of the theme with no success. I have copied the relevant .scss files out of the starter theme into my child theme install's assets/scss/common folder. I added a custom font face to _custom.scss and that worked great. When I started adjusting color styling, though, none of the changes take effect.

_dark.scss: Tried redefining $link-color-dark to no avail--whether I change it to a hex value or $yellow doesn't matter. Inspector keeps showing that line 30 [data-dark-mode] body a calls the default light blue color. Even when I hard code a hex value into this line, it has no effect.

I have tried this on Doks 0.5 and 1.0.1, and the problem is the same on both. (I'll add that I also tried editing the starter theme 0.5 and also had no success.) I have made no other customizations to the theme yet. Any ideas what's going on? Why are edits to the scss files not overriding defaults?

[h-enk]

Thanks! You found a bug.

It doesn't work correctly because of the order of loading the Bootstrap files. I will add a _variables-custom.scss (needs early loading) next to _custom.scss (needs loading last).

Expect Doks 1.0.3 later today. I will let you know here

[h-enk]

Fixed — latest packages

Running npm create hyas@latest will ask you to install the latest version, and it will work out of the box.

Or, in an existing project:

• Run npm i @hyas/doks-core@latest
• Add assets/scss/common/_variables-custom.scss
• Update config/_default/module.toml:

  [[mounts]]
    source = "node_modules/@hyas/doks-core/assets"
    target = "assets"
    excludeFiles = ["scss/common/_variables-custom.scss", "scss/common/_custom.scss"]

[mageejp]

Cool, thanks for the update! Your directions for making changes in an existing project have not worked for me, but creating a new Doks theme instance via npm create hyas@latest allows me to change $link-color-dark successfully. However the results there are inconsistent: if I try to add a custom value for $primary (link color), I only see the change in one place: the scrolling links on the right sidebar on docs pages. All other links on the light theme are unchanged (default purple). Same goes for adding custom values for button color, or anything else from _variables.scss in _variables-custom.scss. Thoughts?

UPDATE: I can redefine many more css styles by reasserting variable definitions in _variables-custom.scss, for example:

$button-color-dark: $link-color-dark;
$color-btn-bg: $primary;

but others do not work as intended:

$color-btn-bg: #9e0000;

Light-theme links and buttons are affected, and I have been able to change their styling only by styling their identifiers/classes in _custom.scss...but I need to dig into that, because then those colors carry over into the dark theme, which is not good. Links seem to be styled by _reboot.scss.

So my main question right now is, what is a way for me to change link colors in the light theme that will play nicely with the dark/light toggle?

[h-enk]

Hmm, yeah that doesn't work nicely. I'll have to take a closer look. So far, my findings are in line with yours:

// Put your custom SCSS variables here

// Light mode
$primary: lime; // affects ToC links only, though `$link-color: $primary;`
$link-color: lime; // affects other links, except primary button variants

// Dark mode
$link-color-dark: yellow; // affect all links, except primary button variants
$button-color-dark: $link-color-dark; // affects primary button variants

I'll get back to you

[samubura]

Hi is there any update on this? What's the intended way to change colors of the template?