В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован функционал изменения стиля сайта темный/светлый, опираясь на настройки пользовательской системы либо по времени суток либо с помощью кнопки.
Расположение компонента
Файлы компонента находятся в папке src/components/effects/darklite, здесь вы найдете JS-файл компонента и SCSS-файл для стилизации
Использование компонента
Добавьте на свою HTML-страницу дата-атрибут data-fls-darklite, например к тегу <html>:
<html data-fls-darklite>Этого достаточно, чтобы компонент распознал настройки системы пользователя и добавил соответствующий дата-атрибут к тегу <html>: data-fls-darklite-light или data-fls-darklite-dark
Если вы хотите, чтобы атрибуты стиля добавлялись по времени суток, добавьте атрибут data-fls-darklite-time:
<html данные-fls-darklite данные-fls-darklite-time>Теперь атрибут data-fls-darklite-dark будет добавляться с 18 часов вечера до 5 часов утра, все остальное время будет добавляться атрибут data-fls-darklite-light
Для настройки собственного промежутка в котором будет добавляться атрибут data-fls-darklite-dark, укажите для атрибута data-fls-darklite-time значение через запятую:<html data-fls-darklite data-fls-darklite-time=»13,23″>
Теперь атрибут data-fls-darklite-dark будет добавляться в промежутке с 13 часов до 23 часов
Если вы хотите предоставить пользователю возможность включать ту или иную тему сайта, добавьте в ваш интерфейс кнопку с дата-атрибутом data-fls-darklite-set:
<button data-fls-darklite-set>...</button>При нажатии кнопки текущая тема сменится на противоположную, и в браузере пользователя будет сохранен его выбор.
Чтобы предоставить пользователю возможность удалять сохраненный выбор темы, добавьте в ваш интерфейс кнопку с дата-атрибутом data-fls-darklite-reset:
<button data-fls-darklite-reset>...</button>