Live theme changes

[RumovZ]

This takes care of theme changes inside Qt so far.
I'm uncertain how to proceed with the webviews. What exactly did you mean by "older pages might work with .nightMode?.", @dae? The two options I can think of are either reloading the entire standard HTML or switching to night mode sensitive CSS and only toggling the class of the doc element.
As for the new pages, just a little reminder about the dsiscussion in #1471, @hgiesel. 🙂

[RumovZ]

Oh, and one other thing: The background of the main window's menu bar's menus remain white when switching to night mode and I don't know why. If anyone had an idea why that might be, I'd appreciate it.

[dae]

Thanks Rumo! I've pushed some fixes and further updates, and it seems to be in a workable state now. We'll want to update the rest of the nightModeKey contexts and check to see if anything has been missed, but let's first wait to see how the discussion on #1471 pans out

The menu issue was because of the QMenuBar styling we were only applying in day mode. Similar issues may appear in other cases where we only set styling for night mode, such as the scrollbar styling - we may need to apply different colours in day mode to work around it.

[dae]

Hmm, how about rootTheme?

/// The current theme that applies to this document/shadow root. When
/// previewing cards in the card layout screen, this may not match the
/// theme Anki is using in its UI.
export const rootTheme = readable(getThemeFromRoot(), (set) => {

I started to rename things to pageTheme, but realised a nice property of documentTheme/rootTheme is that they sort of indicate where they are being set. If you're not so fond of rootTheme, happy for me to go with documentTheme instead?

Naming things is hard 😅

[hgiesel]

My agenda with pageTheme is that if we used an iframe at some point, the CSS would still be isolated from variables set at document.documentElement, even though the iframe also have a Document at their root. So they would need their own rootTheme or frameTheme, etc. At the same time I read this on MDN:

The Document interface represents any web page loaded in the browser [...]

If we think of Anki as a web app to be, we could also name it appTheme (so many options ^^;)

Once we are going to use themes for any iframes or shadow roots, they will need their own individual stores. For example for shadow roots, they don't have a documentElement, but rather a shadowRoot.host, where we'd set the class or attribute. I think for those, we'd just export a constructor from lib/theme, and put the theme store on the component tree (think editor.editorFields[2].editingArea.rootTheme)

[dae]

Ok, I'll go with pageTheme for now so we can move forward with this - we can always change it again before the stable release if necessary. Assuming @RumovZ is interested, are you happy for him to proceed with updating the remaining nightModeKey references to use pageTheme instead, like in c216353? Once that's done, I presume this will be ok to merge - if there's something else we've overlooked, please let us know.

[dae]

@hgiesel gentle ping in case you missed this

[hgiesel]

I didn't catch the question for me, sorry ^^; Sure, he can go ahead. It think .isDark can fully fill the role of the old nightMode.

[RumovZ]

I'll take care of it. Thanks, the two of you!

[RumovZ]

I had to format manually. Am I doing anything wrong? That's how I understand the docs, but apparently it doesn't work:

[dae]

Does the latest main commit fix it?

Thanks for your work on this Rumo, I imagine there'll be quite a few users happy to see this land!

[RumovZ]

Does the latest main commit fix it?

Yes, thank you. 🙂

Glad I could help!