Как сделать смену темы для js работающую при подключении в head?

Question

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

На проектах реализую код, который реализует добавление класса .dark и тем самым создаётся тёмная тема. Но минус скрипта в том, что подключается он в перед body, после загрузки DOM и на долю секунды показывается светлая тема при обновлении страницы.

Как реализовать так чтобы исправить этот баг? Как вы вообще создаёте тёмные темы на js?

Answer 1

[Александр Талалаев]

1. Используй prefers-color-scheme, который посторается взять тему выбранную пользователем в ОС или браузере.
2. Храни настройки своего сайта в кукис и перед отправкой клиенту делай соответсвующие изменения, тогда не будет эффекта блика.
ИЛИ
2.1 Экран предзагрузки, который ничего не показывает и подгружает всё, применяет всё(допустим в локалсторадже ты сохранил), потом показывает уже сам сайт.

Comments

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

А можно пожалуйста практический пример с 2.1 ?

[Алексей Дубровин]

Алексей Королёв, Прелоадер на сайт