如何创建浅色、深色及自定义蓝色三种不同配色主题？

完全可以实现，下面是一套简单可靠的前端实现方案，用CSS变量+JavaScript就能搞定：

1. 定义主题配色变量 #

先在CSS里用自定义属性（变量）统一管理各主题的颜色，切换时只需要替换变量值即可：

/* 浅色主题（默认） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #666666;
}

/* 深色主题 */
body.dark-theme {
  --bg-color: #000000;
  --text-color: #ffffff;
  --accent-color: #cccccc;
}

/* 自定义蓝色主题 */
body.blue-theme {
  --bg-color: #e6f2ff;
  --text-color: #003366;
  --accent-color: #0066cc;
}

/* 全局样式绑定变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
}

button {
  background-color: var(--accent-color);
  color: var(--bg-color);
  border: none;
  padding: 8px 16px;
  margin: 0 4px;
  cursor: pointer;
}

2. 添加主题切换按钮 #

在HTML中放置三个按钮，分别对应三种主题：

<button id="lightBtn">浅色主题</button>
<button id="darkBtn">深色主题</button>
<button id="blueBtn">蓝色主题</button>

3. 用JavaScript实现切换逻辑 #

编写JS代码处理按钮点击事件，同时用localStorage保存用户的主题选择，页面刷新后自动应用：

// 获取按钮元素
const lightBtn = document.getElementById('lightBtn');
const darkBtn = document.getElementById('darkBtn');
const blueBtn = document.getElementById('blueBtn');

// 切换主题的核心函数
function setTheme(themeName) {
  // 先移除所有主题类
  document.body.classList.remove('dark-theme', 'blue-theme');
  // 非默认浅色主题时，添加对应类
  if (themeName !== 'light') {
    document.body.classList.add(`${themeName}-theme`);
  }
  // 保存选择到本地存储
  localStorage.setItem('selectedTheme', themeName);
}

// 页面加载时自动应用上次保存的主题
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('selectedTheme') || 'light';
  setTheme(savedTheme);
});

// 绑定按钮点击事件
lightBtn.addEventListener('click', () => setTheme('light'));
darkBtn.addEventListener('click', () => setTheme('dark'));
blueBtn.addEventListener('click', () => setTheme('blue'));

额外说明 #

• 你可以根据自己的需求修改--bg-color、--text-color等变量的具体值，完全匹配你的蓝色样式。
• 平滑过渡效果是可选的，去掉transition属性可以实现即时切换。
• 如果是后端渲染的页面，也可以把主题选择存在用户会话中，后端返回页面时直接给body加上对应类，逻辑类似。

内容的提问来源于stack exchange，提问作者Leena Marie