Знает кто js скрипт смены темы, который стабильно работает при переходе по страницам?

Question

[Алексей Королёв]

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

Сейчас использую этот:

// Theme swither

function setDarkTheme()
{
    document.documentElement.classList.remove("light");
    document.documentElement.classList.add("dark");
    localStorage.setItem("theme", "dark");
}

function setLightTheme()
{
    document.documentElement.classList.remove("dark");
    document.documentElement.classList.add("light");
    localStorage.setItem("theme", "light");
}

function setPreferredTheme()
{
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      setDarkTheme();
    } else {
      setLightTheme();
    }
}

function isDarkTheme()
{
  return localStorage.getItem("theme") == "dark";
}

function setChoosenTheme()
{
    let theme = localStorage.getItem("theme");
  
    if (theme == "dark")
    {
        setDarkTheme();
    } else if (theme == "light")
    {
        setLightTheme();
    }
    else
    {
        setPreferredTheme();
    }
}

function toggleDarkMode() {
  if (isDarkTheme()) {
    setLightTheme();
  } else {
    setDarkTheme();
  }
}

window.matchMedia('(prefers-color-scheme: dark)').onchange = (e) => setChoosenTheme();

setChoosenTheme();

Answer 1

[historydev]

function setDarkTheme()
{
    localStorage.setItem('theme', 'dark');
}

document.body.onload = () => {

  const theme = localStorage.getItem('theme');

  if(theme) {

     if(theme === 'dark') {

          document.documentElement.classList.remove("light");
          document.documentElement.classList.add("dark");
          localStorage.setItem("theme", "dark");

     } else if(1 !== 2) {
         //another theme
     }

  }

}

Comments

[ThunderCat]

Подозреваю как раз из-за ожидания загрузки документа, смена темы будет видна ооочень хорошо...

[historydev]

ThunderCat, в вопросе нет нюансов, есть одно условие - смена темы) И если на то пошло, то эти классы при загрузке документа нужно назначать и вбивать в хранилище имя стандартной темы) Я бы такое в базе хранил у юзера, но здесь простейший пример)

[ThunderCat]

Владимир,

в вопросе нет нюансов,

все скрипты которые юзал, при переходе по страницам на долю секунды сбрасывается и показывается светлая, если находишься в тёмной и наоборот.

[historydev]

ThunderCat, будет эффект аналогичный загрузке страницы, тема будет всегда та, которая выбрана, не будет пересменки

[historydev]

ThunderCat, мы же не видим весь код) Мы видим только код темы, соответственно можно только гадать что там есть

[Алексей Королёв]

Всё просто, в css через root указаны переменные:

:root,
 :root.light {
--a-color-body: #fff;
}

 :root.dark { 
--a-color-body: #000000;
}

и переключатель:

<div class=" form-switch ">
               <input class="form-check-input" onClick="toggleDarkMode()" type="checkbox" role="switch" id="flexSwitchCheckDefault" >
               <label class="form-check-label switcher_label" for="flexSwitchCheckDefault">сменить тему</label>
            </div>

А как твой скрипт работает с css и html? Попробовал вставить его вместо своего и не работает.

[historydev]

Алексей Королёв, серьёзно? У тебя пример с классами, я использовал его) Посмотри внимательней, удаляю класс и добавляю новый, тебе нужно лишь добавить стили этим классам