css 的夜班类似于 f.lux

Question

是否可以为我的网站创建类似于 f.lux 的内容？

f.lux 模拟夜班 - 我想让我的网络应用程序以同样的方式运行。

例如 css 属性将所有颜色转变为某个温度。

现在我在客户端使用 React。也许有一些插件:)？谢谢并致以最诚挚的问候！

Answer 1

这不是反应解决的问题，但是可以用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 的支持非常少。

Answer 2

为了扩展 Sean 的回答，您还可以使用 background-color 来达到类似的效果。另请注意，您需要使用 pointer-events: none 以便橙色层不会阻止 clicks/taps.

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

<button>flux up!</button>

免责声明：flux/nightshift/etc 背后可能有更多的科学依据，所以请对此持保留态度。提供深色主题可能是更好的解决方案，有助于在夜间使用您的网站。

Answer 3

f.lux可以根据太阳的位置（当前位置）调整屏幕的色温。
如果您想实现相同的功能，您有以下三种选择：

用户可以切换 on/off - 我会推荐这个。用户拥有完全控制权+易于理解。然而，调整屏幕颜色将成为一个烦人的重复性任务。
用户手动设置日出-日出的位置和时间 - 对用户来说相对具有挑战性
自动检测

如果你想做后者，你肯定会想要使用 API。您可以通过 IP 地址获取位置（可能不精确）。雅虎有一个 API 可以显示 sunrise/sunset.
的时间例如，这将为您提供日落毛伊岛：

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

为了调整实际 brightness/color Fabian Schultz 的似乎是理想的。

css 的夜班类似于 f.lux

Night shift with css similiar to f.lux

css

reactjs

night-shift