Реализация темной темы в Jekyll - PullRequest
Новая
       25

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

0 голосов
/ 18 октября 2018

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

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

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

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 26 октября 2018

Итак, разобрав это:

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

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

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

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

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

Использование CSS-переходов для минимизации самой флэш-памяти:

Вы можете скрыть содержимое страницыв то время как элемент <html> не имеет класса тем и исчезает, как только применяется один из них: 

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

html.light, html.dark {
    opacity: 1;
}
0 голосов
/ 31 октября 2018

Я попробовал это на моем локальном компьютере, он работает нормально, хотя я не использую 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>
0 голосов
/ 18 октября 2018

То, что вы хотите, в соответствии с пунктом 3,

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

- это -

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>
...