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

###

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium