[App Loader] Add dark mode support

[RKBoss6]

This adds support for dark mode to the app loader, helping blend into native ui, especially on phones, and making the site feel more fresh and modern. This PR is in conjunction with AppLoaderCore #84

This PR currently has different commits to make the index.js changes from testing appear in-site for my app loader, when everyone's happy with this, I'll make a new, final PR to get this in.
Check it out on my personal app loader!
I've tested this in safari and chrome, but not in firefox or gadgetbridge web view. Testing on those would be appreciated, as I'm not 100% positive that the dark mode will work on all those browsers.
Todo:

• Add dark mode support for site
• Add setting to choose device, light or dark
• Save setting for future use
• Update device chooser to use theming (make device favicons transparent)

Screenshots:

[bobrippling]

Very cool! Shall leave to @gfwilliams to have the final review (I think you already know but he's on holiday so might be a little while)

[Copilot]

Pull request overview

This PR adds comprehensive dark mode support to the app loader, including a user-configurable theme setting (light/dark/device) that persists across sessions. The implementation uses CSS light-dark() functions and media queries to support system-level dark mode preferences.

• Adds a theme selector with Light, Dark, and Device (system preference) options
• Updates CSS to support both light and dark color schemes using light-dark() function
• Points to a forked AppLoaderCore repository for testing (noted in description as temporary)

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
index.html	Adds theme selector dropdown UI and missing spacing between form elements
css/main.css	Implements dark mode color scheme using light-dark() CSS function throughout the interface
core	Updates submodule commit reference to new version with dark mode support
.gitmodules	Temporarily points to forked AppLoaderCore repository for testing

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gfwilliams]

Just posted some comments on espruino/EspruinoAppLoaderCore#84

I think it's not on https://rkboss6.github.io/BangleApps now as I can't see the theme chooser? But do the interface/custom menus work ok? I see you added some code for them but I wonder whether any of them hard-code any colours?

[RKBoss6]

Oh, sorry! It should be up now. Custom menus are injected with the style, and most that I've seen so far look good - it is subject to whether or not they have hard-coded any styles in, but the majority of them look promising.

Edit: Just looked at some more, and tables aren't looking good on dark mode. Would you say it's better to inject all possible styles, or try and blend the light Iframes into the dark site somehow?

[gfwilliams]

You'd need to back this out before we merge - although I know it's handy for testing at the moment

[gfwilliams]

I think if we're doing dark mode, we're going to have to change the colours on tables and other UI elements too - I don't see how we can really 'blend' the submenus in nicely. Even as-is it looks a bit rough - buttons don't look that great in the main app loader:

Just checking the apps with menus that I have installed...

recorder:

replies:

terminal:

scheduler:

They don't look great. Not to mention when they load there's a big flash of bright grey.

Personally, I think if we merge this, we're just going to get a bunch of complaints about how it looks at the moment.

I guess as these apps basically all include css/spectre.min.css and interface/custom.js something might have to go in there?

[RKBoss6]

I was thinking, is it possible to just have some code that updates all the custom.htmls to use the main.css, and then fall back to spectre? Since it's minified, it'll be difficult to propagate the changes, and copy them all exactly, when it would be a much easier solution to just automate inserting a line in the top of custom.htmls for main.css... wdyt?

[gfwilliams]

is it possible to just have some code that updates all the custom.htmls to use the main.css

You mean to add in the css link as well as the spectre one? I don't see that's a big problem - we'd just want to update the tutorial too.

Could even add something to sanitycheck.js to ensure it happens

[RKBoss6]

Cool! I'm not sure exactly how to do that though, so could one of you guys handle the existing conversion code?

[gfwilliams]

Well, I'd just add it manually - there aren't that many interface.html/custom.html files. Have you actually tried to see if doing that on the main culprits fixes things first though?

[RKBoss6]

I think, if the community agrees, we should probably prioritize the PR for dropdowns for sorting first - then we can come back to this later and get the dropdown css styles in as well.

[RKBoss6]

Alright, now that #4150's been merged, I've taken a look at this, and have some really weird behavior on the css injection for the custom htmls. It seems that, if it just go ahead and add the injection to all the .htmls, some of them do use the new styles, and some don't, even with overrides and priorities set. Since I had absolutely no idea what was going on after around 2 weeks, I asked an AI, and it didn't know either...

I'll try taking a better look at this, but Gordon, if you also add the <link rel="stylesheet" href="css/main.css"> to the top of a handful of custom.html files in the current master branch of the repo, does it get the main.css styles we have right now? (more rounded buttons, etc.)

Could be an issue on my machine.

[gfwilliams]

I just added <link rel="stylesheet" href="../../css/main.css"> to worldclkinfo and intentional custom.html and both seem to work as I'd expect - I refresh it once added and get the rounded buttons and the padding goes down.

It's not that you're adding <link rel="stylesheet" href="css/main.css"> but because the HTML are 2 layers down in the directory you need to be putting ../../ in?

[RKBoss6]

Turns out my browser was caching the site and not showing my changes of css for a while face palm.
I'm wondering, as I keep looking at this, I uncover more and more areas where I have to manually create an entry in main.css for that element and change the colors. Since spectre doesn't use SASS for colors and is now dead, it makes it really tedious to maintain dark mode now...

Would it be worth it to switch our spectre source file to that of a fork of spectre that does use SASS and has dark mode, such as this one? It would make every contributor and maintainer's job much easier because all dark mode is contained in the new spectre.css, and any changes to colors would work across all elements.

Edit: Never mind, all the ones I've found are quite an eyesore with the bangleapps site, as out of the box they look like the screenshot below. I think bangleapps just has a bunch of custom stuff anyway that needs overriding, which is just what we had done originally...

[RKBoss6]

The changes are up on my app loader, the modals and custom htmls are looking pretty good now!

I just need to make the device thumbnails transparent and we should be good to go!

[gfwilliams]

Looks really good - thanks!

I'm not sure about SASS, but CSS Variables seem like a thing now and appear to be well supported? https://caniuse.com/css-variables

It would be very nice for folks to be able to fork the app loader and customise the look and feel of it in one file, without all this messing around changing colors all over spectre and main.css

[RKBoss6]

Yes actually, that does sound really nice! I think we can leave that for another PR, after this one is merged in...

[RKBoss6]

This pr should be good now, everything's up on my app loader, feel free to take a look!