How to change the theme color of the website when the user's system theme is changed to light mode using HTML?
Tags: html
Published: 2022-12-12 05:26:34

---
  title: How to change the theme color of the website when the user's system theme is changed to light mode using HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 10:56:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-theme-color-webpage-when-users-system-theme-changed-to-light-mode-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_9f1a1e4c2a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-theme-color-webpage-when-users-system-theme-changed-to-light-mode-html)
  To set or change the theme color of the webpage when the user's system theme is changed to light 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: light)`.

### TL;DR

```html
<html>
  <head>
    <!-- 
      Using meta tag to set/change the theme color
      when the user's system theme is changed to the light mode 
    -->
    <meta
      name="theme-color"
      content="#c96b65"
      media="(prefers-color-scheme: light)"
    />
  </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
<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 light 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 light mode. Let's use the hex color code of `#c96b65`, a slightly light red color.
- `media` with the value of `(prefers-color-scheme: light)`. This value is the definition to trigger the theme color switching when the user system theme is changed to light mode.

It can be done like this,

```html
<html>
  <head>
    <!-- 
      Using meta tag to set/change the theme color
      when the user's system theme is changed to the light mode 
    -->
    <meta
      name="theme-color"
      content="#c96b65"
      media="(prefers-color-scheme: light)"
    />
  </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](https://codesandbox.io/s/change-theme-color-webpage-when-users-system-theme-changed-to-light-mode-0ptd29?file=/index.html).

That's all 😃.