Trying to develop a dark mode: how to disable color theme at all?

Help / Discuss
1

Hi.

We try to create dark mode as a accessibility feature for our users. We are aware of all those css variables that could be used. But we are facing one problem. There are a lot of colors defined in the color theme although we didn’t define any of them.

We do have a ssx were we set those variables but variables set by the color theme do have a higher priority. And even if we don’t set them they seem to have some kind of default and keep the higher priority.

If I set on ssx

:root {
    --body-bg: red;
    --xwiki-page-content-bg: red;
}

And did not set both variables in the color theme both are styled white. If I set both variables in the color theme with blue, both are styled blue. My definitions in the ssx do not have an impact.

To create a dark, high contrast or low contrast mode I do have to use css which I best can serve with an ssx.

Is there a possibility to overwrite all variables set (explicit or by default) of a color theme?

Regards, Simpel

2

Try overwriting them directly in the color theme, in the Advanced lessCode property.

Hope it helps,
Alex

3

Tried it but it’s not that successful.

First of all if you set

@body-bg:blue;

in base colors section it will always overwrite the advanced section @lessCode

@body-bg:red;

It’s always blue. So make sure, you don’t set the variables in the original place.

Second you can’t work with variables like

@body-bg:var(--my-body-bg);

you defined in a ssx. That will lead to a very bad status where you nearly nothing can read as the whole styling is kind of exploding.

Third trying something in the advanced section @lessCode like:

@body-bg:red;
@media (prefers-color-scheme: dark) {
    @body-bg:green;
}

always show the bodies background in red. I guess it’s rendered on the server don’t knowing your preferred color scheme.

Some other ideas?