Темная тема для сайта
В данном материале мы рассмотрим, как добавить переключатель темной темы на сайт. Темная тема помогает снизить нагрузку на глаза при просмотре сайта в темное время суток, улучшая восприятие содержимого и делая навигацию более комфортной. Она становится все популярнее среди пользователей, особенно тех, кто часто работает или проводит время в интернете по ночам.
Преимущества ночного режима включают уменьшение усталости глаз при длительном использовании сайта, экономию заряда батареи на устройствах с 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 xmlns="http://www.w3.org/2000/svg" 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"/> </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>
После выполнения всех шагов на вашем сайте в меню появится переключатель для темной темы, который пользователи смогут использовать для изменения темы.
Важно! Данное решение предназначено для Дизайна #2301. Убедитесь, что ваш сайт использует данный шаблон перед применением инструкции.
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);
}
Изменяя значения этих переменных, вы можете создать уникальную цветовую схему для своего сайта.
Как использовать пользовательские свойства CSS для создания переменных и их применения в веб-разработке вы можете ознакомиться по ссылке.
Примечание: Выбрать и посмотреть hex-коды всех цветов, вы можете здесь.
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. Как задать определенному элементу необходимые параметры?
Чтобы задать определенному элементу не только цвет, но и другие стили (размер, шрифт и т.д.), вы можете добавить новые переменные в класс .darkmode. Например:
.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);
}
В HTML добавьте класс .dark-mode к родительскому элементу:
<div class="dark-mode"> <div class="myblock"> Ваш контент здесь </div> </div>
4. Как убрать в скрипте привязку к теме браузера и ОС?
По умолчанию в скрипте есть условие, которое автоматически переключает темы в зависимости от темы браузера или операционной системы пользователя. Чтобы убрать эту зависимость, внесите следующие изменения в скрипт, заменив следующий участок кода:
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 к основному классу darkmode добавить класс мини-чата:
.dark-mode, .mchat-body.dark-mode {
*/ остальные стили темной темы */
}
6. Как добавить темную тему в свой шаблон?
Для создания темной темы на другом шаблоне сайта можно использовать данное решение, однако потребуется внесение некоторых правок в файлы CSS и JavaScript, чтобы адаптировать стили под конкретный шаблон.
Загрузка файлов и добавление кода
Для начала, добавьте код переключения темной темы на ваш сайт. Убедитесь, что файлы darktheme.js и darktheme.css загружены и правильно подключены к вашему шаблону.
Внесение правок в файл стилей darktheme.css
Откройте файл darktheme.css и проанализируйте его содержимое. В этом файле задаются переменные цвета и другие стили, которые определяют внешний вид темной темы. Вам потребуется внести следующие изменения:
- Определить переменные цветов, которые соответствуют вашему шаблону.
- Применить эти переменные к соответствующим элементам на вашем сайте.
Настройка стилей для конкретного шаблона
Для каждого элемента, который вы хотите адаптировать под темную тему, добавьте соответствующие правила CSS. Например:
.dark-mode {
--main-bg-color: #333; /* Фоновый цвет главного контейнера */
--text-color: #fff; /* Цвет текста */
--link-color: #8cd9d6; /* Цвет ссылок */
/* Другие переменные и стили */
}
Эти правила задают цвета и другие стили элементов на вашем сайте в темном режиме.
Применение темной темы
После внесения необходимых изменений сохраните файлы и проверьте работу темной темы на вашем шаблоне. При необходимости отладки или доработки стилей, используйте инструменты разработчика браузера для проверки и настройки стилей в реальном времени.
Следуя этим шагам, вы сможете успешно адаптировать темную тему к любому шаблону вашего сайта, сохраняя его уникальный стиль и обеспечивая удобство использования для пользователей.