Adding "dark mode" to my blog

Eu vi post about adding dark mode to his blog Jeremy Keith e parecia simples, então decidi dar uma volta.

Aqui está o diff of the work para todos verem. Foi surpreendentemente fácil (fora de erros bobos da minha parte). Havia um pequeno refator para suportar variáveis CSS e garantir que eu tivesse fallback se houver um navegador que não suporte propriedades personalizadas de CSS, mas é isso. Eu fiz praticamente a mesma coisa que Jeremy.

Não havia suporte ao DevTools no Chrome que permitisse imitar o modo escuro sendo definido ( I hear it’s coming ); portanto, criei uma classe CSS simples que poderia ser adicionada ao meu elemento HTML para testá-lo rapidamente (como mostrado abaixo).

@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);
}

Não no modo escuro

modo escuro

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium