css皮肤制作

CSS皮肤制作方法

使用CSS变量定义主题颜色和样式，便于切换皮肤。通过:root选择器定义全局变量，不同皮肤通过修改变量值实现切换。

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
}

皮肤切换实现

创建不同皮肤类，通过JavaScript动态切换body或根元素的类名。每个皮肤类重写CSS变量值。

.dark-theme {
  --primary-color: #2c3e50;
  --secondary-color: #1abc9c;
  --text-color: #ecf0f1;
}

组件样式应用

在具体组件样式中使用CSS变量，确保皮肤切换时所有组件自动更新。

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

持久化存储

使用localStorage保存用户选择的皮肤偏好，页面加载时自动应用上次选择的皮肤。

// 保存皮肤选择
localStorage.setItem('theme', 'dark-theme');

// 加载时应用皮肤
const savedTheme = localStorage.getItem('theme');
if(savedTheme) {
  document.body.classList.add(savedTheme);
}

响应式皮肤

结合媒体查询实现自动皮肤切换，如根据系统偏好切换深色模式。

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #2c3e50;
    --text-color: #ecf0f1;
  }
}