参考资料

  1. meta‌搜索引擎索引规则
  2. Meta 暗色模式适配
  3. Meta页面描述和关键词
  4. meta禁止页面缓存是一种HTML元标签设置
  5. Open Graph协议是由Facebook推出的元数据协议
  6. Meta标签禁止电话号码自动识别
  7. Meta 文档类型声明（DOCTYPE）是HTML文档开头的声明
  8. 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：暗色模式功能部分平台风格舒适夜间