Originally posted here!
To set or change the theme color of the webpage when the user's system theme is changed to dark mode, you can use the meta HTML tag inside the head HTML element tag and then use the name attribute with the value of theme-color, followed by the content attribute with the value of any hex color code or the color of your choice and finally using the media attribute having the value of (prefers-color-scheme: dark).
TL;DR
<html>
<head>
<!--
Using meta tag to set/change the theme color
when the user's system theme is changed to the dark mode
-->
<meta
name="theme-color"
content="#c96b65"
media="(prefers-color-scheme: dark)"
/>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quas ab esse
perferendis ipsum, aliquam blanditiis quasi voluptas sint ad consequatur!
Repellat reprehenderit quod voluptate numquam nobis repudiandae, assumenda
harum consequatur itaque magnam quia voluptatum libero consectetur ex.
Impedit placeat iure mollitia odio accusamus fugit ipsam quidem commodi
dolor dolorem culpa obcaecati ipsa ducimus incidunt quisquam doloribus
illo, quibusdam sed temporibus modi perferendis sapiente velit?
</p>
</body>
</html>
For example, let's say we have a webpage with a heading and a paragraph.
The HTML for that would look something like this,
<html>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quas ab esse
perferendis ipsum, aliquam blanditiis quasi voluptas sint ad consequatur!
Repellat reprehenderit quod voluptate numquam nobis repudiandae, assumenda
harum consequatur itaque magnam quia voluptatum libero consectetur ex.
Impedit placeat iure mollitia odio accusamus fugit ipsam quidem commodi
dolor dolorem culpa obcaecati ipsa ducimus incidunt quisquam doloribus
illo, quibusdam sed temporibus modi perferendis sapiente velit?
</p>
</body>
</html>
Now to set or change the theme color when the user's system theme is changed to dark mode, we can use the meta tag inside the head HTML tag with the following attributes:
-
namewith the value oftheme-color -
contentwith the value of the hex color code to set when the user's system theme is changed to dark mode. Let's use the hex color code of#c96b65, a slightly dark red color. -
mediawith the value of(prefers-color-scheme: dark). This value is the definition to trigger the theme color switching when the user system theme is changed to dark mode.
It can be done like this,
<html>
<head>
<!--
Using meta tag to set/change the theme color
when the user's system theme is changed to the dark mode
-->
<meta
name="theme-color"
content="#c96b65"
media="(prefers-color-scheme: dark)"
/>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quas ab esse
perferendis ipsum, aliquam blanditiis quasi voluptas sint ad consequatur!
Repellat reprehenderit quod voluptate numquam nobis repudiandae, assumenda
harum consequatur itaque magnam quia voluptatum libero consectetur ex.
Impedit placeat iure mollitia odio accusamus fugit ipsam quidem commodi
dolor dolorem culpa obcaecati ipsa ducimus incidunt quisquam doloribus
illo, quibusdam sed temporibus modi perferendis sapiente velit?
</p>
</body>
</html>
This will only suggest the browser use the color we selected as the theme color and will change the browser tab and interface colors to this if it can be done.
See the above code live in codesandbox.
That's all 😃.
Top comments (0)