Как переписать настройки цветовой схемы CSS

Question

в HTML. Теперь я знаю, что мы можем попросить CSS сделать что-нибудь, когда пользователь изменит свою цветовую схему системы, например

@media (prefers-color-scheme: dark)

Но что если я захочу перезаписать этот параметр, как будто мне нужна светлая цветовая схема ночью, но я неЕсли вы не хотите изменять настройки цветовой схемы моей системы, есть ли какой-либо способ JavaScript или jQuery, чтобы обмануть CSS (чтобы продолжить темный парк, даже если система светлая или наоборот), чтобы я мог переключать цветовую схему веб-страницы, щелкая какой-нибудь элемент?

Answer 1

Вы можете определить два класса для него. Например. "colourSchemeDay" и "colourSchemeNight" в вашем файле CSS. Затем вы можете манипулировать классами, имея на них временные ограничения.

if (time >=6AM && time <= 8PM){
    document.getElementById("myElement");
    element.classList.remove("colourSchemeNight");
    element.classList.add ("colourSchemeDay");
} else {
    document.getElementById("myElement");
    element.classList.add("colourSchemeNight");
    element.classList.remove("colourSchemeDay");
}

Answer 2

Сначала вы должны получить текущее время в 24-часовом формате, например:

var dayNight = (new Date()).getHours();

Теперь у вас, скорее всего, есть 2 класса с цветом фона, 1 для дня и 1 дляnight.

Таким образом, вы можете использовать оператор if/else, чтобы решить, когда вы хотите добавить или удалить класс, используя JQuery.

Так что в моем примере, когда .dayNight больше илиравно 7 (7 утра) и меньше 19 (7 вечера), добавляет класс .day и удаляет класс. night.

И когда .dayNight больше или равно 0 (12полночь) И если он меньше 7 (7 утра), он добавляет класс .night и удаляет класс .day.

Кроме того, когда он больше или равен 19 (7 вечера) и равен илименьше чем 23 (11 вечера) он делает то же самое выше. Мы уже присвоили 0 (12 полуночи) в приведенном выше коде, поэтому мы можем установить здесь значение 23 (23:00).

Попробуйте это:

var dayNight = (new Date()).getHours();

if(dayNight>=7 && dayNight < 19) {
  $( "#display" ).removeClass( "night" ).addClass( "day" );
}

if((dayNight>=0 && dayNight<7) || (dayNight>=19 && dayNight <=23)) {
	$( "#display" ).removeClass( "day" ).addClass( "night" );
}

.day {
  background-color: blue;
  color: white;
}

.night {
  background-color: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display">
Hello!
</div>