Feature Request: Option to make light/darkmode use the system settings

[ManonLef]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Feature Request: brief description of feature request format, e.g. Feature Request: Lesson complete button does not update on click
• Would you like to work on this issue?

Description of the Feature Request

I have no idea of the intricacies of implementing this at the moment, but it would be a nice feature to have the option to set the mode to whatever the current system mode is set to. So when users have dark mode enabled on their device, TOP will automatically switch to the dark theme as well if the user has activated that setting.

Some options I thought of:

Option 1: User settings

Add it as an option in the user settings. In this case they can toggle a system-dark/light-mode option. This would however not be available for people without an account.

Option 2: add a 3rd option on click

Currently, when you click on the icon, it just changes to the other option. We could iterate through 3 options on click as well. There should be some indication or explanation added of what each option represents then. The current symbols are clear enough, but I'm not sure if a system setting would be easily described by a symbol without text

Acceptance criteria

• adds an option to set the light/dark-mode to follow the system setting

Additional Comments

No response

[KevinMulhern]

Thanks @ManonLef 💪 I agree it would a nice QOL upgrade to have.

Settings would be the ideal spot for me. But many users won't realise it's there. We saw that a lot when the theme switcher was in the user dropdown.

The UI pattern I'm always coming across for theme toggles that have more than 2 options is a dropdown:

I think that could give us what we're looking for with this, and solve this issue at the same time lol

[ManonLef]

That looks like the best option indeed @KevinMulhern

If I'm correct, this section on TW system prefs could be relevant here

[KevinMulhern]

Yep, definitely relevant. The main thing we do different is store the theme in a cookie instead of local storage. But that shouldn't be a problem.

[KevinMulhern]

We ran into a show-stopper with this one unfortunately. System themes are easy to detect and auto-switch to in a client-side rendered app (I'd bet most apps you see this feature on use that architecture). But its much more difficult with a server-side rendered app like ours. I'm moving this to a discussion for now, but it might be something we revisit in the future.