Реализация темной темы в jekyll

Я пытаюсь добавить на свой сайт Jekyll простой переключатель светлого / темного режима.

Сейчас я настроил его так: в теле есть класс dark, который переключается на класс light при переключении, а тема сохраняется в localStorage и загружается всякий раз, когда пользователь переходит на новую страницу. В SCSS просто есть селекторы для .dark и .light, которые будут отображать соответствующую цветовую схему.

Проблема с этим подходом заключается в том, что моя тема по умолчанию - dark, поэтому, если для темы задано значение light, будет очень четкая 0,2-секундная вспышка, когда классы переключаются с dark на light, когда я загружаю новую страницу.

Я попытался решить эту проблему, установив visibilty тела на hidden, а затем снова сделав visible после переключения, но, к сожалению, этот подход приводит к еще одной раздражающей вспышке / задержке, и нет хорошего способа остановить его мигание на каждой странице нагрузка.

Вот некоторые из возможных решений, о которых я подумал, но не знаю, возможны ли они и как их реализовать:

  1. Пусть Jekyll каким-то образом прочитает localStorage и изменит класс визуализированного HTML на основе этого (возможно, лучшее решение, но также, вероятно, невозможно)

  2. Каким-то образом заставить Jekyll создать две отдельные таблицы стилей из SCSS и использовать JS для выбора правильной.

    Буду признателен за любую информацию о том, как это сделать или возможные альтернативные решения, спасибо!


javascript html css fouc
person Meme Overlord    schedule 18.10.2018    source источник
comment
Возможный дубликат Устранение вспышки нестилизованного содержимого   -  person David Jacquel    schedule 18.10.2018
comment
это на самом деле не -_- - на самом деле я должен прояснить свой вопрос, так как я знаю, что третий вариант на самом деле нецелесообразен и просто запутает людей и даст мне ненужные ответы   -  person Meme Overlord    schedule 18.10.2018
comment
Почему бы просто не скрыть контент по умолчанию, а когда он закончит загрузку, показать его?   -  person BladeMight    schedule 24.10.2018
comment
Потому что даже когда я жду переключения, все еще есть кратковременное мерцание, когда они переходят из скрытого в видимый.   -  person Meme Overlord    schedule 25.10.2018
comment
Находятся ли темы Светлая и Темная в одной таблице стилей или в двух разных таблицах? для каждого цвета фона и цвета в обоих стилях имеют одинаковую продолжительность перехода и плавность? Я думаю, что наличие двух таблиц стилей создаст проблему вместо одной таблицы стилей. с помощью scss вам не составит труда управлять ими.   -  person vssadineni    schedule 31.10.2018
comment
не используйте свойство видимости в html или теле, это плохая идея, посмотрите, как вы добавляете и удаляете классы. Я предлагаю использовать комбинаторные классы, такие как .theme.dark, .theme.light   -  person vssadineni    schedule 31.10.2018

Ответы (4)


arrow_upward
7
arrow_downward

Итак, разбив это на части:

  • Поскольку вы используете генератор статического сайта, вы можете применить темную или светлую тему только после того, как выполняется небольшой фрагмент Javascript для определения и установки темы.
  • Это приводит к некоторой задержке / миганию содержимого при выполнении Javascript.

Я думаю, что использование генератора статических сайтов означает, что чтение из localStorage и применение тематического класса с Javascript - это совершенно хороший подход. На мой взгляд, есть два возможных подхода к минимизации проблемы с миганием, которые не связаны с изменением архитектуры с сайта Jekyll.

Выполняйте Javascript раньше, так как содержимое страницы загружается:

Поскольку единственный элемент DOM, который необходимо загрузить, - это сам элемент <html>, к которому вы можете применить класс темы, вы можете поместить свой «критический» Javascript в небольшой тег скрипта внутри <head>. то есть просто строка кода, переключающая тему.

Затем он должен выполняться сразу до загрузки содержимого.

Используйте переходы CSS, чтобы свести к минимуму сам Flash:

Вы можете скрыть содержимое страницы, пока элемент <html> не имеет класса тем, и затемнить его, как только он будет применен следующим образом:

html {
    opacity: 0;
    transition: opacity 1s;
}

html.light, html.dark {
    opacity: 1;
}
person Sam    schedule 25.10.2018
comment
У меня была та же проблема, и я исправил ее, выполнив JavaScript сразу после тега start body. - person Gerard; 26.12.2020

arrow_upward
2
arrow_downward

Что вы хотите, согласно пункту 3,

Реализовать какое-то исчезновение / исчезновение при изменении видимости со скрытого на видимый

is --

Переходы CSS

Пример использования для демонстрации эффекта простоты при изменении свойства 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>

person pavi2410    schedule 18.10.2018
comment
Это не работает с видимостью, поскольку это просто двоичный видимость / скрытие - person Meme Overlord; 18.10.2018
comment
Используйте opacity вместо visibility. - person Herman Starikov; 26.10.2018

arrow_upward
0
arrow_downward

Я пробовал это на своем локальном компьютере, он отлично работает, хотя я не использую простой переход 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>
person vssadineni    schedule 31.10.2018

arrow_upward
0
arrow_downward

Никакого 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.

person Eneko Alonso    schedule 18.06.2020