Ночной режим принудительно

Мы хотим, чтобы наша страница при загрузке автоматически инвертировала цвета некоторой видимой части контента к чёрной ("ночной") схеме.

Я воспользовался darkmode.js, только скрипт пришлось выкачать с этого адреса, а затем изменить в исходнике строку border-radius: 50%; на border-radius: 0; (чтобы не рисовался чёрный овал при принудительном включении фона), а также заменить position: fixed; на position: absolute; (элемент не будет висеть на месте при прокрутке страницы, а также чёрным будет закрашиваться не всё).

Затем осталось подогнать под свои нужды настройки скрипта и позицию элемента:

<script>
 //здесь изменённый исходник с https://cdn.jsdelivr.net/npm/darkmode-js
 function addDarkmodeWidget() {
  const options = {
   bottom: 'unset',
   left: 'unset',
   right: '72px',
   time: '0.5s',
   label: '*', //реально здесь вставлен другой символ
   buttonColorDark: '#000', 
   buttonColorLight: '#fff',
   autoMatchOsTheme: true
  };
  let darkmode = new Darkmode(options);
  darkmode.showWidget();
  if (!darkmode.isActivated()) darkmode.toggle();
 }
 window.addEventListener('load', addDarkmodeWidget);
}
</script>

Страница будет загружаться с чёрной "шапкой", вернуть вид по умолчанию позволит кнопка справа вверху:

скрин, качество уменьшено

Конкретный вид ЧП (чёрной полосы) будет зависеть от стиля для тега body. Если там был background-image, он не восстановится при обратном переключении режима.

Вызвать код со стороны сервера (из PHP) можно, например, так:

<?php 
 require_once('./p/mode1.html'); 
?>

поместив скрипт в папку p под именем mode1.html и включив PHP-код в какой-либо файл, загружающийся для каждой страницы сайта. Потом, когда траур кончится, можно будет просто убрать из РHP-кода строчку вызова скрипта.

18.02.2024, 14:34 [154 просмотра]