#72 "Dark Mode" and User Settings Page

Open
opened 1 month ago by hz · 5 comments
hz commented 1 month ago

We got a request in 6.009 this spring for a “dark mode” in catsoop.

I like this idea, but it’s actually a little bit complicated. It probably requires some sort of global (or course-level) configuration variables for each user. We’re not currently doing that, but it seems like maybe it could be a good idea.

We got a request in 6.009 this spring for a "dark mode" in catsoop. I like this idea, but it's actually a little bit complicated. It probably requires some sort of global (or course-level) configuration variables for each user. We're not currently doing that, but it seems like maybe it could be a good idea.
hz added the
enhancement
label 1 month ago
hz added the
ui/ux
label 1 month ago
hz added the
maybe
label 1 month ago
edemaine commented 1 month ago

In Coauthor, it’s a global setting per user, but I already had lots of those. In one way it’s annoying: I might prefer dark mode on my laptops, say, but light mode on my desktops. There are a couple of alternatives:

  • The default setting on Coauthor is to detect the OS-level preference via prefers-color-scheme media query. This is fine if users don’t want to customize each site they use...
  • A simpler option in your case would be to put it in the cookie, or a new cookie, or localstorage (if that could work). Then it’s configured per-computer anyway, which could be nice, and you don’t need to build user-global preferences.

See

https://github.com/edemaine/coauthor/blob/master/client/theme.coffee

In Coauthor, it's a global setting per user, but I already had lots of those. In one way it's annoying: I might prefer dark mode on my laptops, say, but light mode on my desktops. There are a couple of alternatives: * The default setting on Coauthor is to detect the OS-level preference via prefers-color-scheme media query. This is fine if users don't want to customize each site they use... * A simpler option in your case would be to put it in the cookie, or a new cookie, or localstorage (if that could work). Then it's configured per-computer anyway, which could be nice, and you don't need to build user-global preferences. See https://github.com/edemaine/coauthor/blob/master/client/theme.coffee
vrichmon commented 4 weeks ago

Hi! I’ve been poking around this stuff. I was wondering whether this approach would work:

  1. Add a dark_base.css file to catsoop’s STATIC folder. It could import the normal base, and override some things to be darker.
  2. Add a “Settings”-like page where people can choose dark mode. If they do, store it in their log (maybe start a new per-person log, “settings”)
  3. In the course’s top-level preload, check whether that user’s db says they want dark. If so, set cs_theme = "BASE/themes/dark_themes.css"

This wouldn’t solve Erik’s multi-device point. But are “global (or course-level) configuration variables” different from normal data in the logs?

Hi! I've been poking around this stuff. I was wondering whether this approach would work: 1. Add a dark_base.css file to catsoop's __STATIC__ folder. It could import the normal base, and override some things to be darker. 2. Add a "Settings"-like page where people can choose dark mode. If they do, store it in their log (maybe start a new per-person log, "settings") 3. In the course's top-level preload, check whether that user's db says they want dark. If so, set `cs_theme = "BASE/themes/dark_themes.css"` This wouldn't solve Erik's multi-device point. But are "global (or course-level) configuration variables" different from normal data in the logs?
hz commented 4 weeks ago
Owner

I think that plan sounds good (precisely one of the things I had been considering).

There is a question of where the “settings” page would live (maybe in __UTIL__?). Also, I think we would want a way to get at both global settings and course-specific settings, under the assumption that dark mode or not is not the only thing people would want to tweak.

We would also probably want a link to that page under the username menu (where “log out” currently appears).

This wouldn’t solve Erik’s multi-device point.

I think, at least, it’s a good place to start. It seems like with this as a base, modifying it so that we look in localStorage first (for device-specific options), and then fall back to the global setting, is fine.

But are “global (or course-level) configuration variables” different from normal data in the logs?

No, I think storing them in a new per-user log like you suggest is the right method here.

There are also likely to be some difficulties with trying to make sure things look roughly OK regardless of the choice of cs_base_color and friends. Maybe that’s harder when we need to support both dark and light mode, or maybe we swap the --cs-light-* and --cs-base-* variables when in dark mode vs light mode? I’m not sure of the details, but we will want to play around with things to make sure that most choices of cs_base_color produce something that looks nice in both light and dark mode.

I think that plan sounds good (precisely one of the things I had been considering). There is a question of where the "settings" page would live (maybe in `__UTIL__`?). Also, I think we would want a way to get at both global settings _and_ course-specific settings, under the assumption that dark mode or not is not the only thing people would want to tweak. We would also probably want a link to that page under the username menu (where "log out" currently appears). > This wouldn't solve Erik's multi-device point. I think, at least, it's a good place to start. It seems like with this as a base, modifying it so that we look in localStorage first (for device-specific options), and then fall back to the global setting, is fine. > But are "global (or course-level) configuration variables" different from normal data in the logs? No, I think storing them in a new per-user log like you suggest is the right method here. There are also likely to be some difficulties with trying to make sure things look roughly OK regardless of the choice of `cs_base_color` and friends. Maybe that's harder when we need to support both dark and light mode, or maybe we swap the `--cs-light-*` and `--cs-base-*` variables when in dark mode vs light mode? I'm not sure of the details, but we will want to play around with things to make sure that most choices of `cs_base_color` produce something that looks nice in both light and dark mode.
vrichmon commented 3 weeks ago

Awesome, ok! Makes sense.

(In addition to color combos looking nice, I think there are accessibility-related concerns about the contrast between colors.)

Awesome, ok! Makes sense. (In addition to color combos looking nice, I think there are accessibility-related concerns about the contrast between colors.)
hz removed the
maybe
label 3 weeks ago
hz commented 1 week ago
Owner

With #96 in the pipeline (including CodeMirror rather than Ace), it’s probably a good idea to flesh this out a bit more into a generic “user settings” page, which can include not only a theme for catsoop as a whole, but also a theme for CodeMirror.

With #96 in the pipeline (including CodeMirror rather than Ace), it's probably a good idea to flesh this out a bit more into a generic "user settings" page, which can include not only a theme for catsoop as a whole, but also a theme for CodeMirror.
hz changed title from "Dark Mode" to "Dark Mode" and User Settings Page 1 week ago
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.