CSS `Ambient Light Sensor API` 结合 `color-mix()`：环境光感知的动态主题 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，大家好！我是今天的讲师，大家可以叫我老码。今天咱们要聊点儿有意思的，关于CSS Ambient Light Sensor API（环境光传感器API）结合 color-mix() 的骚操作，打造一个环境光感知的动态主题。保证让你的网页在不同光照环境下，都能呈现最佳的视觉效果。

一、啥是Ambient Light Sensor API？

首先，咱们得搞清楚啥是 Ambient Light Sensor API。简单来说，它就是一个能让你通过JavaScript获取设备周围环境光照强度的API。想象一下，你的手机或者平板电脑，会根据你所处的环境自动调节屏幕亮度，这就是环境光传感器的功劳。现在，我们可以把这个能力搬到网页上，让网页的颜色和主题也能根据环境光照变化！

别激动，先泼点冷水：

这玩意儿吧，支持度还不是特别好。目前只有部分浏览器支持，而且需要设备本身有环境光传感器才行。所以，在使用之前，最好先检测一下浏览器是否支持。

二、如何检测浏览器是否支持？

检测的方法很简单，用JavaScript判断 AmbientLightSensor 对象是否存在就行了：

if ('AmbientLightSensor' in window) {
  console.log('浏览器支持 Ambient Light Sensor API！');
  // 接下来就可以使用 API 了
} else {
  console.log('浏览器不支持 Ambient Light Sensor API。');
  // 提示用户或者使用备用方案
}

如果浏览器不支持，那咱就得用一些备用方案，比如根据用户自己设定的主题或者设备的主题来选择网页的颜色。

三、如何使用 Ambient Light Sensor API？

如果你的浏览器支持，那就可以开始使用了。下面是一个简单的例子：

if ('AmbientLightSensor' in window) {
  try {
    const sensor = new AmbientLightSensor();

    sensor.addEventListener('reading', () => {
      console.log('当前光照强度:', sensor.illuminance);
      // 在这里根据光照强度调整网页的颜色或主题
    });

    sensor.addEventListener('error', event => {
      console.error('传感器错误:', event.error.message);
    });

    sensor.start();
  } catch (error) {
    console.error('创建传感器实例失败:', error);
    // 处理创建传感器实例失败的情况，比如权限问题
  }
} else {
  console.log('浏览器不支持 Ambient Light Sensor API。');
}

代码解释：

new AmbientLightSensor(): 创建一个 AmbientLightSensor 实例。
sensor.addEventListener('reading', ...): 监听 reading 事件，当传感器读取到新的光照强度时，这个事件就会被触发。
sensor.illuminance: 光照强度值，单位是勒克斯（lux）。
sensor.addEventListener('error', ...): 监听 error 事件，当传感器发生错误时，这个事件会被触发。
sensor.start(): 开始监听环境光。

注意事项：

权限问题： 某些浏览器可能需要用户授权才能访问环境光传感器。
错误处理： 要做好错误处理，避免程序崩溃。

四、 color-mix() 是个啥？

color-mix() 是一个CSS函数，它可以让你混合两种颜色，生成一个新的颜色。它非常灵活，可以控制混合的比例和颜色空间。

语法：

color-mix( <color-space> , <color> <percentage> , <color> <percentage>? )

<color-space>: 颜色空间，比如 srgb、hsl、oklch 等。
<color>: 颜色值，可以是 hex、rgb、hsl 等。
<percentage>: 百分比，表示该颜色在混合中所占的比例。

例子：

/* 混合红色和蓝色，红色占 70%，蓝色占 30%，使用 srgb 颜色空间 */
color: color-mix(srgb, red 70%, blue 30%);

/* 混合白色和黑色，黑色占 50%，使用 oklch 颜色空间 */
background-color: color-mix(oklch, white, black 50%);

五、如何将 Ambient Light Sensor API 和 color-mix() 结合起来？

现在，激动人心的时刻到了！咱们要把环境光传感器和 color-mix() 结合起来，实现环境光感知的动态主题。

思路：

