Comments (4)
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?
from web.
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.
from web.
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.
from web.
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!
from web.
Related Issues (20)
- Transition: Nord Slack
- Fix non-matching remark-lint ignore pattern
- Transition: Nord Xcode
- Dependency Update April-October 2019
- Transition: Nord highlight.js
- Unknown type "GitHub_Blob". HOT 4
- Broken links to articicestudio.com and svengreb.de in the footer HOT 2
- Remove Google Analytics And Google Tag Manager. HOT 5
- Enhanced captioning on color palette cards on docs/colors-and-palettes HOT 1
- Remove quotes from installation instructions
- GitHub Flow migration
- From `master` to `main`
- Incorrectly rendered links in Colors and Palettes page
- Northern Post — The state and roadmap of Nord
- `nordtheme` organization migration
- Adapt remaining `arcticicestudio` "fade-out" changes
- Inclusion of asciinema on /ports page
- all the links for ports on the ports page are wrong
- favicon hard to see in dark mode
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web.