Adding "dark mode" to my blog

Ich habe Jeremy Keith's post about adding dark mode to his blog und es schien einfach zu sein, also habe ich beschlossen, es auszuprobieren.

Hier ist das diff of the work für alle zu sehen. Es war überraschend einfach (abgesehen von albernen Fehlern meinerseits). Es gab einen kleinen Refaktor zur Unterstützung von CSS-Variablen und um sicherzustellen, dass ich einen Fallback habe, wenn es einen Browser gibt, der keine benutzerdefinierten CSS-Eigenschaften unterstützt. Ich habe so ziemlich dasselbe gemacht wie Jeremy.

In Chrome gab es keine DevTools-Unterstützung, mit der ich das I hear it’s coming ( I hear it’s coming ) emulieren konnte. I hear it’s coming habe ich eine einfache CSS-Klasse erstellt, die ich meinem HTML-Element hinzufügen konnte, um es schnell zu testen (siehe unten).

@media (prefers-color-scheme: dark) {
  html {
    --background-color: rgb(36, 36, 36);
    --text-color: #fefefe;
    --block-quote-before-color: #333;
    --link-color-visited: #7ad857;
    --post-shadow: #333;
  }

  .post.moi a[rel=me] img {
    filter: invert(0.8);
  }
}

html.dark {
  --background-color: rgb(36, 36, 36);
  --text-color: #fefefe;
  --block-quote-before-color: #333;
  --link-color: #1bcba2;
  --link-color-visited: #7ad857;
  --post-shadow: #333;
}

html.dark .post.moi a[rel=me] img {
  filter: invert(0.8);
}

Nicht

Picture of me smiling.

Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

RSS Github Medium