Adding "dark mode" to my blog

Paul Kinlan October 14 2019

Available in: English(Original), Deutsch, Español, Français, 日本語, मानक हिन्दी, tiếng Việt, தமிழ், bahasa Indonesia, తెలుగు, Português

Я видел « post about adding dark mode to his blog Джереми Кейта, и это казалось простым, поэтому я решил post about adding dark mode to his blog его.

Вот diff of the work для diff of the work . Это было удивительно легко (за исключением глупых ошибок с моей стороны). Был небольшой рефакторинг для поддержки CSS-переменных и обеспечения того, чтобы у меня был запасной вариант, если есть браузер, который не поддерживает пользовательские свойства CSS, но это все. Я сделал почти то же самое, что сделал Джереми.

В Chrome не было поддержки DevTools, которая позволяла мне эмулировать заданный темный режим ( I hear it’s coming ), поэтому я создал простой класс CSS, который я мог бы добавить в свой HTML-элемент, чтобы быстро проверить его работу (как показано ниже).

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