- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Всем привет!
Экспериментирую и хочу сделать самую простую версию переключения темы, использую этот кейс - https://frontendtoday.ru/articles/dark-mode-best-practice/, вроде простой вариант с щелчком по кнопке и вроде все работает и вроде все устраивает, но есть баги.
Код оттуда же:
const button = document.querySelector('.button')
const currentTheme = localStorage.getItem('theme') || 'light'
button.addEventListener('click', function () {
const theme = localStorage.getItem('theme')
document.documentElement.setAttribute(
'data-theme',
theme === 'light' ? 'dark' : 'light',
)
localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light')
})
document.documentElement.setAttribute('data-theme', currentTheme)
Но происходит следующее:
Почему-то когда включена темная тема и переходишь со страницы на страницу, такое ощущение, ну вернее это видно глазом, как будто бы сначала прогружается светлая белая тема, а потом мгновенно становиться темная, это выглядит очень быстро как мелькание, мерцание, мигание и остается как и положено на темном варианте.
Я ещё сначала обернул все это в jQuery(document).ready, так оно мигало при каждом переходе, потом убрал document.ready и вроде перестало, но все равно иногда подмигивает.
Может быть это из-за того что js файл в футере, или этот код лучше перенести как-то в хеад перед вызовом css файла стилей. Или это связано с кешем, я уж и не знаю…
Заранее всем спасибо за ответы!обернул все это в jQuery(document).ready, так оно мигало при каждом переходе
Естественно. Сначала показывается, как написано в исходном коде, потом срабатывает JS.
потом убрал document.ready и вроде перестало, но все равно иногда подмигивает
Ну тоже естественно, потому что исходный CSS срабатывает до JS.
Если сайт на php, то лучше сразу атрибут добавлять, например в body. Тоесть js использовать для установки и удаления атрибута и запись в куки, а php нужен для установки атрибута сразу при загрузки страницы, чтобы ничего не моргало.
можно добавить body visibility hidden а при установке темы visibility visible
Ну тоже естественно, потому что исходный CSS срабатывает до JS.
Так, а что сделать, перенести JS до CSS?
Достаточно в head. Проверено. И да, хорошим тоном является при первом визите устанавливать тему на основе дефолтных настроек юзера.
Сайт то на php, но есть нюанс, используется плагин кэширования и страницы отдаются как бы готовыми. Может это как-то влияет?
Тогда мой вариант не подойдет.
Еще делают различные прелоадеры на css, которые после полной загрузки html с помощью js удаляются.
Достаточно в head. Проверено. И да, хорошим тоном является при первом визите устанавливать тему на основе дефолтных настроек юзера.
Да похоже вы правы по поводу head, это вроде работает(даже если скрипт ниже css), я прощелкал 100500 раз, вроде не мелькает вообще. Не, про хороший тон я хочу забыть, т.к. я хочу всего лишь самую простую на белом свете кнопку переключения тем, а она итак превращается в какого-то монстра.
Кстати пару слов о переносе скрипта из футера в хеад, там тоже приколы интересные:
JavaScript говорит мне, что мальчик хочешь на кнопку нажать, а ничего не выйдет, теперь скрипт выше кнопки и поэтому кнопки как бы и нет ХА-ХА – null тебе в ребро :), и в догонку ошибку - Uncaught TypeError: Cannot read properties of null, а ведь до этого все работало когда скрипт был в футере под кнопкой.
Хорошо JavaScript ты не с тем связался, помощь с вестсайдвутангклана подоспела, делаю как этот чувак советует - https://sebhastian.com/javascript-cannot-read-properties-of-null/, ведь мне нужно чтобы теперь кнопка работала со скриптом который в хеад, до кнопки и этот чел советует это:
document.addEventListener('DOMContentLoaded', () => {
let btnEl = document.getElementById("my-button");
btnEl?.addEventListener("click", () => alert("You clicked a button!"));
});
И это действительно работает, я не знаю почему и как, но перенос скрипта в хеад и изменение кода как тот чел советовал действительно сработал.
И все вроде бы работает, но все это мне жутко не нравится, ни то что скрипт теперь в хеад, сам скрипт какой-то страшный, плюс 100500 переменных в CSS, лучше бы я ссылку дал на расширение к браузеру Dark Reader, для этих любителей bdsm темных тем, то им в MS-DOS синий экран не нравится, то теперь белый, ну вот они же книги наверное читают, все книги 99% черное на белом, они же не говорят, дайте нам белое на черном, мы же по ночам читаем глазки напрягаем, это же бред какой-то :-), ладно это я шучу :-)