Блог

Главная - Вопросы по программированию - Как изменить цветовую схему, используя только css?

Как изменить цветовую схему, используя только css?

#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>
Метки: ,