参考资料

  1. meta‌‌‌ iOS设备优化是一个用于提升iOS设备性能的库
  2. Meta Twitter 卡片
  3. Meta 暗色模式适配
  4. Meta自动刷新
  5. Meta作者与版权信息
  6. meta‌搜索引擎索引规则
  7. Open Graph协议是由Facebook推出的元数据协议
  8. meta禁止页面缓存是一种HTML元标签设置

Meta 暗色模式适配

Meta 暗色模式适配

简介

Meta 暗色模式适配是指在网页或应用中实现与 Meta 平台(如 Facebook、Instagram 等)一致的暗色主题风格，提供更舒适的夜间浏览体验。

功能

  1. 自动检测用户系统偏好(暗色/亮色模式)

  2. 提供手动切换暗色/亮色模式的功能

  3. 保持与 Meta 平台一致的视觉风格

  4. 减少夜间屏幕眩光

用法

HTML 部分

<meta name="color-scheme" content="light dark">

CSS 部分

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 暗色模式下的变量定义 */
    --background-color: #18191a;
    --text-color: #e4e6eb;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    /* 亮色模式下的变量定义 */
    --background-color: #ffffff;
    --text-color: #050505;
  }
}

JavaScript 部分

// 检测系统颜色偏好
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

// 手动切换函数
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark-mode');
}

// 监听系统颜色变化
prefersDark.addListener((e) => {
  if (e.matches) {
    // 系统切换到暗色模式
    document.documentElement.classList.add('dark-mode');
  } else {
    // 系统切换到亮色模式
    document.documentElement.classList.remove('dark-mode');
  }
});

示例

<!DOCTYPE html>
<html class="light-mode">
<head>
  <meta name="color-scheme" content="light dark">
  <style>
    :root {
      color-scheme: light dark;
    }
    
    .light-mode {
      --bg: #ffffff;
      --text: #050505;
    }
    
    .dark-mode {
      --bg: #18191a;
      --text: #e4e6eb;
    }
    
    body {
      background-color: var(--bg);
      color: var(--text);
    }
  </style>
</head>
<body>
  <button onclick="toggleDarkMode()">切换模式</button>
  
  <script>
    function toggleDarkMode() {
      document.documentElement.classList.toggle('dark-mode');
      document.documentElement.classList.toggle('light-mode');
    }
  </script>
</body>
</html>

注意事项

  1. 确保所有颜色都有足够的对比度(至少 4.5:1)

  2. 测试图像和媒体在暗色模式下的显示效果

  3. 考虑保留用户的选择偏好(使用 localStorage)

  4. 避免纯黑色背景(#000000)，使用深灰色更舒适

  5. 注意表单控件和滚动条等系统组件的适配

  6. 渐进增强：确保基础功能在不支持暗色模式的浏览器中仍可用

TAG：暗色模式功能部分平台风格舒适夜间