Реализация темной темы в jekyll
Я пытаюсь добавить на свой сайт Jekyll простой переключатель светлого / темного режима.
Сейчас я настроил это так, что в теле есть класс dark, который переключается на класс light при переключении, а тема сохраняется в localStorage и загружается всякий раз, когда пользователь переходит на новую страницу. В SCSS просто есть селекторы для .dark и .light, которые будут отображать соответствующую цветовую схему.
Проблема с этим подходом заключается в том, что моей темой по умолчанию является dark, поэтому, если тема установлена на light, будет очень четкая 0,2-секундная вспышка, поскольку классы переключаются с dark на light, когда я загружаю новую страницу.
Я попытался решить проблему, установив visibilty тела на hidden, а затем снова сделав его visible после переключения, но, к сожалению, этот подход приводит к еще одной раздражающей вспышке / задержке, и нет хорошего способа остановить его мигание на каждой странице нагрузка.
Вот некоторые из потенциальных решений, о которых я подумал, но не знаю, возможны ли они и как их реализовать:
Пусть Jekyll каким-то образом прочитает из
localStorageи изменит класс визуализированного HTML на основе этого (возможно, лучшее решение, но также, вероятно, невозможно)Каким-то образом Jekyll создает две отдельные таблицы стилей из SCSS и использует JS для выбора правильной.
Буду признателен за любую информацию о том, как это сделать или возможные альтернативные решения, спасибо!
это действительно не -_- - на самом деле я должен прояснить свой вопрос, так как я знаю, что третий вариант не совсем жизнеспособен и просто запутает людей и даст мне ненужные ответы
Почему бы просто не скрыть контент по умолчанию, а когда он закончит загрузку, показать его?
Потому что даже когда я жду переключения, все еще есть кратковременное мерцание, когда они переходят из скрытого в видимый.
Находятся ли темы Светлый темный в одной таблице стилей или в двух разных таблицах? для каждого цвета фона и цвета в обоих стилях имеют одинаковую продолжительность перехода и плавность? Я думаю, что наличие двух таблиц стилей создаст проблему вместо одной таблицы стилей. с помощью scss вам не составит труда управлять ими.
не используйте свойство видимости в html или теле, это плохая идея, посмотрите, как вы добавляете и удаляете классы. Я предлагаю использовать комбинаторные классы, такие как .theme.dark, .theme.light
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Что вы хотите, согласно пункту 3,
Implement some kind of fade in/fade out when changing the visibility from hidden to visible
является --
Пример использования для демонстрации эффекта простоты при изменении свойства CSS:
body {
transition: background 1s ease-in, color 1s ease-in;
}
.dark {
color: white;
background: black;
}<body>
<p> Lorem Ipsum dolor sit amet... </p>
<button onclick = "document.body.classList.toggle('dark')">Change Theme</button>
</body>Это не работает с видимостью, так как это просто двоичный видимость / скрытие
Используйте opacity вместо visibility.
Итак, разбивая это:
- Поскольку вы используете генератор статического сайта, вы можете применить темную или светлую тему только после того, как выполняется небольшой фрагмент Javascript для определения и установки темы.
- Это приводит к некоторой задержке / миганию содержимого при выполнении Javascript.
Я думаю, что использование генератора статических сайтов означает, что чтение из localStorage и применение тематического класса с Javascript - это совершенно хороший подход. На мой взгляд, есть два возможных подхода к минимизации проблемы с миганием, которые не связаны с изменением архитектуры с сайта Jekyll.
Выполняйте Javascript раньше, так как содержимое страницы загружается:
Поскольку единственный элемент DOM, который необходимо загрузить, - это сам элемент <html>, к которому вы можете применить класс темы, вы можете поместить свой «критический» Javascript в небольшой тег скрипта внутри <head>. то есть просто строка кода, переключающая тему.
Затем он должен выполняться сразу перед загрузкой содержимого.
Используйте переходы CSS, чтобы минимизировать саму вспышку:
Вы можете скрыть содержимое страницы, пока элемент <html> не имеет класса тем, и затемнить его, как только он будет применен следующим образом:
html {
opacity: 0;
transition: opacity 1s;
}
html.light, html.dark {
opacity: 1;
}
У меня была та же проблема, и я исправил ее, выполнив JavaScript сразу после тега start body.
Я пробовал это на своем локальном компьютере, он отлично работает, хотя я не использую простой переход js или jekyll. Пусть js выполняет переключение классов и больше ничего. пусть переход выполняется css. используйте одну таблицу стилей.
.theme {
&.dark {
background: #000;
color: #fff;
}
&.light {
background: #fff;
color: #000;
}
transition:background-color 200ms ease-in-out, color 200ms ease-in-out;
}
<body class = "body theme dark"> <!-- just switch dark to light class-->
<h1 class = "sticky">Thank you</h1>
<div class = "row" id = "bindlinkTempl"></div>
<script src = "js/dist/app.js"></script>
</body>
Никакого javascript не требуется, с медиа-запросом prefers-color-scheme:
@media (prefers-color-scheme: dark) {
// Styles for dark mode here
body { background-color: #222 }
...
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Возможный дубликат Устранение вспышек нестилизованного контента