参考资料

  1. Meta作者与版权信息
  2. Meta自动刷新
  3. Meta 内容语言声明
  4. Meta 暗色模式适配
  5. Meta字符编码声明
  6. http-equiv="X-UA-Compatible" 是 HTML 的 标签属性，用于控制浏览器的文档渲染模式
  7. Meta视口（Viewport）是HTML中用于控制网页在移动设备上显示方式的标签
  8. meta‌搜索引擎索引规则

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：暗色模式功能部分平台风格舒适夜间