how to use the text-color helper ?

[JOduMonT]

bug

What happened: when I define a dark color for the section copyright the helper text-color don't seams to understand my color is dark and so the text still dark too.

I look a little bit around for related issues/PR and I found

• https://github.com/okkur/syna/issues/415
• https://github.com/okkur/syna/blob/master/layouts/partials/helpers/text-color.html

What you expected to happen: I was expecting the helper would understand my background color and switch my text color to white/light.

How to reproduce it (as minimally and precisely as possible):

my ./config.toml

  [params.colors]
    primary = "#122931"
    secondary = "#79919b"
    success = "#85b253"
    info = "#a0bac4"
    warning = "#ffc95b"
    danger = "#be4a00"
    light = "#f3feff"
    dark = "#343a40"

my ./content/_global/copyright.md

+++
fragment = "copyright"
weight = 1250
background = "primary"
+++

Anything else we need to know?:

While my expectation is more me being able to control the text color such as we are able to do with the background, such as in ./content/_global/copyright.md I would expect to be able to define the text_color such as:

+++
fragment = "copyright"
text_color = "light"
+++

Environment:

• Syna Theme version: v0.17.0
• Hugo version: hugo_extended_0.71.0_Linux-64bit.deb

[stp-ip]

The text-color helper isn't that advanced. It doesn't check the specific color, but uses the notion of dark or light to set the text-color.

Overall the color scheme assumes it is in the same lighting range so making the dark a light color will break a few things.

Happy to discuss what you were expecting and maybe how we could solve this.

cc. @mpourismaiel additional thoughts?

[mpourismaiel]

As @stp-ip said, the helper isn't advanced and it's made with our default color scheme in mind. If your color scheme is not in our light range, we recommend overriding the helper with your own version but also keeping an eye on future changes to the helper. Please keep in mind that overriding Hugo partials (our fragments and helpers) is a valid approach to using the theme but might result in unexpected behavior since we use helpers in most of our fragments. You can build the repository and check /dev pages to see what the result will be. Checking every page of your website after overriding helpers and fragments is recommended.

We assume "white" "light" "secondary" "primary" colors (https://github.com/okkur/syna/blob/master/layouts/partials/helpers/text-color.html#L4) to be light colors and the "black" color to be, well, black (or at least a dark color) so the contrast would be stay in a valid range.

As to allowing for changing text color, it's a really good idea. But in creating default fragments we have to keep the customization as simple as possible. We will however discuss whether adding the additional configuration option would make it more complex or not.

[stp-ip]

Specific text-colors could also always be overwritten by injecting a custom CSS on top. So that way the customization of specific aspects is less likely to break as the layouts don't change as often as internal helper functions might.

[JOduMonT]

making the dark a light color will break a few things.

maybe we should define what is a light color ;) because for me #343a40 is dark even colorhexa call it: Very dark grayish blue

anyway if I were able to define the text color into the fragment it would be awesome such as in my ./content/_global/copyright.md

+++
fragment = "copyright"
weight = 1250
background = "dark"
text_color = "light"
+++

or better

+++
fragment = "copyright"
weight = 1250
background = "#343a40"
text_color = "#f2f2f2"
+++

[JOduMonT]

text-colors could also always be overwritten by injecting a custom CSS on top

since I don't really understand how to inject css an example would be appreciate

[JOduMonT]

my issue is probably very limited because if I play with #85b253 vs #5d882d for params.colors success text-color helper switch the font of the button from black to white

[JOduMonT]

i'm confused; when I change the primary color

[params.colors]
    primary = "#1a819d"

the background button and the background of copyright change color but only the button font become white

[JOduMonT]

also for the hero fragment if I change the background for = "dark" the title font stay dark but the subtitle text switch to light

[JOduMonT]

I restart from scratch my project today with version = "0.17.1" not sure what was the issue but now it's working, :)

[JOduMonT]

today I experienced something similar with Syna version = "0.17.2"

my color are:

  [params.colors]
    primary =   "#122931"
    secondary = "#6c9313"
    success = "#99b147"
    info = "#cbd766"
    warning = "#ffd300"
    danger = "#ff6600"
    light = "#f2f2f2"
    dark = "#122931"

in footer.md

if I define background = "primary" the background become blue dark as expected but the font remain also blue dark

while if I define background = "dark"
the background become blue dark as expected and the font become light

@stp-ip basically I just want to understand if it's a normal behavior and I/we should not use primary as background color ;)

[stp-ip]

We can't detect the colors and especially their darkness and therefore use the darkness levels from the default bootstrap colors as indicator. Meaning this is a bit more hardcoded than one might expect. Primary should not be used with a dark color. You can circumvent this by using dark as your basically primary color instead. Aka keep the darkness level for each color similar and then use dark within setting the background. So yes that is unfortunately intentional or at least hard to fix.