如何创建支持背景色、语言及明暗模式切换的网站设置选项（仿Qwant首页）

一、UI结构设计（模仿Qwant侧边抽屉式面板） #

先搭建触发按钮与隐藏式设置面板，按功能划分为主题切换、背景色选择、语言切换三个模块，控件选择贴合Qwant的简洁风格：

<!-- 设置触发按钮 -->
<button id="settings-btn">⚙️ 设置</button>

<!-- 设置面板 -->
<div id="settings-panel" class="settings-panel hidden">
  <h3>设置</h3>
  
  <!-- 主题切换模块 -->
  <div class="setting-section">
    <h4>主题</h4>
    <div class="option-group">
      <label><input type="radio" name="theme" value="light" checked> 浅色模式</label>
      <label><input type="radio" name="theme" value="dark"> 深色模式</label>
    </div>
  </div>

  <!-- 背景色选择模块 -->
  <div class="setting-section">
    <h4>背景颜色</h4>
    <input type="color" id="bg-color-picker" value="#ffffff">
    <div class="bg-presets">
      <button class="bg-preset" data-color="#f0f0f0" style="background: #f0f0f0;"></button>
      <button class="bg-preset" data-color="#e6f7ff" style="background: #e6f7ff;"></button>
      <button class="bg-preset" data-color="#fff5e6" style="background: #fff5e6;"></button>
    </div>
  </div>

  <!-- 语言切换模块 -->
  <div class="setting-section">
    <h4>语言</h4>
    <select id="language-select">
      <option value="zh-CN" selected>简体中文</option>
      <option value="en-US">English</option>
      <option value="fr-FR">Français</option>
    </select>
  </div>
</div>

配套CSS实现面板的隐藏/展开动画、主题适配样式：

/* 面板基础样式 */
.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.hidden {
  transform: translateX(100%);
}

.setting-section {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.option-group label {
  margin-right: 20px;
  cursor: pointer;
}

.bg-presets {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.bg-preset {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}

/* 深色模式变量与样式 */
:root {
  --text-color: #333;
  --panel-bg: #fff;
  --border-color: #eee;
}

.dark-mode {
  --text-color: #f0f0f0;
  --panel-bg: #2d2d2d;
  --border-color: #444;
}

.dark-mode body {
  background-color: #1a1a1a;
  color: var(--text-color);
}

.dark-mode .settings-panel {
  background: var(--panel-bg);
  color: var(--text-color);
}

.dark-mode .setting-section {
  border-bottom-color: var(--border-color);
}

二、核心功能实现（JavaScript） #

完成面板交互、设置切换逻辑，并通过localStorage持久化用户偏好：

// 获取DOM元素
const settingsBtn = document.getElementById('settings-btn');
const settingsPanel = document.getElementById('settings-panel');
const themeRadios = document.querySelectorAll('input[name="theme"]');
const bgColorPicker = document.getElementById('bg-color-picker');
const bgPresets = document.querySelectorAll('.bg-preset');
const languageSelect = document.getElementById('language-select');

// 面板展开/收起
settingsBtn.addEventListener('click', () => {
  settingsPanel.classList.toggle('hidden');
});

// 主题切换逻辑
function setTheme(theme) {
  document.documentElement.classList.toggle('dark-mode', theme === 'dark');
  localStorage.setItem('user-theme', theme);
}

themeRadios.forEach(radio => {
  radio.addEventListener('change', () => radio.checked && setTheme(radio.value));
});

// 背景颜色切换逻辑
function setBgColor(color) {
  document.body.style.backgroundColor = color;
  bgColorPicker.value = color;
  localStorage.setItem('user-bg-color', color);
  // 标记选中的预设按钮
  bgPresets.forEach(btn => btn.style.outline = btn.dataset.color === color ? '2px solid #2196F3' : '');
}

bgColorPicker.addEventListener('input', e => setBgColor(e.target.value));
bgPresets.forEach(btn => btn.addEventListener('click', () => setBgColor(btn.dataset.color)));

// 语言切换逻辑（静态文本替换，实际项目可结合i18n框架）
const translations = {
  'zh-CN': {
    settings: '设置',
    theme: '主题',
    lightMode: '浅色模式',
    darkMode: '深色模式',
    bgColor: '背景颜色',
    language: '语言',
    settingsBtn: '⚙️ 设置'
  },
  'en-US': {
    settings: 'Settings',
    theme: 'Theme',
    lightMode: 'Light Mode',
    darkMode: 'Dark Mode',
    bgColor: 'Background Color',
    language: 'Language',
    settingsBtn: '⚙️ Settings'
  },
  'fr-FR': {
    settings: 'Paramètres',
    theme: 'Thème',
    lightMode: 'Mode Clair',
    darkMode: 'Mode Sombre',
    bgColor: 'Couleur de Fond',
    language: 'Langue',
    settingsBtn: '⚙️ Paramètres'
  }
};

function setLanguage(lang) {
  const texts = translations[lang];
  document.querySelector('.settings-panel h3').textContent = texts.settings;
  document.querySelectorAll('.setting-section h4')[0].textContent = texts.theme;
  document.querySelectorAll('.option-group label')[0].textContent = texts.lightMode;
  document.querySelectorAll('.option-group label')[1].textContent = texts.darkMode;
  document.querySelectorAll('.setting-section h4')[1].textContent = texts.bgColor;
  document.querySelectorAll('.setting-section h4')[2].textContent = texts.language;
  settingsBtn.textContent = texts.settingsBtn;
  
  localStorage.setItem('user-language', lang);
}

languageSelect.addEventListener('change', e => setLanguage(e.target.value));

// 页面加载时恢复用户设置
function loadUserSettings() {
  // 恢复主题（优先用户设置，无则匹配系统主题）
  const savedTheme = localStorage.getItem('user-theme');
  const defaultTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  const finalTheme = savedTheme || defaultTheme;
  document.querySelector(`input[name="theme"][value="${finalTheme}"]`).checked = true;
  setTheme(finalTheme);

  // 恢复背景色
  const savedBgColor = localStorage.getItem('user-bg-color') || '#ffffff';
  setBgColor(savedBgColor);

  // 恢复语言
  const savedLang = localStorage.getItem('user-language') || 'zh-CN';
  languageSelect.value = savedLang;
  setLanguage(savedLang);
}

document.addEventListener('DOMContentLoaded', loadUserSettings);

三、优化细节 #

1. 系统主题适配：通过window.matchMedia检测用户系统主题偏好，作为默认设置
2. 平滑过渡：给面板展开/收起、主题颜色变化添加CSS过渡动画
3. 无障碍支持：给控件添加aria-label，确保键盘可正常导航
4. 响应式调整：移动端可将面板宽度设为100%，优化触控体验

内容的提问来源于stack exchange，提问作者Moksh Gupta