How to change the theme color of the website when the user's system theme is changed to dark mode using HTML?

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:

name with the value of theme-color
content with 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.
media with 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 😃.

Blog

How to change the theme color of the website when the user's system theme is changed to dark mode using HTML?

MELVIN GEORGE

TL;DR

Join Our Newsletter. No Spam, Only the good stuff.

Related