大型项目中多色彩主题方案的实现难题及解决需求

我花了一整天寻找多色彩主题的实现方法，现有的方案大多仅适用于小场景（例如仅修改body背景与文字颜色），但我的大型项目包含各类卡片、按钮、表单等元素，这类简单方案显然完全不足：

:root {
    --body-text-clr: #232323;
    --body-bg-clr: #fff;
}
:root[data-theme="dark"] {
    --body-text-clr: #fff;
    --body-bg-clr: #232323;
}

我通常会定义大量颜色变量：

:root {
    // 这些通常不会变化
    --clr-primary-400: somevalue;
    --clr-primary-500: somevalue;
    --clr-primary-600: somevalue;

    // 这些会随主题完全变化
    --clr-neutral-100: somevalue;
    --clr-neutral-200: somevalue;
    --clr-neutral-300: somevalue;
    --clr-neutral-400: somevalue;
    --clr-neutral-500: somevalue;
    --clr-neutral-600: somevalue;
}

这些颜色在项目中多处复用，我尝试了多种方法但都无效：

尝试过的无效方法 #

方法一：直接映射 #

我原本以为亮色模式的每种颜色可以直接对应暗色模式的颜色，但很快发现并非如此——部分元素在某一主题下背景色相同，在另一主题下却不一样。

方法二：组件级Token #

我尝试为每个组件定义专属变量：

// 每个组件都要这么写
:root {
    --card-text-clr: somevalue;
    --card-bg-clr: somevalue;
}

:root[data-theme="dark"] {
    --card-text-clr: somevalue;
    --card-bg-clr: somevalue;
}

我不介意初始配置的工作量，但问题在于没法再用工具类设置颜色（我不会为单一用途生成.card-bg或.card-text-clr这类工具类），设置卡片背景色只能在CSS文件里操作，非常不方便。

希望了解各位在项目中解决该问题的方案，我已经使用SASS，因此接受包含SASS的解决方案。

内容的提问来源于stack exchange，提问作者Ahmed-El-Bald