CSS Media Features - prefers-color-scheme

CSS prefers-color-scheme media feature is used to determine whether a user prefers a light or dark theme. The user can choose their preferred color mode in their device settings or browser settings ,such as light or dark mode.

Embedded elements

  • You can use the prefers-color-scheme CSS feature to change the look of SVGs and iframes based on the color scheme of the web page they're embedded in. SVGs must be used as images (<img src="circle.svg" alt="circle" />) instead of being put directly in the HTML.

  • Cross-origin SVGs and iframes can also use prefers-color-scheme. Cross-origin elements are elements that are loaded from a different website than the one you're currently on.

Possible Values

  • light − This value indicates the light color theme.

  • dark − This value indicates the dark color theme.

Syntax

prefers-color-scheme: light|dark;

CSS prefers-color-scheme - light Value

The following example demonstrates that the element will be displayed as a violet background with blue text, even if the user has requested a light color theme in their operating system settings −

<html>
<head>
<style>
   .light-theme {
      background-color: red;
      color: white;
   }
   @media (prefers-color-scheme: light) {
      .light-theme {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <div class="light-theme">
      This is a light theme.
   </div>
</body>
</html>

CSS prefers-color-scheme - dark Value

The following example demonstrates that the element has a red background color and black text color by default. The element will be displayed as a violet background with blue text, even if the user has requested a dark color theme in their operating system settings −

<html>
<head>
<style>
   .dark-theme {
      background-color: red;
      color: white;
   }
   @media (prefers-color-scheme: dark) {
      .dark-theme {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <div class="dark-theme">
      This is a dark theme.
   </div>
</body>
</html>

CSS prefers-color-scheme - Detecting a Dark or Light Theme

The following example demonstrates that the @media (prefers-color-scheme: dark) and @media (prefers-color-scheme: light) media queries will apply different styles to the .theme class depending on the user's preferred color theme −

<html>
<head>
<style>
   .theme {
      background: green;
      color: white;
   }
   @media (prefers-color-scheme: dark) {
      .theme.dark-theme {
      background: red;
      color: white;
      }
   }
   @media (prefers-color-scheme: light) {
      .theme.light-theme {
      background: yellow;
      color: blue;
      }
   }
</style>
</head>
<body>
   <p class="theme">Default Theme. The element will be displayed as a green background with white text.</p>
   <p class="theme dark-theme">If the user has requested a dark color theme in their operating system the element will be displayed as a red background with white text.</p>
   <p class="theme light-theme">If the user has requested a light color theme in their operating system the element will be displayed as a yellow background with blue text.</p>
</body>
</html>

CSS prefers-color-scheme - Color Scheme Inheritance

The following example demonstrates how to use the prefers-color-scheme CSS media feature to display different SVG images based on the user's preferred color theme.

In this example, JavaScript is used to create three SVG images: one with a pink background color, one with a violet background color, and one with a background color that is determined by the user's preferred color theme.

Here is an example −

<html>
<head>
</head>
<body>
   <div>
      <img />
   </div>
   
   <div style="color-scheme: light">
      <img />
   </div>
   <div style="color-scheme: dark">
      <img />
   </div>
   
   <script>
      document.querySelectorAll("img").forEach(function(img) {
      img.alt = "square";
      img.src =
         "data:image/svg+xml;base64," +
         btoa(`
         <svg width="100" height="100" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <style>
            :root { color: pink }
            @media (prefers-color-scheme: light) {
               :root { color: violet }
            }
            </style>
            <rect fill="currentColor" x="2" y="2" width="16" height="16"/>
         </svg>
      `);
      });
   </script>
</body>
</html>
Advertisements