[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.