Ночная смена css, похожая на f.lux

Можно ли создать что-то похожее на f.lux для моего сайта?

f.lux имитирует ночную смену - я бы хотел, чтобы мое веб-приложение работало так же.

Так, например, свойство css, которое сдвигает все цвета до некоторой температуры.

Прямо сейчас я использую реакцию на стороне клиента. Возможно, есть какой-нибудь плагин:)? Спасибо и всего наилучшего!

Источник

3 ответа

Решение

Чтобы расширить ответ Шона, вы также можете использовать background-color добиться несколько похожего эффекта. Также обратите внимание, что вам нужно будет использовать pointer-events: none так что оранжевый слой не предотвращает щелчки / постукивания.

html:before {
  position: fixed;
  width: 100%; height: 100%;
  background-color: #ffa339;
  opacity: .1;
  pointer-events: none;
  content: ' ';
  z-index: 99999;
}
<button>flux up!</button>

Отказ от ответственности: вероятно, есть больше науки о потоке / ночной смене / и т. Д., Так что возьмите это с долей соли. Предложение темной темы может быть еще лучшим решением, которое помогает использовать ваш сайт ночью.

Источник

f.lux может регулировать цветовую температуру экрана в соответствии с положением солнца (для текущего местоположения).
Если вы хотите достичь той же функции, у вас есть три варианта:

  • Пользователь может включить / выключить - я бы порекомендовал этот. Пользователь имеет полный контроль + легко понять. Тем не менее, это станет раздражающей повторяющейся задачей, чтобы настроить цвет экрана.
  • Пользователь устанавливает положение и время восхода и восхода солнца вручную - это довольно сложно для пользователя
  • Автоопределение

Если вы хотите сделать последнее, вы наверняка захотите использовать API. Вы можете получить местоположение по IP-адресу (может быть неточным). У Yahoo есть API, который может показать вам время восхода / захода солнца.
Это даст вам закат Мауи, например:

select astronomy.sunset from weather.forecast where woeid in (select woeid from geo.places(1) where text="maui, hi")

Чтобы отрегулировать фактическую яркость / цвет, ответ Фабиана Шульца кажется идеальным.

Источник

Это не проблема, решаемая реакцией, но может быть решена с помощью CSS.

html:after {
  content: '';
  display: block;
  height: 100%;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: sepia(100%);
  z-index: 10000 !important;
}

Предостережения: поддержка браузера для backdrop-filter очень мало

Источник
Другие вопросы по тегам