Ответ
Для реализации светлой и тёмной темы можно использовать CSS-переменные и localStorage для сохранения выбора пользователя.
<!-- HTML -->
<button id="themeToggle">Toggle Theme</button>/* CSS */
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
[data-theme="dark"] {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: all 0.3s ease;
}// JavaScript
const themeToggle = document.getElementById('themeToggle');
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
themeToggle.addEventListener('click', () => {
const theme = document.documentElement.getAttribute('data-theme');
if (theme === 'dark') {
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
});Также можно использовать prefers-color-scheme для автоматического определения темы системы:
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #333333;
--text-color: #ffffff;
}
}Ответ 18+ 🔞
А, вот эта тема про светлое и тёмное! Ну, это же классика, блядь, как Муму у Тургенева — все делают, а потом охуевают, почему не работает. Слушай сюда, я тебе сейчас на пальцах объясню, как это сделать, чтобы не было мудацких косяков.
Значит, суть в чём: ты на сайте делаешь две расцветки. Одна для белых и пушистых днём, другая — для ночных сов, которые в темноте сидят и глаза не ебут. И чтобы пользователь свой выбор не терял, когда страницу перезагрузит.
Вот смотри, как это по-пацански делается.
Разметка (HTML): Тут всё просто, как три копейки. Кнопочку делаем, которую тыкать будут.
<button id="themeToggle">Переключить тему</button>Стили (CSS): А вот тут уже начинается магия, блядь. Используем CSS-переменные — это такие штуки, которые можно менять на лету, как перчатки.
/* Это наши дефолтные, светлые цвета. Корневой селектор, запомни. */
:root {
--bg-color: #ffffff; /* Фон белый */
--text-color: #333333; /* Текст тёмный */
}
/* А это стили, которые включатся, когда на корне будет атрибут data-theme="dark" */
[data-theme="dark"] {
--bg-color: #333333; /* Фон тёмный */
--text-color: #ffffff; /* Текст светлый */
}
/* Применяем эти переменные к телу страницы */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: all 0.3s ease; /* Плавненько переключается, а не дергается, как сука */
}Логика (JavaScript): А это, блядь, самый сок. Тут мы и кнопку слушаем, и в память браузера (localStorage) пишем, чтобы выбор запомнился. Иначе пользователь обосрётся — выбрал тёмную тему, обновил страницу, а у него опять светлая, пиздец.
// Находим нашу кнопку-переключатель
const themeToggle = document.getElementById('themeToggle');
// Смотрим, а не выбрал ли юзер уже тему в прошлый раз?
const currentTheme = localStorage.getItem('theme');
// Если в памяти лежит 'dark', то сразу вешаем тёмную тему на страницу
if (currentTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
// Вешаем на кнопку слушатель клика
themeToggle.addEventListener('click', () => {
// Смотрим, какая тема сейчас активна
const theme = document.documentElement.getAttribute('data-theme');
if (theme === 'dark') {
// Если тёмная, то сносим её нахуй, возвращаем светлую
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('theme', 'light'); // Запоминаем выбор
} else {
// Если светлая (или её вообще нет), то включаем тёмную
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); // Запоминаем выбор
}
});Бонус для умных (Автоопределение системы): А ещё можно сделать так, чтобы сайт сразу подстраивался под настройки системы пользователя. Типа, если у него в системе тёмная тема, то и сайт сразу тёмный. Для этого в CSS медиа-запрос есть, ёпта.
@media (prefers-color-scheme: dark) {
/* Если система в тёмном режиме, то применяем эти стили КОРНЮ по умолчанию */
:root {
--bg-color: #333333;
--text-color: #ffffff;
}
}Но тут, блядь, осторожно! Если ты это добавишь, то у всех, у кого система в тёмной теме, сайт сразу будет тёмным, даже если они ничего не выбирали. А твоя JS-логика с localStorage должна это перебивать. Голову надо включать, а не просто копипастить!
Вот и вся история. Главное — не накосячить с приоритетами стилей и чётко записывать выбор пользователя. А то получится, как с Герасимом: захотел сделать хорошо, а в итоге всех утопил, блядь. Удачи!