#html #css #color-scheme #darkmode #htmlbutton
Вопрос:
Эй, может ли кто-нибудь сказать мне, что есть какой-либо способ изменить цветовую гамму на веб-сайте. Подождите, я объясню это ясно с помощью некоторого кода.
@media (prefers-color-scheme: dark) {}
@media (prefers-color-scheme: light) {}
Есть ли какой-либо способ с помощью кнопки HTML изменить цветовую схему со светлой на темную?
Я обшарил весь Интернет и не нашел правильного ответа. Хотя я новичок в Css. Поэтому, пожалуйста, решите мой вопрос.
Комментарии:
1. Функция CSS-мультимедиа с предпочтительной цветовой схемой используется для определения того, запросил ли пользователь светлую или темную цветовую тему. Вы не можете переключить это конкретное предпочтение, но вы можете игнорировать это предпочтение и просто сделать кнопку, которая переключается между классами CSS.
Ответ №1:
Я не совсем вас понял, но если вы хотите изменить основной цвет, просто используйте javascript и добавьте onclick в html-кнопку
Ответ №2:
Если вы используете переменные CSS, вы можете изменить их с помощью JavaScript следующим образом:
var usesDarkTheme = false;
function changeColorTheme() {
const body = document.body;
if (usesDarkTheme) {
body.style.setProperty('--main-color', 'white');
usesDarkTheme = false;
} else {
body.style.setProperty('--main-color', 'black');
usesDarkTheme = true;
}
}
body {
--main-color: white;
}
.content {
background-color: var(--main-color);
width: 100px;
height: 100px;
}
<div class="content"> </div>
<button onclick="changeColorTheme()">Change Color Theme</button>