Search code examples
color-scheme

get users favorite color theme and set it to website

I am trying to find a way how i could get information from browser what is users selected color theme in google account (or maybe any other social network that user is connected to) and set the same theme for my website. Or at least get browser appearance theme and set color theme of my website accordingly.

Solution

  • Unfortunately no one gave any suggestions, But thanks to Steve Griffith - Prof3ssorSt3v3 i have found some solution: Prof3ssorSt3v3 have YouTube channel and posts there great videos so i recommend that channel to everyone who is learning JavaScript or PHP. And the answer is... According browser color-scheme it is possible to select dark or light color scheme for your webpage. In CSS file set supported color schemes as below:

    :root {
color-scheme: light dark;
}

    or in HTML head set:

    <meta name="color-scheme" content="light dark" />

    next create different CSS for both color schemes separated like this:

    @media screen and (prefers-color-scheme: dark) {
.someClass {
 // some CSS
}
}
@media screen and (prefers-color-scheme: light) {
.someClass {
 // some CSS
}
}