Style: Use new color system #3926
Conversation
✅ Deploy Preview for origin-betaflight-app ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
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. |
|
I find the yellow/orange links on light background difficult to eye. left this PR PWA -- right master NWjs |
| @@ -91,7 +91,7 @@ export default { | |||
| }, | |||
| }; | |||
| </script> | |||
| <style scoped> | |||
| <style scoped lang="less"> | |||
There was a problem hiding this comment.
Do we need lang="less"here? Don't think we are using any features from less in vue parts
src/css/theme.css
Outdated
There was a problem hiding this comment.
Something seems to be odd with the indentation here
|
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 |
|
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. |
|
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 |
|
|
Do you want to test this code? Here you have an automated build: |
|
Closing as this was included in #3956 |
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.lessis 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 😅
