Originally posted here!
To automatically apply dark mode CSS styles to the website whenever the user's system theme is changed to dark mode, you can use the @media rule in the CSS followed by using the () symbol (opening and closing brackets), and inside the brackets, you can write the keyword prefers-color-scheme followed by the : symbol (colon) and then the value of dark.
After the brackets, you need to use the {} symbol (opening and closing brackets) and inside this code block, you can write the styles to trigger on dark mode.
TL;DR
<html>
<style>
/*
Using the prefers-color-scheme CSS media
feature to automatically apply dark mode styles
*/
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
</style>
<!-- A simple white background color webpage with some texts -->
<body>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
voluptatum mollitia dignissimos magni voluptatem numquam tenetur
consequatur similique perspiciatis dolore impedit nihil velit sunt,
consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
esse architecto minus! Voluptate architecto dolores odio, eligendi
perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
incidunt expedita reprehenderit repellat enim recusandae.
</p>
</body>
</html>
For example, let's say we have a white background color webpage with a heading tag and a random paragraph.
The HTML will look something like this,
<html>
<!-- A simple white background color webpage with some texts -->
<body>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
voluptatum mollitia dignissimos magni voluptatem numquam tenetur
consequatur similique perspiciatis dolore impedit nihil velit sunt,
consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
esse architecto minus! Voluptate architecto dolores odio, eligendi
perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
incidunt expedita reprehenderit repellat enim recusandae.
</p>
</body>
</html>
Now to automatically apply dark mode styles to the webpage whenever the user's system theme is changed to dark mode, we can use the @media CSS rule followed by writing the keyword prefers-color-scheme and the value of dark inside the () symbol and then followed by the {} symbol. Inside the curly brackets symbol, we can write the CSS styles to be applied when the user's system has the dark mode selected.
It can be done like this,
<html>
<style>
/*
Using the prefers-color-scheme CSS media
feature to automatically apply dark mode styles
*/
@media (prefers-color-scheme: dark) {
/* Write dark mode style here */
}
</style>
<!-- A simple white background color webpage with some texts -->
<body>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
voluptatum mollitia dignissimos magni voluptatem numquam tenetur
consequatur similique perspiciatis dolore impedit nihil velit sunt,
consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
esse architecto minus! Voluptate architecto dolores odio, eligendi
perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
incidunt expedita reprehenderit repellat enim recusandae.
</p>
</body>
</html>
Now let's write some dark mode styles inside the prefers-color-scheme: dark CSS code block.
We aim to change the background color of the website to black and all the text to white color on dark mode.
It can be done like this,
<html>
<style>
/*
Using the prefers-color-scheme CSS media
feature to automatically apply dark mode styles
*/
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
</style>
<!-- A simple white background color webpage with some texts -->
<body>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nam
voluptatum mollitia dignissimos magni voluptatem numquam tenetur
consequatur similique perspiciatis dolore impedit nihil velit sunt,
consectetur eligendi id odit? Id tempore dolores distinctio explicabo iste
esse architecto minus! Voluptate architecto dolores odio, eligendi
perspiciatis iure voluptates repellendus libero nemo fuga, maxime,
doloremque harum. Provident asperiores quisquam nesciunt commodi suscipit
incidunt expedita reprehenderit repellat enim recusandae.
</p>
</body>
</html>
Now if we switch the user's system theme to dark mode, our website theme will also change according to the styles defined.
The visual representation of the dark mode theme automatically getting switched is shown below,
We have successfully implemented an automatic dark mode functionality on the website. Yay 🥳.
See the above code live in the codesandbox.
That's all 😃.
Top comments (1)
Sounds good.. I see it's like a fallback option.. maybe I supose wrong, but it will change to dark mode only if the user set a dark mode in he/her/it browser and the colors we define by default... I think it's great that knowlege, and that possibility cause allow us to have more control about the style of the site... I have a question... this media querries work with setup configuration of the devices, but we can make a JS interaction that set these conditions to true...? for example, we can do a functionallity taht turn the property 'prefers-color-scheme:' to 'dark' or other value only with JS went we click a button for example?? thank for your post