Question

是否有可能在我的网站上创建类似于f.lux的东西？

f.lux模拟夜班 - 我想让我的Web应用程序的行为方式相同。

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

现在我在客户端使用react。也许有一些插件:)？谢谢和最好的问候！

Answer 1

为了扩展Sean的答案，你也可以使用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>

免责声明：在助焊剂/夜班/等等之后可能会有更多的科学，所以请加上一粒盐。提供黑暗主题可能是一个更好的解决方案，有助于在晚上使用您的网站。

Answer 2

这不是一个问题，通过react解决，但可以用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 3

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

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

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

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

为了调整实际的亮度/颜色，Fabian Schultz的answer似乎是理想的。

夜班与css类似于f.lux

3 个答案: