Темная тема для сайта
В этом материале рассмотрим, как добавить переключатель темной темы на сайт. Темная тема снижает нагрузку на глаза при просмотре сайта в темное время суток, улучшает восприятие содержимого и делает навигацию более комфортной. Она становится все популярнее среди пользователей, особенно у тех, кто активно работает или проводит много времени в интернете по ночам.
Преимущества ночного режима:
- уменьшает усталость глаз при длительном использовании;
- экономит заряд батареи на устройствах с OLED и AMOLED-экранами;
- придаёт сайту более современный вид.
Пошаговая инструкция по добавлению переключателя темной темы
1. Загрузка необходимых файлов на сайт
Перейдите в «Файловый менеджер» и загрузите файлы darktheme.js и darktheme.css в папки js и css соответственно.
Загрузить darktheme.css Загрузить darktheme.js
2. Установка кода для кнопки переключателя темы
Перейдите в «Дизайн» → «Управление дизайном» → «Редактирование шаблонов» → «Верхняя часть сайта» и добавьте после блока поиска следующий код:
<svg style="position:absolute;top:-10000px;left:-10000px"> <symbol id="sun_icon" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </symbol> <symbol id="moon_icon" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path> </symbol> </svg> <button id="dm_btn" class="dm-btn"> <svg class="svg-icon-24"><use xlink:href="#sun_icon"></use></svg> </button>
3. Импорт стилей темной темы
Перейдите в шаблон «Таблица стилей (CSS)» и добавьте в самом начале следующий код для импорта файла стилей темной темы:
@import url('/css/darktheme.css');
4. Подключение скрипта
Перейдите в «Дизайн» → «Управление дизайном» → «Редактирование шаблонов» → «Нижняя часть сайта» и добавьте в самом конце следующую строку кода:
<script type="module" async src="/js/darktheme.js"></script>
После выполнения этих шагов на вашем сайте появится переключатель для темной темы, который пользователи смогут использовать для смены оформления.
FAQ по работе с темной темой
1. Как изменить цветовую схему?
Чтобы изменить цветовую схему, отредактируйте переменные в файле darktheme.css:
.dark-mode {
--dark-color: #2b2b2b;
--tpl-border-line-100: 1px solid var(--tpl-dark-300);
--tpl-border-line: 2px solid var(--tpl-dark-200);
--tpl-dark-900: #e5e5e5;
--tpl-dark-800: #d1d1d1;
--tpl-dark-700: #e5e5e5;
--tpl-dark-600: #9e9e9e;
--tpl-dark-500: #858585;
--tpl-dark-400: #9e9e9e;
--tpl-dark-300: #525252;
--tpl-dark-200: #383838;
--tpl-dark-100: #1f1f1f;
--tpl-ovelay: rgba(229, 229, 229, 0.5);
--tpl-ovelay-dark: rgba(0, 0, 0, 0.5);
--tpl-panel-shadow: 0 4px 14px 0 rgba(0, 0, 0, .13);
--tpl-accent-blue-dark: #2a53d3;
background-color: var(--dark-color);
}
2. Как изменить цвета кнопки переключения темы?
Отредактируйте CSS-код, отвечающий за стили кнопки переключения темы. В файле darktheme.css найдите следующие переменные:
.dm-btn {
--dm-btn-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 -2px 2px rgba(0, 0, 0, .1);
--dm-btn-bg: var(--tpl-accent-white);
--dm-btn-color: var(--tpl-accent-blue);
}
.dark-mode .dm-btn {
--dm-btn-shadow: inset 0 4px 6px rgba(0, 0, 0, .1), inset 8px 0 8px rgba(0, 0, 0, .1), inset 0 -4px 4px rgba(0, 0, 0, .1);
--dm-btn-bg: var(--tpl-accent-blue);
--dm-btn-color: #fff;
}
3. Как задать параметры элементу?
Чтобы задать не только цвет, но и другие стили элементу, можно использовать такие переменные:
.dark-mode {
--background-color: #2b2b2b;
--text-color: #ffffff;
--font-size: 16px;
--padding: 10px;
}
Пример применения этих переменных к элементу:
.myblock {
background-color: var(--background-color);
color: var(--text-color);
font-size: var(--font-size);
padding: var(--padding);
}
Добавьте класс .dark-mode к родительскому элементу в HTML:
<div class="dark-mode"> <div class="myblock"> Ваш контент здесь </div> </div>
4. Как убрать привязку в скрипте к теме браузера?
По умолчанию скрипт автоматически переключает темы в зависимости от темы браузера или операционной системы пользователя. Чтобы убрать эту привязку, замените следующий участок кода в файле darktheme.js:
const getPreferredTheme = () => {
const mode = localStorage.getItem("darkmode");
if (mode) {
return mode === "true";
} else {
return darkModeMediaQuery.matches;
}
};
на этот:
const getPreferredTheme = () => localStorage.getItem("darkmode") === "true";
5. Как сменить тему в "Мини-чате"?
Для смены темы в расширении "Мини-чат", замените в скрипте darktheme.js участок кода:
const applyMode = (isDarkMode, fromListener = false)=>{
document.body.classList.toggle('dark-mode', isDarkMode);
toggleBtnState(isDarkMode, fromListener);
localStorage.setItem('darkmode', isDarkMode)
};
на следующий:
const applyMode = (isDarkMode, fromListener = false)=>{
document.body.classList.toggle('dark-mode', isDarkMode);
toggleBtnState(isDarkMode, fromListener);
localStorage.setItem('darkmode', isDarkMode);
[...document.querySelectorAll('iframe[src="/mchat/"]')].forEach(({contentWindow: {document}}) => {
const toggleDark = () => document.body?.classList.toggle('dark-mode', isDarkMode);
document.addEventListener('DOMContentLoaded', () => toggleDark());
toggleDark();
});
};
Далее в файле darktheme.css к основному классу .dark-mode добавьте также класс .mchat-body.dark-mode:
.dark-mode, .mchat-body.dark-mode {
/* Остальные стили темной темы */
}
6. Как добавить темную тему в свой шаблон?
Чтобы использовать данное решение на другом шаблоне сайта, потребуется внести некоторые правки в файлы CSS и JavaScript, чтобы адаптировать стили под конкретный шаблон.
Шаг 1. Загрузка файлов и добавление кода
Убедитесь, что файлы darktheme.js и darktheme.css загружены и корректно подключены к вашему шаблону.
Шаг 2. Правки файла стилей darktheme.css
Откройте файл darktheme.css и проанализируйте его содержимое. Внесите такие изменения:
- Определите переменные цветов, которые будут соответствовать вашему шаблону.
- Примените эти переменные к нужным элементам вашего сайта.
Шаг 3. Настройка стилей для конкретного шаблона
Для каждого элемента, который вы хотите адаптировать под тёмную тему, добавьте CSS-правила. Например:
.dark-mode {
--main-bg-color: #333; /* Фон главного контейнера */
--text-color: #fff; /* Цвет текста */
--link-color: #8cd9d6; /* Цвет ссылок */
/* Другие переменные и стили */
}
Шаг 4. Проверка и настройка
После внесения всех правок сохраните файлы и проверьте работу темной темы на сайте. При необходимости используйте инструменты разработчика браузера для отладки и настройки стилей.