主题切换（1）：css变量的使用（:root）

在 CSS 中，:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式。

---

1. 为什么使用 :root 定义全局 CSS 变量？

• 全局可用 ：在 :root 中定义的变量可以在整个文档的任何地方使用。
• 优先级较低 ：:root 的优先级低于局部定义的变量，方便覆盖。
• 动态修改 ：可以通过 JavaScript 动态调整 :root 变量，实现主题切换、暗黑模式等。

---

2. 基本用法

（1）在 :root 中定义全局变量

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --bg-color: #f5f5f5;
  --font-size: 16px;
  --border-radius: 4px;
}

（2）在 CSS 中使用这些变量

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  font-size: var(--font-size);
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

.button:hover {
  background-color: var(--secondary-color);
}

---

3. 通过 JavaScript 动态修改 :root 变量

（1）修改单个变量

// 获取根元素（:root 对应 document.documentElement）
const root = document.documentElement;

// 修改 CSS 变量
root.style.setProperty('--primary-color', '#e74c3c');
root.style.setProperty('--bg-color', '#1a1a1a');

（2）批量修改变量（切换主题）

const themes = {
  light: {
    '--text-color': '#333',
    '--bg-color': '#f5f5f5',
    '--primary-color': '#3498db',
  },
  dark: {
    '--text-color': '#fff',
    '--bg-color': '#1a1a1a',
    '--primary-color': '#e74c3c',
  },
};

function applyTheme(themeName) {
  const theme = themes[themeName];
  if (theme) {
    Object.keys(theme).forEach((key) => {
      document.documentElement.style.setProperty(key, theme[key]);
    });
  }
}

// 切换到暗黑模式
applyTheme('dark');

（3）读取当前 :root 变量的值

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
console.log(primaryColor); // 输出当前值（如 "#e74c3c"）

---

4. 实际应用示例

（1）暗黑模式切换

:root {
  --text-color: #333;
  --bg-color: #fff;
}

[data-theme="dark"] {
  --text-color: #f0f0f0;
  --bg-color: #121212;
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: background-color 0.3s, color 0.3s;
}

// 切换暗黑模式
document.documentElement.setAttribute('data-theme', 'dark');

（2）动态调整字体大小

:root {
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

// 增大字体
document.documentElement.style.setProperty('--font-size', '18px');

---

5. 最佳实践

1. 命名规范 ：使用 --component-state-property 格式（如 --button-hover-bg）。

2. 提供默认值 ：

   color: var(--text-color, #333); /* 如果 --text-color 未定义，则使用 #333 */

3. 避免过度使用 ：只在真正需要全局控制的样式上使用 :root 变量。

4. 性能优化 ：减少频繁修改 :root 变量，避免不必要的重绘。

---

6. 浏览器兼容性

• 所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 CSS 变量。
• IE 不支持，如需兼容，可以使用 CSS 预处理器（如 Sass/Less）或 PostCSS 降级处理。

---

总结

方法	作用	示例
:root { --var: value }	定义全局 CSS 变量	:root { --primary: #3498db }
var(--var)	使用变量	color: var(--primary)
root.style.setProperty('--var', 'value')	JS 修改变量	root.style.setProperty('--primary', '#e74c3c')
getComputedStyle(root).getPropertyValue('--var')	JS 读取变量	const val = getComputedStyle(root).getPropertyValue('--primary')

通过 :root 全局管理 CSS 变量，可以让你的项目更灵活、更易于维护，并支持动态主题切换！ 🚀