获取环境光照强度。
根据光照强度，计算出混合的比例。
使用 color-mix() 混合两种颜色，生成新的颜色。
将新的颜色应用到网页的元素上。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>环境光感知的动态主题</title>
  <style>
    body {
      transition: background-color 0.3s ease; /* 添加过渡效果 */
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>这个页面的背景颜色会根据环境光照强度自动调整。</p>

  <script>
    if ('AmbientLightSensor' in window) {
      try {
        const sensor = new AmbientLightSensor();

        sensor.addEventListener('reading', () => {
          const illuminance = sensor.illuminance;

          // 将光照强度映射到 0 到 1 之间的值
          const ratio = Math.min(1, illuminance / 100); // 假设 100 lux 是最大亮度

          // 使用 color-mix() 混合白色和黑色
          const backgroundColor = `color-mix(srgb, white, black ${ratio * 100}%)`;

          // 应用到 body 的背景颜色
          document.body.style.backgroundColor = backgroundColor;

          console.log('当前光照强度:', illuminance, '混合比例:', ratio, '背景颜色:', backgroundColor);
        });

        sensor.addEventListener('error', event => {
          console.error('传感器错误:', event.error.message);
        });

        sensor.start();
      } catch (error) {
        console.error('创建传感器实例失败:', error);
      }
    } else {
      console.log('浏览器不支持 Ambient Light Sensor API。');
      document.body.style.backgroundColor = '#eee'; // 备用方案
    }
  </script>
</body>
</html>

代码解释：

ratio = Math.min(1, illuminance / 100);: 将光照强度 illuminance 映射到 0 到 1 之间的值。这里假设 100 lux 是最大亮度，超过 100 lux 的光照强度都视为 1。你可以根据实际情况调整这个值。
*backgroundColor = color-mix(srgb, white, black ${ratio 100}%)`;:** 使用color-mix()混合白色和黑色，ratio` 决定了黑色的比例。
document.body.style.backgroundColor = backgroundColor;: 将混合后的颜色应用到 body 的背景颜色。
transition: background-color 0.3s ease;: 在 CSS 中添加过渡效果，让颜色变化更平滑。

六、进阶玩法：更多颜色和更复杂的逻辑

上面的例子只是一个简单的黑白主题。你可以用 color-mix() 混合更多的颜色，或者根据光照强度使用更复杂的逻辑来调整网页的颜色和主题。

例如：

白天和夜晚使用不同的颜色主题：

sensor.addEventListener('reading', () => {
  const illuminance = sensor.illuminance;
  let backgroundColor;
  let textColor;

  if (illuminance > 50) { // 白天
    backgroundColor = 'white';
    textColor = 'black';
  } else { // 夜晚
    backgroundColor = '#222';
    textColor = 'white';
  }

  document.body.style.backgroundColor = backgroundColor;
  document.body.style.color = textColor;
});

根据光照强度调整多个元素的颜色：

你可以创建一个函数，根据光照强度调整多个元素的颜色：

function updateTheme(illuminance) {
  const ratio = Math.min(1, illuminance / 100);
  const primaryColor = `color-mix(srgb, #007bff, #28a745 ${ratio * 100}%)`; // 蓝色到绿色的过渡
  const secondaryColor = `color-mix(srgb, #6c757d, #dc3545 ${ratio * 100}%)`; // 灰色到红色的过渡

  document.querySelector('h1').style.color = primaryColor;
  document.querySelector('p').style.color = secondaryColor;
  document.body.style.backgroundColor = `color-mix(srgb, white, #f8f9fa ${ratio * 100}%)`; // 浅灰色背景
}

sensor.addEventListener('reading', () => {
  updateTheme(sensor.illuminance);
});

使用不同的颜色空间：

color-mix() 支持多种颜色空间，你可以尝试使用不同的颜色空间来获得不同的效果。例如，oklch 颜色空间更符合人类的视觉感知，可以产生更自然的颜色过渡。

七、性能优化：不要过度渲染

环境光传感器会不断地触发 reading 事件，如果每次事件都重新计算和渲染颜色，可能会影响性能。所以，我们需要进行一些性能优化。

方法：

节流（Throttling）： 在一段时间内只执行一次函数。
防抖（Debouncing）： 在一段时间内没有触发事件后才执行函数。

使用节流的例子：

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const currentTime = Date.now();

    if (!timeoutId) {
      if (currentTime - lastExecTime >= delay) {
        func.apply(this, args);
        lastExecTime = currentTime;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(this, args);
          lastExecTime = Date.now();
          timeoutId = null;
        }, delay - (currentTime - lastExecTime));
      }
    }
  };
}

const throttledUpdateTheme = throttle(updateTheme, 100); // 每 100 毫秒最多执行一次

sensor.addEventListener('reading', () => {
  throttledUpdateTheme(sensor.illuminance);
});

八、兼容性处理：优雅降级

由于 Ambient Light Sensor API 的兼容性还不是很好，所以我们需要做好兼容性处理，确保在不支持的浏览器中也能正常显示。

方法：

使用备用方案： 如果浏览器不支持 Ambient Light Sensor API，可以使用用户自己设定的主题或者设备的主题来选择网页的颜色。
提供手动切换主题的选项： 让用户可以手动切换亮色和暗色主题。

代码示例：

if ('AmbientLightSensor' in window) {
  // ... 使用 Ambient Light Sensor API 的代码
} else {
  console.log('浏览器不支持 Ambient Light Sensor API。');
  // 检查用户是否设置了 prefers-color-scheme
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // 用户喜欢暗色主题
    document.body.style.backgroundColor = '#222';
    document.body.style.color = 'white';
  } else {
    // 用户喜欢亮色主题或者未设置
    document.body.style.backgroundColor = 'white';
    document.body.style.color = 'black';
  }
}

九、总结：

今天我们学习了如何使用 CSS Ambient Light Sensor API 结合 color-mix() 来打造一个环境光感知的动态主题。虽然这个API的兼容性还有待提高，但是它提供了一个非常有意思的可能性，让我们的网页能够更好地适应用户的环境，提供更好的用户体验。

重点回顾：

知识点	描述
Ambient Light Sensor API	用于获取设备周围环境光照强度的 API。
`color-mix()`	CSS 函数，用于混合两种颜色，生成新的颜色。
兼容性检测	使用 `if ('AmbientLightSensor' in window)` 检测浏览器是否支持 `Ambient Light Sensor API`。
错误处理	使用 `try...catch` 块处理创建传感器实例失败的情况。
权限问题	某些浏览器可能需要用户授权才能访问环境光传感器。
性能优化	使用节流或防抖来限制 `updateTheme` 函数的执行频率，避免过度渲染。
兼容性处理	在不支持 `Ambient Light Sensor API` 的浏览器中使用备用方案，例如根据用户自己设定的主题或者设备的主题来选择网页的颜色。
颜色空间选择	`color-mix()` 支持多种颜色空间，可以尝试使用不同的颜色空间来获得不同的效果，例如 `oklch` 颜色空间更符合人类的视觉感知。

希望今天的课程对大家有所帮助！下次有机会再跟大家分享更多有趣的Web开发技巧。感谢大家！下课！

发表回复 取消回复

发表回复取消回复