Как сделать - Переключить темный режим
Переключайтесь между темным и светлым режимом с помощью 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.