Want to show theme corresponding the user's operating system theme settings.
For that, need to use Javascript in css like below but it will cause error
@media (prefers-color-scheme: dark) {
localStorage.setItem("os-prefered-dark", true)
}
Asked
Active
Viewed 33 times
0
Arijit Kundu
- 331
- 2
- 14
-
you cannot use javascript in CSS. but you can use some css in javascript. – Mihai T Oct 25 '20 at 11:02
-
Never seen people using JavaScript in CSS but CSS in JavaScript. – m4n0 Oct 25 '20 at 11:03
-
1Hi, I do believe [this article](https://gosink.in/javascript-css-toggle-dark-light-theme-based-on-your-users-preferred-scheme/) will help you. :) – hisam Oct 25 '20 at 11:06
-
Why set the dark theme in localStorage? – evolutionxbox Oct 25 '20 at 11:06
-
So that the theme preference remains there after the page is also refreshed – Arijit Kundu Oct 25 '20 at 11:08
-
Then why use `prefers-color-scheme`? As you can just access that again – evolutionxbox Oct 25 '20 at 11:13
-
So that we can show the theme as per user's operating system also – Arijit Kundu Oct 25 '20 at 11:19
-
Consider only accessing `prefers-color-scheme`. Saving that value to localStorage is unnecessary. – evolutionxbox Oct 25 '20 at 11:51
-
I am giving two options, the user can manually also change the theme, after which it will overwrite prefers-color-theme. So to save this user manual theme, have to save it in local storage – Arijit Kundu Oct 25 '20 at 11:56