Я видел « 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);
}
Не темный режим

темный режим
