Closed ntonnaett closed 3 months ago
Awesome, can you run npm run format
and npm run lint
to pass code style build checks? Thanks!
Also curious, I am unable to test this on Windows and Mac. Would I be able to test this on a CCRMA linux machine?
You can set dark or light mode directly in your browser. In Firefox it's in the General tab under Website appearance. Automatic would be set by your desktop environment or operating system. In Chromium it's in Appearance -> Mode. Unfortunately setting it directly to light or dark is broken for me. The automatic part (Device) works though. Maybe it's only broken on Linux?!
I'm not sure when this was added in macOS and Safari, but there should be the same options as in Gnome and Firefox/Chrome.
Hmm interesting, I'm trying to switch light and dark mode settings on Chrome (Windows) but it doesn't seem to do anything. Maybe this only works on Linux or Gnome?
In the past, the IDE theme used to similarly read browser light/dark mode but I ran into the issue of if your OS was dark but you wanted a light IDE, what is the source of truth? If you manually set it to light, how should the theme load after refreshing the page? Because of this confusion, I removed reading the browser theme to be OS theme agnostic.
In Chromium it didn't work for me either. I think that's a browser bug because it even follows my desktop setting when I explicitly choose dark mode. I checked that with this github repo page as github implements this too. Be aware that Github's main page (not logged in) is always dark.
In the past, the IDE theme used to similarly read browser light/dark mode but I ran into the issue of if your OS was dark but you wanted a light IDE, what is the source of truth? If you manually set it to light, how should the theme load after refreshing the page? Because of this confusion, I removed reading the browser theme to be OS theme agnostic.
Oh, I see. I think the correct thing to do then would be to save the setting as a cookie and have the options dark, light, and system. We do the same as the browser itself.
Oh, I see. I think the correct thing to do then would be to save the setting as a cookie and have the options dark, light, and system. We do the same as the browser itself.
Gotcha, yeah we only save the cookie for light/dark, not yet system. That would be a good feature...
This mostly works now. Though removing the Event Listener doesn't work. So even if you chose dark or light mode it still follows your browser or desktop setting. Maybe you understand why this doesn't work.
Format and lint don't agree on the formatting of switch statements?
Okay, I just didn't remove the event listener but returned early instead if colorPreference is not "system". This works now. It's rebased and ready to be merged. I could make the history more beautiful though. Or squash it?
I've implemented what we talked about on the way home. What do you think about the wording?
The dark mode toggle is now gone when turning on system preference. https://ccrma.stanford.edu/~ntonnatt/webchuck-ide/
Rebased to dev.
It all seems to work! Could you put ChucK time first in the view dropdown to save a label? This way dark mode would be at the end of the dropdown? Then we can just call the label Theme
to be neutral?
I know you removed the button now but when it was system but did you like the disabled button look? You can add disabled:opacity-50
button class to the html for the button, and set themeButton.disabled = true
. Not sure if you liked it this way or not. I think it could be a bit more helpful?
Obey to Terry's orders ✓ Update https://ccrma.stanford.edu/~ntonnatt/webchuck-ide/ ✓
I forgot about the disabled option. I think it's better.
LGTM
This sets the the color scheme according to prefers-color-scheme (that follows the global dark mode setting in Gnome). You can still toggle the dark mode from the menu.