根据周围光线在网站上启用暗模式

现在，您可以根据周围的光线在网站上切换“暗模式”和“正常模式”！它可以根据用户浏览网站的条件，真正帮助您打造更好的用户体验。

那么，请按照以下方法操作：

添加简短的 javascript。

if ( 'AmbientLightSensor' in window ) {
  const sensor = new AmbientLightSensor();
  sensor.onreading = () => {
    console.log('illuminance level :', sensor.illuminance);
      if(sensor.illuminance < 15) {
            document.querySelector('body').classList.add('dark');
      }
      else {
            document.querySelector('body').classList.remove('dark');
      }
  };
  sensor.onerror = (event) => {
    console.log(event.error);
  };
  sensor.start();
}

然后，在刚刚设置的类下添加暗黑模式对应的 CSS。就像这里一样，我dark根据环境光的亮度来添加和删除类。
你可以尝试不同的illuminance值，看看哪个更适合你的情况。

我还发现了@tomlokhorst的一个很酷的实验，他使用可变字体根据环境光改变了字体的粗细。 虽然他在帖子中进一步提到他没有使用上述方法，但这仍然是一个相当不错的用例。
AmbientLightSensor

免责声明：此功能目前支持的浏览器数量有限。
在 Chrome 上，此功能仅在启用后可用。查看Caniuse统计信息了解更多详情。无论网络的未来是光明的还是黑暗的，你都喜欢它！:)

编辑-
如果您遇到错误，例如AmbientLightSensor does not exist on type Window在尝试在 Angular 中执行此操作时，请参阅此评论以寻求解决方案。

参考

• 环境光传感器 W3C 规范
• 既然我提到了可变字体，这里有一篇有趣的文章