Тёмная тема сайта
Я приведу пример как сделать тёмную тему на своём сайте. Переключение темы на светлую и тёмную будет мгновенным, без перезагрузки страницы. Выбор тёмной темы будет запоминать браузер, то есть выбранная тема сайта будет отображаться на всех страницах.
Выбор тёмной или светлой темы на сайте, будем делать с помощью html, css и js.
Для начала подготовим CSS, в котором будут храниться настройки светлой и тёмной темы.
css
body {
--background-color: #fff;
--text-color: #111;
}
body.theme-dark {
--background-color: #111111;
--text-color: #eee;
}
--text-color это свойство которое задаётся элементам в зависимости от выбранной темы. Вам надо задать параметры для своих элементов. Например:
.news {
background: var(--text-color);
}
Теперь, в нужном месте страницы пропишем выбор темы сайта.
html
Тема: <select id="theme">
<option value="light">Светлая</option>
<option value="dark">Тёмная</option>
</select>
Внутри тега <head> вставим JavcaScript код.
js
<script>
function applyTheme(theme) {
document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
document.body.classList.add(`theme-${theme}`);
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#theme").addEventListener("change", function() {
applyTheme(this.value);
});
});
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "auto";
applyTheme(savedTheme);
for (const optionElement of document.querySelectorAll("#theme option")) {
optionElement.selected = savedTheme === optionElement.value;
}
document.querySelector("#theme").addEventListener("change", function () {
localStorage.setItem("theme", this.value);
applyTheme(this.value);
});
});
</script>
Скрипт переключает, мгновенно, на тёмную и светлую тему сайта, а также браузер запоминает выбранную тему и показывает на всех страницах сайта.