Rails与SASS：复用变量实现多配色主题，支持用户选择账户偏好主题

嘿，这个需求太贴合实际了！谁都不想好好的CSS被一堆mixin和条件语句搅得乱七八糟，还要兼容已写好的代码，下面这个方案绝对能满足你：

本质上是利用CSS自定义属性（变量）的动态可覆盖性，把Sass作为“中间层”衔接你的现有代码，完全不用写条件判断，也几乎不用修改已有的CSS逻辑。

1. 重构你的Sass变量（这是唯一需要修改的Sass部分） #

把你原来的静态Sass变量，替换为指向CSS自定义属性的引用。比如：

// 原来的静态变量（示例）
// $bg-color: #ffffff;
// $text-color: #333333;
// $border-color: #e0e0e0;

// 修改后：让Sass变量指向CSS变量
$bg-color: var(--bg-color);
$text-color: var(--text-color);
$border-color: var(--border-color);

这样你原来所有使用这些Sass变量的CSS代码完全不用改，编译后会自动变成引用CSS自定义属性的样式。

2. 定义亮色主题的默认CSS变量 #

在根选择器里设置亮色主题的变量值，这是默认生效的主题：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
  // 把你所有需要切换的变量都在这里定义
}

3. 添加暗色主题的变量覆盖 #

通过data-theme属性（也可以用类名，比如.dark-theme）来覆盖亮色主题的变量值，实现暗色主题：

:root[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --border-color: #333333;
  // 对应所有变量的暗色值，和亮色一一对应
}

4. 实现用户主题选择与偏好保存（JS部分） #

用JavaScript处理主题切换逻辑，同时把用户的选择保存到localStorage，下次打开页面自动应用：

// 初始化主题
function initTheme() {
  // 优先取本地存储的主题，没有则用系统偏好
  const savedTheme = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const theme = savedTheme || (prefersDark ? 'dark' : 'light');
  
  document.documentElement.setAttribute('data-theme', theme);
}

// 切换主题的函数
function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

// 页面加载时初始化主题
window.addEventListener('DOMContentLoaded', initTheme);

// 给切换按钮绑定事件（假设按钮id是theme-toggle）
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

对应的HTML按钮示例：

<button id="theme-toggle">切换主题</button>

为什么这个方案适合你？ #

• 无mixin/if语句：所有主题切换逻辑都是CSS变量的覆盖，Sass只做了一层映射，代码干净得很
• 几乎不用改现有CSS：唯一的修改就是把Sass变量从静态值改成var(--xxx)，其余选择器和样式逻辑完全不动
• 支持用户偏好保存：通过localStorage记住用户选择，同时兼容系统的深色模式偏好

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