Added Darkmode #932

narickmann · 2022-05-27T13:29:46Z

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.

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.

github-actions · 2022-05-30T07:27:15Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

Fixed typo

LukasKalbertodt

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 °_°

src/i18n/locales/de.json

src/App.js

src/ui/header.js

src/ui/settings/colorMode.js

src/ui/studio/review/index.js

- 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)]

LukasKalbertodt

That solves most of problems! I resolved my github comments where appropriate and updated my last comment.
I found a few minor things in the new change, plus there are a few things from the initial review left.

src/ui/settings/colorMode.js

lkiesow · 2022-05-31T19:48:08Z

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 shrug

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 theme-ui-color-mode:"default" in the local storage. The new code seems to interpret that as “light” and then store this as a fixed choice.

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.

lkiesow · 2022-05-31T20:02:50Z

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:

.

github-actions · 2022-06-01T06:42:19Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

LukasKalbertodt · 2022-06-01T06:44:41Z

(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)

- removed button for darkmode and added a dropdowm instead - updated theme-ui to v0.14.5 this closes elan-ev#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

narickmann · 2022-06-10T06:26:32Z

Commit 435cac1 fixes PR #940

narickmann · 2022-06-10T06:26:32Z

Commit 435cac1 fixes PR #940

LukasKalbertodt

I have only skimmed the new changes, but from testing the deployment, I'm completely happy with it!

System preference should now work. After OS preferences have been changed, the page must be reloaded to see the change in Studio.

LukasKalbertodt

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.

package.json

src/ui/settings/colorMode.js

- removed unused package - indented a few lines

LukasKalbertodt

Yay!

Added Darkmode

bb81798

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.

github-actions bot added the status:conflicts Conflicts with another pull request or issue label May 30, 2022

Merge branch 'master' into darkmode

0d62455

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label May 30, 2022

Update de.json

90fa12a

Fixed typo

LukasKalbertodt requested changes May 30, 2022

View reviewed changes

LukasKalbertodt requested changes May 31, 2022

View reviewed changes

src/ui/settings/colorMode.js Outdated Show resolved Hide resolved

src/ui/settings/colorMode.js Outdated Show resolved Hide resolved

src/ui/settings/colorMode.js Outdated Show resolved Hide resolved

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Jun 1, 2022

resolved conflict

32bca4f

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Jun 2, 2022

narickmann added 4 commits June 2, 2022 12:33

Color adjustments

ad62ab2

- changed the focus-colors for tab-navigation for better contrast in light and darkmode - focus-outline for recording buttons now round

Some minor changes

3941e52

- changed outline-color for video-settings to green for better visibility - aligned outline on recording-buttons

LukasKalbertodt approved these changes Jun 14, 2022

View reviewed changes

narickmann added 2 commits June 30, 2022 14:47

Added option for System preference

4ef3cf2

System preference should now work. After OS preferences have been changed, the page must be reloaded to see the change in Studio.

Added translation for system design

99ca23c

LukasKalbertodt requested changes Aug 1, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

src/ui/settings/colorMode.js Outdated Show resolved Hide resolved

src/ui/settings/colorMode.js Outdated Show resolved Hide resolved

src/ui/settings/colorMode.js Outdated Show resolved Hide resolved

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Aug 1, 2022

This comment was marked as resolved.

Sign in to view

Merge branch 'master' into darkmode

d49bfa2

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Aug 2, 2022

Requested changes

097aaad

- removed unused package - indented a few lines

LukasKalbertodt approved these changes Aug 3, 2022

View reviewed changes

LukasKalbertodt merged commit df467fb into elan-ev:master Aug 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Darkmode #932

Added Darkmode #932

narickmann commented May 27, 2022

github-actions bot commented May 30, 2022

LukasKalbertodt left a comment •

edited

Loading

LukasKalbertodt left a comment

lkiesow commented May 31, 2022

lkiesow commented May 31, 2022

github-actions bot commented Jun 1, 2022

LukasKalbertodt commented Jun 1, 2022

narickmann commented Jun 10, 2022

narickmann commented Jun 10, 2022

LukasKalbertodt left a comment

LukasKalbertodt left a comment

This comment was marked as resolved.

LukasKalbertodt left a comment

Added Darkmode #932

Added Darkmode #932

Conversation

narickmann commented May 27, 2022

github-actions bot commented May 30, 2022

LukasKalbertodt left a comment • edited Loading

Choose a reason for hiding this comment

LukasKalbertodt left a comment

Choose a reason for hiding this comment

lkiesow commented May 31, 2022

lkiesow commented May 31, 2022

github-actions bot commented Jun 1, 2022

LukasKalbertodt commented Jun 1, 2022

narickmann commented Jun 10, 2022

narickmann commented Jun 10, 2022

LukasKalbertodt left a comment

Choose a reason for hiding this comment

LukasKalbertodt left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

LukasKalbertodt left a comment

Choose a reason for hiding this comment

LukasKalbertodt left a comment •

edited

Loading