×

html · level 3 · unit 3 · lesson 4

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

theme-color paints the browser in your own colours.

On many phones, the browser's top bar can take on your site's colour. This is set with <meta name="theme-color">. Its content is a : a # and six digits or letters, like #2e7d32 for leaf green.

Lots of people use . Give each theme colour a media condition, (prefers-color-scheme: light) or (prefers-color-scheme: dark), and the browser uses the first one that matches.

<meta name="color-scheme" content="light dark"> goes further. It tells the browser your page works both ways, so its own parts, like form boxes and scroll bars, can turn dark too.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pip's Plants</title>
    <meta name="theme-color" content="#2e7d32" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#0f2e12" media="(prefers-color-scheme: dark)">
    <meta name="color-scheme" content="light dark">
  </head>
  <body>
    <h1>Pip's Plants</h1>
  </body>
</html>

Press show my page to see it here.

Not every browser paints its bar, so the theme colour is a finishing touch, never something the page needs.