As @pavelkornev points out in #3866 (comment) this only works on my Mac if the system appearance is set to Dark. If it is set to Light, or set to Auto and is currently Light, then the switch doesn't work.

@ralfhandl Oh yes... I had encapsulated the code under the prefers-color-scheme which was running only on dark mode. Fixed in 973999a

Still doesn't work if system is in Light mode:

and

Background stays white, only text colors change.

On MacOS only works if system is in dark mode.

@ralfhandl That's weird.. I am not getting the same results as you. I am testing it on a MacOS and it perfectly works with both Chrome and Safari. Could it be a browser setting? I will further look into it.

@ralfhandl I have managed to reproduce it with Firefox. The problem is that respec adds this link

<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://www.w3.org/StyleSheets/TR/2021/dark.css">

Once again, due to the (prefers-color-scheme: dark) it doesn't work correctly. For this reason, i have copied/pasted the changes from the file into our main.css here: e25d753

Although, this seems to be fixing the issue it still loads unnecessarily the dark.css. Would it be ok if I changed the build.shto parse the output and remove it? Or are we ok with the extra request?

Note: I will fix the tests after we agree on the solution.

i have copied/pasted the changes from the file into our main.css

Is that necessary? I'd prefer to keep our CSS as slim as possible.

Would it be ok if I changed the build.shto parse the output and remove it?

Why not, if that works better?

@swaldron58 can you check if our theme fits this?

Is that necessary? I'd prefer to keep our CSS as slim as possible.

@ralfhandl I think so. The implementation depends on how Respec handles dark mode, which is by adding the darkmode class in the body tag. Since we apply the styling based on this class and not by checking the preferred mode the media="(prefers-color-scheme: dark)" becomes an obstacle.

Why not, if that works better?

@ralfhandl I have changed the build.sh in this commit and its tests here.

UPDATE:
It seems that we cannot stop the loading of the dark.css without changing quite a few things. The problem arises from the fixup.js which handles the dark mode toggle:

  /* Dark mode toggle */
  const darkCss = document.querySelector('link[rel~="stylesheet"][href^="https://www.w3.org/StyleSheets/TR/2021/dark"]');
  if (darkCss) {
    const colorScheme = localStorage.getItem("tr-theme") || "auto";
    const browserDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = colorScheme === "auto" ? (browserDarkMode ? "dark" : "light") : colorScheme;

    darkCss.disabled = theme === "light";
    darkCss.media = theme === "dark" ? "(prefers-color-scheme: dark)" : "";

Since the code runs only when the stylesheet exist, the dark mode toggle does not appear. To bypass this we would need to add our own javascript to replicate this behavior.