Light/dark theme global colors

Support
#1

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.

1 Like
#2

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