Vincent Tourraine
Blog

Notes WWDC 2019 : Supporting Dark Mode in Your Web Content

#dev #macOS #iOS #web

Référence : Session 511 - Supporting Dark Mode in Your Web Content

Dark Mode supported in:

Dark Mode in web content

Let the rendering engine know that both styles are supported, and changes the default text and background colors:

:root {
        color-scheme: light dark;
      } 
      

Use CSS variables to adapt to Dark Mode, with media queries:

:root {
        color-scheme: light dark;
        --post-title-color: #333;
      }
      
      @media (prefers-color-scheme: dark) {
        :root {
          --post-title-color: white;
        }
      }
      
      h1 {
        color: var(--post-title-color);
      }
      

For images:

<picture>
        <source srcset="night.jpg" media="(prefers-colour-scheme: dark)">
        <img src="day.jpg">
      </picture>
      

Dark Mode in email messages

Tools to debug Dark Mode