Сегодня мы поговорим о том, как создать сайт с возможностью выбора светлой и темной темы по умолчанию. Это становится все более популярным, так как пользователи могут выбирать тему, которая им наиболее комфортна для их глаз.
Основы создания темной и светлой темы
Для создания двух тем на вашем сайте, вам потребуется использовать CSS-переменные и JavaScript. CSS-переменные позволят вам легко управлять значениями цвета и другими стилевыми параметрами, которые будут изменяться при смене темы.
Создание CSS-переменных
Для начала, определите основные цвета и стили для светлой и темной темы, используя CSS-переменные. Например:
:root {
--background-color: #ffffff;
--text-color: #000000;
--link-color: #007bff;
}
[data-theme="dark"] {
--background-color: #000000;
--text-color: #ffffff;
--link-color: #00b0ff;
}
Теперь вы можете использовать эти переменные в вашем CSS:
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
Использование JavaScript для смены темы
Чтобы пользователь мог переключаться между темами, вам нужно использовать JavaScript. Создайте функцию для смены темы и добавьте обработчик событий для кнопки переключения:
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", newTheme);
}
document.getElementById("theme-switcher").addEventListener("click", toggleTheme);
Установка темы по умолчанию
Чтобы определить тему по умолчанию, вы можете использовать предпочтения пользователя по осветлению системы. Воспользуйтесь функцией window.matchMedia для определения предпочтений пользователя и установки соответствующей темы:
function setDefaultTheme() {
const userPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
document.documentElement.setAttribute("data-theme", userPrefersDark ? "dark" : "light");
}
setDefaultTheme();
Теперь ваш сайт будет автоматически определять предпочтения пользователя и устанавливать соответствующую тему.
Заключение
Создание сайта с возможностью выбора светлой и темной темы по умолчанию — это отличный способ улучшить пользовательский опыт и предоставить пользователям больше контроля над тем, как они видят ваш контент. В этой статье мы рассмотрели, как использовать CSS-переменные и JavaScript для создания переключателя тем и установки темы по умолчанию на основе предпочтений пользователя.
Добавить комментарий