Save theme preferences on Nord website

[lokesh-krishna]

Description

I'm not sure if this is the right repository for this or if the website has its own repository so please move this to an appropriate location.

Currently, while the Nord website lets you toggle between the light and dark themes, it does not save this preference.

Expected Behavior

The website will save this preference so that the user does not have to toggle this every time they visit the website or open a new tab from within the website.

[arcticicestudio]

Hi @lokesh-krishna :wave:, thanks for your contribution :+1: I've moved this issue to the correct repository.

Actually the currently active theme is stored in the session storage of the browser (nord-docs:themeMode key) that persists during the usage of the website so this is by design. Storing the value in the local storage would persist it for every future session, but might also confuse the user when the site doesn't look the way it looked like on the first visit and forgot that he/she toggled the appearance. One way to improve this is to use the (relative new) prefers-dark-theme CSS media feature to ensure the site uses the darker theme by default when the users system theme is also set to dark or at least the one of the browser, but the current overall browser support and usage is only at ~32% so this won't apply for many users.

Are there any more advantages in storing the active theme mode in the local storage?

[lokesh-krishna]

Storing the value in the local storage would persist it for every future session, but might also confuse the user when the site doesn't look the way it looked like on the first visit and forgot that he/she toggled the appearance.

I hadn't thought about this. My own suggestion/request was based on the scenario of actually remembering that you toggled the theme (which is likely to be a conscious choice upon later visits but just a part of exploring the site in the initial or early visits) and still having to redo that every single time you return to it. It would then be confusing to have the site return to the light theme every time.

Another alternative suggestion/request from me would be to default to the dark theme as it is what is Nord's brand identity in all port projects presently.

[arcticicestudio]

I guess it would be good to see what's the preferred theme by logging theme changes in the statistics. Also like you said, most users might be aware that they changed the theme and it's also not like the toggle button is hidden in some preference tabs 😄

The default theme itself is set to light since this is kind of a best practice and has been proven to be more user friendly and welcoming. Even when Nord is a dark ambient theme, this is mainly targeted for the application UIs and and especially for syntax highlighting in editors.

The problem with using the dark mode by default is also that some elements and not fit well due to the contrast: Elements like the SVG illustrations using Nord's dark colors to take off the light background creating a eye-catching effect, but in dark mode they almost merge with the dark background. So I'd like to leave the choice to the user if (s)he prefers to use the site with a dark appearance. This decision is also a well-known and proven UI design concept and that's why you see most products these days adding features like a "dark theme mode" instead of "light theme mode" 😉

So in the end I guess I'll move the theme mode setting from the session storage to the local storage so the theme choice persists across sessions within the same browser. I also had the idea to add a way to create a account for the site to store such settings server-side (across different browsers) as well as allowing to implement other features like bookmarking favorite ports etc., but that's a topic for much later times when the pile of issues/PRs in all Nord port projects are finally completed.

[lokesh-krishna]

The problem with using the dark mode by default is also that some elements and not fit well due to the contrast: Elements like the SVG illustrations using Nord's dark colors to take off the light background creating a eye-catching effect, but in dark mode they almost merge with the dark background.

I hadn't thought about this either but having gone back and checked, I can see what you are talking about and it makes sense to let the light theme be the default to showcase this beauty in all its glory.

So in the end I guess I'll move the theme mode setting from the session storage to the local storage so the theme choice persists across sessions within the same browser.

Thank you so, so much!