Style: Use new color system

[VitroidFPV]

In preparation for a larger UI overhaul. Uses variables for all colors that get switched in dark mode, also further consistent with the website. dark-theme.less is used for resources that can't be easily/cleanly changed with variables - logos, graphics, and one-off colors.

It was a rough pass changing everything over, it's possible I missed something even through testing. Please check and report anything odd!

Screenshots below, but it's probably better to look through in the build preview we'll get shortly. Maybe a good place to try the collaborative review feature 😅

[netlify[bot]]

✅ Deploy Preview for origin-betaflight-app ready!

Name	Link
🔨 Latest commit	cbe7e3c7c3cc61e5e6f27d5500e30870e14e8bab
🔍 Latest deploy log	https://app.netlify.com/sites/origin-betaflight-app/deploys/6641d66095f2f800089a1080
😎 Deploy Preview	https://deploy-preview-3926.dev.app.betaflight.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Do you want to test this code? Here you have an automated build: Betaflight-Configurator-Android Betaflight-Configurator-Linux Betaflight-Configurator-macOS Betaflight-Configurator-Windows WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[github-actions[bot]]

Do you want to test this code? Here you have an automated build: Betaflight-Configurator-Android Betaflight-Configurator-Linux Betaflight-Configurator-Windows Betaflight-Configurator-macOS WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[github-actions[bot]]

Do you want to test this code? Here you have an automated build: Betaflight-Configurator-Linux Betaflight-Configurator-Android Betaflight-Configurator-Windows Betaflight-Configurator-macOS WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[McGiverGim]

The dark theme is ok. The light theme I'm not sure. Specially the header and the log in the same colour than the rest. I think I prefer some little more of contrast.

[nerdCopter]

I find the yellow/orange links on light background difficult to eye. Also something pretty about the old light theme, although not 100% light.

left this PR PWA -- right master NWjs

[chmelevskij]

Isn't the light theme the same as on https://betaflight.com/docs/wiki/release/Betaflight-4-5-Release-Notes? If it is then we should probably just keep it the same, at least for now

[chmelevskij]

Though, tried lighthouse on both documentation site and deploy preview. It tends to flag up similar issue with the link colours.

Given that point of this PR is to align docs and betaflight configurator I guess we can live with that. Otherwise we'd be again having different looks between configurator and docs... Would make sense addressing that in separate PR if you ask me.

[netlify[bot]]

Tomas Chmelevskij left a comment:

@vitroid, do you think it's worth adjustting typography here, at least colours to match the documentation ones? I think lighting this one up a bit, adding some hue and removing those drop shadows should get us 80% there. WDYT?

Browser metadata

Path:      /
Browser:   Chrome 124.0.0.0 on Mac OS 10.15.7
Viewport:  1512 x 857 @2x
Language:  en-GB
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions[bot]]

Do you want to test this code? Here you have an automated build: Betaflight-Configurator-Android Betaflight-Configurator-Linux Betaflight-Configurator-macOS Betaflight-Configurator-Windows WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[VitroidFPV]

Closing as this was included in #3956