Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Save theme preferences on Nord website #185

Open
lokesh-krishna opened this issue Oct 17, 2019 · 4 comments
Open

Save theme preferences on Nord website #185

lokesh-krishna opened this issue Oct 17, 2019 · 4 comments

Comments

@lokesh-krishna
Copy link

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 arcticicestudio transferred this issue from nordtheme/nord Oct 17, 2019
@arcticicestudio
Copy link
Contributor

Hi @lokesh-krishna 👋, thanks for your contribution 👍
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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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!

@arcticicestudio arcticicestudio added the hacktoberfest This repository participates in the Hacktoberfest label Oct 8, 2020
@arcticicestudio arcticicestudio removed the hacktoberfest This repository participates in the Hacktoberfest label Nov 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants