Added Darkmode #932
Added Darkmode #932
Conversation
Added button for darkmode in Studio (on settings-page). Studio also detects OS preference (auto-detection) and launches studio in dark- or lightmode. NOT tested with MacOS Auto-detection does not work with Chrome and Chromium on Fedora 35, this seems to be a bug.
|
This pull request has conflicts ☹ |
github-actions
bot
added
the
status:conflicts
github-actions
bot
removed
the
status:conflicts
Fixed typo
There was a problem hiding this comment.
It's a good start, but I found a few bugs and suboptimal things:
Major:
-
When first loading (without having set a mode, e.g. try incognito mode), the header is wrong. Tried this on windows+ubuntu with chrome+firefox. (Edit: done ✔️)
-
Similarly, when recording in darkmode, the header overlay should be dark, not white: (Edit: done ✔️)
Minor:
- The auto detection of dark mode did not work for me at all, again, tested on windows+ubuntu (both set to dark mode) with chrome+firefox. But I think it never worked for me on any website at all. So maybe it's me 🤷
- When video source is still loading, the big loading item has no visible shadow, so it blends right into the background, making the settings icon float weirdly in one random spot. (Edit: done ✔️)
- In the video settings buttons, the selected button (white bg) has fairly poor contrast with the text
- All error messages (e.g. try declining camera access in the browser) have black text in dark mode, but the text should be white(-ish) (Edit: done ✔️)
- I saw one additional case of poor contrast, but can't find it anymore °_°
- header has now correct color on initial loading - when recording the header overlay is now darker in darkmode - error messages: text now white/light in darkmode - removed accidentally added whitepaces (my IDE had "format on save" active) - other minor things [e.g. removed accidentally added whitepaces (my IDE had "format on save" active)]
It's not just you. It usually works for me, but it did not when I entered the test deployment. It did after I cleared my local storage. The reason is very likely that on the old studio, you already have This also means that if you never set anything, but change your desktop color mode, the “auto” mode will fail to engage. It's just engaging the first time you ever enter Studio. Having the choice between “light”, “dark” and “auto” with “auto” being the default would be better, I think.
Apart from that, I find the lonely green button in the settings weird. I wouldn't expect this color or form for a toggle. If it's a toggle, I would expect something like the preview mode toggle in the editor:
But I would probably prefer a dropdown (since it's already used on this page). Though radio buttons would technically also work. |
|
The red button and green tooltip colors clash horribly: You turned the play button green. Why? It's also inconsistent with nut turning other icon based buttons green:
The filled, white pause button is very bright and immediately catches your eye, despite not being the most important button. For other buttons, you used just a white outline, maybe that would work better here as well. Also, I'm wondering if filling the record button white or light gray would beworth a shot:
|
|
This pull request has conflicts ☹ |
github-actions
bot
added
the
status:conflicts
|
(sorry, the conflict was caused by me merging dependabot PRs; I thought that wouldn't cause any conflict. But it's an easy to fix conflict) |
github-actions
bot
removed
the
status:conflicts
- removed button for darkmode and added a dropdowm instead - updated theme-ui to v0.14.5 this closes #812 - added some config -> this plus update fixes bug with auto preference for darkmode - some color adjustments, also removed some unused colors from theme.js - moved css for tooltip and tab-navigation to theme.js (they now use color variables)
- Studio was always choosing system-preference over localstorage, so if the user set Studio to darkmode but system is in lightmode, on refresh Studio was always using lightmode - So now: on initial load Studio uses system-preference (if nothing stored to localstorage) otherwise Studio uses localstorage
- changed the focus-colors for tab-navigation for better contrast in light and darkmode - focus-outline for recording buttons now round
- changed outline-color for video-settings to green for better visibility - aligned outline on recording-buttons
1 similar comment
System preference should now work. After OS preferences have been changed, the page must be reloaded to see the change in Studio.
There was a problem hiding this comment.
Just some comments on the code regarding the last two commits. Otherwise, as I said, I'm happy and would like to merge.
@lkiesow Could you take a look again to make sure the points raised in your last comment are all fixed? They look fixed to me.
github-actions
bot
added
the
status:conflicts
This comment was marked as resolved.
This comment was marked as resolved.
github-actions
bot
removed
the
status:conflicts
- removed unused package - indented a few lines
Added button for darkmode in Studio (on settings-page).
Studio also detects OS preference (auto-detection) and launches studio in dark- or lightmode.
NOT tested with MacOS
Auto-detection does not work with Chrome and Chromium on Fedora 35, this seems to be a bug.