Anatole: Dark theme switching is buggy

[msfjarvis]

On mobile, switching themes results in a rather ugly transition as can be seen in this screenrecord. This behaviour is similar on desktop, where the sidebar with profile animates differently than the content causing weird transitions on first load in addition to theme switching.

I'd also suggest moving the theme switching JS to the head.html partial since it needs to load early to prevent white flashes on platforms where theme was manually toggled.

[lxndrblz]

Thanks. I didn't notice that before, but in your screencast, it looks quite ugly.
Simply moving the script, doesn't help. I suspect, the problem might be related to the animation itself.

[msfjarvis]

Thanks. I didn't notice that before, but in your screencast, it looks quite ugly.
Simply moving the script, doesn't help. I suspect, the problem might be related to the animation itself.

Yeah moving the script isn't the fix but avoids a separate class of problems where the theme switch doesn't happen early enough resulting in the site loading in light mode first.

[msfjarvis]

Can confirm this is fixed, though the background color has changed and is not consistent anymore between the rest of the page and the <code> tags

Screenshot

[lxndrblz]

Thanks for your feedback. I've reopened the issue so it doesn't get forgotten. I'll investigate that tomorrow. Should be a minor issue in the grand scheme of things and can probably be fixed by adjusting the css variables.

[msfjarvis]

Thanks for your feedback. I've reopened the issue so it doesn't get forgotten. I'll investigate that tomorrow. Should be a minor issue in the grand scheme of things and can probably be fixed by adjusting the css variables.

Would probably be worth bundling a syntax highlighting stylesheet (from hugo gen chromastyles) and adapting it with the CSS variables to ensure a consistent experience between dark and light theme.

[msfjarvis]

16 should resolve the color discrepancy

[geoffreywwang]

While it isn't the same bug, I've been having issues with the dark theme switching on Safari (everything works fine in Chrome). Here is a video of it. It also seems to happen on the example site on mobile Safari as well.

I can submit another issue if you would like.

[lxndrblz]

@geoffreywwang Would you mind submitting a separate issue as this discussion seems to mainly focus on the the code stylesheets? Thanks for the video. I'll try to get a hold of a Safari browser in order to be able resolve this.

[ehamiter]

I also noticed an issue if you have dark mode enabled, then click on a picture, the background turns white. I remedied this with the following, but didn't make a PR because it feels kinda hacky and there might be a more sensible way of fixing it:

// medium-zoom.js
// global variable above the initial function
var currentBackground = "#292a2d" ? (document.querySelector("html").getAttribute("data-theme") === "dark") : "#fff";

// then later on, referencing it in createOverlay():
overlay.style.background = currentBackground;

// as well as the two other places that set the background to "#fff" (L427 & L457):
background: currentBackground

[lxndrblz]

@ehamiter Thanks for pointing that out! I've moved your concern it in a separate issue to distinguish the individual issues we're facing.

[lxndrblz]

16 should resolve the color discrepancy

Actually I like the fact that the code blocks can be distinguished from the content itself in dark and light mode. In order to follow through on your idea of using chromastyles for correctly styling the code blocks I've opened up a separate issue. I go ahead and close this one, as there is nothing more directly related to the problem initially discussed.