Light/dark theme global colors

[striata]

Can the value of the global colors be made dependent on the color-scheme preference of the browser?

For example, in CSS, I can write
:root { color-scheme: light dark; --bgColor: light-dark(#fafafa, #171717); }
With this, the background color var(--bgColor) will depend on the preferred color scheme of the browser.

Global colors in cornerstone are defined by JSON statements like

{
“title”: “Background”,
“value”: “#fafafa”,
“_id”: “bgColor”
},

Can the “value” here be made dependent on the preferred color scheme of the browser, similar to CSS?

What actually DOES work is this definition: "value" = "var(--bgColor)". But this means that the actual color definition is in CSS, not in the global colors. And furthermore, the swatch in the color palette does not show the color with this “var” definition, even though the element on the page (and in the cornerstone preview) does show the correct color.

[tristup]

Hi @striata,

Thanks for reaching out.
You can make global CSS color values respond to the preferred color scheme ( light or dark mode ) set in their browser. You need to use the prefers-color-scheme media query in CSS.
In the CSS, you can define

:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212;
        --text-color: #ffffff;
    }
}

And you can implement it like the following, so based on the preferred color scheme, the body background change :

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started with custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes, which means we can’t fix it in case it conflicts with something on your site, nor will we enhance it. Further customization should be directed to a third-party developer, or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[striata]

Thank you, @tristup. That was not my question. I know how to do it in CSS. My question was if a dark/light theme dependent color assignment can be done directly within the global colors JSON.

[tristup]

Hi @striata,

Not sure if that can be done, will check with our development team and get back to you on this.

Thanks

[charlie]

We have to update something on our end to support light-dark. There’s a weird bug on our end, but I’m taking a look right now. At the very worse we’ll release it in 6.8 so we can get more users to test the changes I’ll need to make.
I do still envision us doing something different for light and dark color. More like our gradient builder, but for picking light and dark colors. That’ll take some time though.

Have a great weekend.