M

MLOG

中文

探索 CSS 媒体查询和自定义属性的强大功能，创建能适应用户偏好的自动浅色和深色主题，为全球用户提升可访问性和视觉吸引力。

CSS light-dark 函数：为全球网络实现自动主题适配

在当今全球互联的世界中，网站需要对来自不同背景和偏好的用户都具有可访问性和视觉吸引力。实现这一目标的有效方法之一是通过自动主题适配，特别是提供能根据用户系统设置自动调整的浅色和深色主题。本篇博客文章将指导您如何使用 CSS 媒体查询和自定义属性来实现此功能，确保为您的国际用户提供无缝、舒适的浏览体验。

为何要实现自动浅色与深色主题？

将自动主题适配融入您的网页项目中有几个令人信服的理由：

如何使用 CSS 实现自动主题适配

自动主题适配的核心在于 prefers-color-scheme 媒体查询。这个 CSS 媒体查询允许您检测用户偏好的配色方案（浅色或深色），并应用相应的样式。

第一步：定义自定义属性（CSS 变量）

首先，定义自定义属性（CSS 变量）来存储浅色和深色主题的颜色值。这使得只需更新变量值即可轻松切换主题。


:root {
  --background-color: #ffffff; /* 浅色主题背景 */
  --text-color: #000000; /* 浅色主题文本 */
  --link-color: #007bff; /* 浅色主题链接 */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* 深色主题背景 */
    --text-color: #ffffff; /* 深色主题文本 */
    --link-color: #66b3ff; /* 深色主题链接 */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

在此示例中，我们为背景颜色、文本颜色、链接颜色和按钮颜色定义了变量。:root 选择器将这些变量应用于整个文档。然后，当用户将其系统设置为深色模式时，@media (prefers-color-scheme: dark) 媒体查询会用深色主题的值覆盖这些变量。

第二步：将自定义属性应用于您的样式

接下来，将这些自定义属性应用到您的 CSS 样式中，以控制网站元素的外观。


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡 */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

在这里，我们使用 var() 函数来访问自定义属性的值。我们还向 body 元素添加了一个 transition 属性，以在主题之间创建平滑的过渡效果。

第三步：测试与优化

在不同的浏览器和操作系统上彻底测试您的实现。像 Chrome、Firefox、Safari 和 Edge 这样的现代浏览器完全支持 prefers-color-scheme 媒体查询。您可以在操作系统设置中切换浅色和深色模式，以查看网站上反映出的变化。

高级技巧与注意事项

提供手动主题切换开关

虽然自动主题适配是一个很好的起点，但一些用户可能更喜欢手动覆盖他们的系统设置。您可以使用 JavaScript 和本地存储（local storage）来提供一个手动主题切换开关。

HTML：

JavaScript：


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // 默认为自动

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// 页面加载时应用初始主题
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // 如果设置为自动，则让 prefers-color-scheme 决定
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS：在之前的 CSS 基础上添加以下 CSS。注意这是手动覆盖的样式：


body.light-theme {
  --background-color: #ffffff; /* 浅色主题背景 */
  --text-color: #000000; /* 浅色主题文本 */
  --link-color: #007bff; /* 浅色主题链接 */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* 深色主题背景 */
  --text-color: #ffffff; /* 深色主题文本 */
  --link-color: #66b3ff; /* 深色主题链接 */
  --button-background-color: #333;
  --button-text-color: #fff;
}

此代码片段添加了一个按钮，允许用户在浅色、深色和自动主题之间切换。所选主题存储在本地存储中，以便在页面加载时保持不变。

处理图片和 SVG

有些图片和 SVG 在浅色和深色主题下可能看起来效果不佳。您可以使用 CSS 媒体查询来有条件地显示这些资源的不同版本。


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

此代码片段在浅色模式下显示一张图片（类名为 light-mode），在深色模式下显示另一张不同的图片（类名为 dark-mode）。

面向国际用户的调色板注意事项

在为浅色和深色主题选择调色板时，请注意文化关联和可访问性方面的考虑。以下是一些通用指南：

性能注意事项

虽然实现自动主题适配相对简单，但考虑其对性能的潜在影响也很重要。避免使用过于复杂的 CSS 选择器或动画，因为它们会减慢渲染速度。此外，请确保您的自定义属性被高效地定义，以最大限度地减少变量查找的开销。

以下是一些优化性能的最佳实践：

无障碍最佳实践

确保您的浅色和深色主题符合无障碍指南，例如 WCAG（Web 内容无障碍指南）。这包括提供足够的颜色对比度，使用语义化 HTML，并确保所有交互元素都可以通过键盘访问。

以下是一些具体的无障碍最佳实践：

跨不同地区的示例

思考一下如何为不同的全球受众量身定制浅色和深色主题的这些示例：

结论

实现自动浅色和深色主题是为全球受众创造更易于访问和用户友好的网络体验的关键一步。通过利用 CSS 媒体查询和自定义属性，您可以轻松地调整网站外观以匹配用户偏好，减轻眼睛疲劳，并改善有视觉障碍的用户的可访问性。请记住考虑文化关联、无障碍指南和性能因素，以确保为每个人提供无缝且包容的浏览体验。

通过采用这些技术，您展示了对现代网页设计原则的承诺，并满足了国际受众的多样化需求，使您的网站成为一个对所有人来说都受欢迎和舒适的空间。