Content outside markdown-style doesn't adapt to dark/light mode changes

[Regenhardt]

When the system changes from light mode to dark mode, the markdown-style element correctly switches style too.

The body itself though does not. Neither does the dark mode switch, nor the github corner (although the github corner still kinda works in dark mode like this).

I see the dark mode switcher already switches CSS variables on the body and those are used in the markdown-style element, so maybe the dark mode switcher could hook into the system event to trigger the same function there, switching everything between modes, then the markdown-style element doesn't need the hook itself (unless there's other CSS in there I haven't seen, I'm not a web dev😅).

[jaywcjlove]

@Regenhardt Follow the system to switch between light and dark themes?

[Regenhardt]

Yes the operating system or browser. If the browser is set to follow the OS, the website gets the theme change event when the device (I tried Windows and Android) changes theme. The markdown-style element hooks listens to the, the rest does not.

[Regenhardt]

I'd try to do that myself but I don't understand how those html strings in the ts files work, they look jumbled already.

[jaywcjlove]

@Regenhardt

$ markdown-to-html-cli --dark-mode auto
$ markdown-to-html-cli --dark-mode auto --markdown-style-theme dark
$ markdown-to-html-cli --no-dark-mode --markdown-style-theme dark
$ markdown-to-html-cli --markdown-style-theme dark

- name: Converts Markdown to HTML
  uses: jaywcjlove/markdown-to-html-cli@main
  with:
    source: README-zh.md
    output: coverage/action.html
    dark-mode: auto
    markdown-style-theme: dark
    markdown-style: "max-width: 1260px"
    github-corners: https://github.com/jaywcjlove/markdown-to-html-cli

[Regenhardt]

Here's an example. I made a simple page (with --dark-mode auto) and visited it in light mode:

Now I change my PC to dark mode:

and this happens:

As you can see, the content (<markdown-style>) switches theme, the rest does not.

[jaywcjlove]

$ markdown-to-html-cli --dark-mode auto --markdown-style-theme light --no-corners

@Regenhardt I used the above command to generate the page and found no problems.

[Regenhardt]

Ok so I did some tests and apparently this only happens when called from my custom domain (https://regenhardt.dev), but it works fine when called directly (https://regenhardt.gitlab.io). Any idea how that is possible? The custom domain literally routes to the same server as the gitlab.io domain.

[jaywcjlove]

@Regenhardt Both pages work fine on my computer. I guess it might be a browser cache issue.

[Regenhardt]

Even without caching this happens. But I found out so far it only happens if I use the custom domain and only in Firefox.
As far as I can see, the only difference in the html is that the dark-mode node has another attribute permanent="" when called via the custom domain in Firefox, but I can't figure out why. It's literally the same code. There's no error in the Firefox browser console either.

Do you have an idea what else I could check or try? I'm not sure where to go from here since the permanent attribute seems to come from some js/ts code somewhere, which is jumbled to me.

[jaywcjlove]

permanent for local storage, remembers the currently selected theme. With the --dark-mode auto option, no theme selection records will be stored. @Regenhardt

[Regenhardt]

Ok I found it: Firefox still had the theme saved in local storage, so I guess that triggered part of the website keeping the theme even after reloading with clear cache. After emptying local storage for the custom domain, it now also automatically changes as a whole. Thanks for the help!