Узнать, как создать переключатель между темным и светлым режимом используя HTML, CSS и JavaScript.
Переключить Темный/Светлый
Создать переключатель на темный режим
Шаг 1) Добавить HTML:
Используйте любой элемент, который должен хранить контент, для которого вы хотите переключить дизайн. В нашем примере мы будем использовать <body> для простоты:
<body>
Шаг 2) Добавить CSS:
Оформите элемент <body> и создайте класс .dark-mode для переключения:
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Шаг 3) Добавить JavaScript:
Получите элемент <body> и переключитесь между классом .dark-mode:
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Попробуйте сами »
Совет: также см. Как добавить класс.
Совет: узнайте больше о свойстве classList в нашем справочнике по JavaScript.