Как правильно сделать переключение темы?

Question

[Windramix]

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

Если у боди класс определённый, если есть класс будут одни стили если его нету то другие

Но возникла мини проблема, когда начинается отрисовка сайта пока не появится body js не сможет повесить на него нужный класс темы. из-за этого момента если я допустим сижу на белой теме то у меня на несколько сек стоит чёрная тема потому что она в дефолте если нету класса у body а когда js сработает из-за того что появилась body то он вешает класс и тема меняется на белую. Получается что при каждой перезагрузки постоянная тема дёргается с чёрной на белую. (я ставил что бы js загружалась первой но толку от этого если body нету и ей некуда весить класс.)

smirno.temp.swtest.ru

вот js

function setTheme(themeName) {
            localStorage.setItem('theme', themeName);
            document.body.className = themeName;

            // Переключение лого и текста
            var logoDark = document.querySelectorAll('#logo-dark');
            var logoWhite = document.querySelectorAll('#logo-white');
            var switchTextDark = document.querySelectorAll('#switch__text-dark');
            var switchTextLight = document.querySelectorAll('#switch__text-light');


            if (themeName === 'root') {
                logoWhite.forEach(function(logo) {
                    logo.style.display = 'none';
                });
                logoDark.forEach(function(logo) {
                    logo.style.display = 'block';
                });
                switchTextDark.forEach(function(text) {
                    text.style.display = '';
                });
                switchTextLight.forEach(function(text) {
                    text.style.display = 'none';
                });



            } else {
                logoWhite.forEach(function(logo) {
                    logo.style.display = 'block';
                });
                logoDark.forEach(function(logo) {
                    logo.style.display = 'none';
                });
                switchTextDark.forEach(function(text) {
                    text.style.display = 'none';
                });
                switchTextLight.forEach(function(text) {
                    text.style.display = '';
                });
            }
        }
        function toggleTheme() {
            if (localStorage.getItem('theme') === 'root') {
                setTheme('light-theme');
            } else {
                setTheme('root');
            }
        }
        (function () {
            document.querySelectorAll('#logo-dark, #logo-white').forEach(function(logo) {
                logo.style.display = 'none';
            });
            if (localStorage.getItem('theme') === 'root') {
                setTheme('root');
                document.querySelectorAll('#slider').forEach(function(slider) {
                    slider.checked = false;
                });
            } else {
                setTheme('light-theme');
                document.querySelectorAll('#slider').forEach(function(slider) {
                    slider.checked = true;
                });
            }
        })();

вот стили

body {
  font-size: 16px;
  font-family: "Montserrat", sans-serif !important;
  font-style: normal;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.7;
}
:root {
  --background-color: #333;
  --text-color: #EEEEEE;
  --button-color: #AD5B5C;
  --border-color: #525252;
  --selected-block-color: #303030;
  --selected-input-color: #303030;
  --pagination-color: #FFFFFF;
  --burger-color: #EEEEEE;
  --table-selected-color: #525252;
}

body.light-theme {
  --background-color: #fff;
  --text-color: #333;
  --button-color: #AD5B5C;
  --border-color: #D7D7D7;
  --selected-block-color: #f4f4f4;
  --selected-input-color: #F8F8F8;
  --pagination-color: #CDCDCD;
  --burger-color: #AD5B5C;
  --table-selected-color: #f5f5f5;
}

Подскажите может что-то я упустил что можно добавить , или в каком направление двигаться ? (Прелоудер не рассматриваю)

Answer 1

[Сергей delphinpro]

Все что нужно для переключения темы:

Инициализация при загрузке, максимально короткий скрипт. При желании можно добавить проверку на пользовательские предпочтения prefer-color-theme

<head>
    <script>
        const theme = localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-color-theme', theme);
    </script>

Код переключателя

document.querySelectorAll('.theme-toggle').forEach(el => {
    el.addEventListener('click', () => {
        const theme = document.documentElement.getAttribute('data-color-theme') === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-color-theme', theme);
        localStorage.setItem('color-theme', theme);
    });
});

И стили

:root {
  --body-bg: white;
}
[data-color-theme="dark"] {
  -body-bg: black;
}

Разумеется, вместо атрибута можно вешать класс

document.documentElement.classList.add('dark-theme');
:root {
  --body-bg: white;
}
html.dark-theme {
  -body-bg: black;
}