Is there a function or variable to get a user's global system theme?

Question

I'm working on a website with a friend and I was wondering how do I get the current user's preferred theme that's set in their personalization settings (Usually dark or light)? This is just so I can set the CSS of the site when the user loads the page, instead of them having to click it at the bottom of the page

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme — Bergi, Oct 10 '20 at 05:53

score 1 · Answer 1 · edited Oct 10 '20 at 06:15

1

There is a CSS media query that will allow you to get it. It is still a draft level 5 (high enough to think it will make it to most browsers) but still be aware that it could change:

prefers-color-scheme

@media (prefers-color-scheme: light) {  .themed {    background: white;    color: black;  }}

It currently has three possible values: light, dark and no-preference. You should check it and since it is still a draft you need to be aware that it might have changes in the future

edited Oct 10 '20 at 06:15

Brad

159,648
54
349
530

answered Oct 10 '20 at 05:59

Veilhelm Alexander

41
2

Nice first answer! Welcome to Stack Overflow. – Brad Oct 10 '20 at 06:16

score -1 · Answer 2 · answered Oct 10 '20 at 05:58

We have 2 variants. With Back or With Front.

With Back you can set "light|dark-theme" to html element in back. And then you can control with front. And With that send XHR or fetch request to back for changing theme in base;

With Front you can use cookies. Save to Cookie how it make youtube. And then change in cookies.

Is there a function or variable to get a user's global system theme?

2 Answers2