如何减少媒体查询代码重复？多主题CSS优化问询

我的网站支持dark、light、system三种主题：

• system主题会通过prefers-color-scheme媒体查询自动切换dark/light模式
• 根HTML元素会对应添加theme-system、theme-light或theme-dark类

当前使用的CSS代码如下：

html {
    --dark-background:   #212121;
    --dark-text:         #bdbdbd;

    --light-background:   #bdbdbd;
    --light-text:         #212121;
}

.theme-system, .theme-dark {
    --background:   var(--dark-background);
    --text:         var(--dark-text);
}

.theme-light {
    --background:   var(--light-background);
    --text:         var(--light-text);
}

@media (prefers-color-scheme: light) {
    .theme-system {
        --background:   var(--light-background);
        --text:         var(--light-text);
    }
}

我发现--dark-background这类变量只用到一次，但--light-background需要在两处引用。如果能避免重复引用，就可以直接去掉这些--dark-*/--light-*间接变量来简化代码，想要实现类似以下伪代码的效果：

.theme-system, .theme-dark {
    --background:   #212121;
    --text:         #bdbdbd;
}

@media (prefers-color-scheme: light) .theme-system, .theme-light {
    --background:   #bdbdbd;
    --text:         #212121;
}

可以通过调整选择器和媒体查询的结构，直接定义颜色值，去掉中间变量。核心逻辑和原代码完全一致，具体实现如下：

/* 深色主题：theme-dark 和 默认状态下的theme-system */
.theme-dark, .theme-system {
    --background: #212121;
    --text: #bdbdbd;
}

/* 浅色主题：直接给theme-light设置 */
.theme-light {
    --background: #bdbdbd;
    --text: #212121;
}

/* 系统偏好为浅色时，切换theme-system到浅色 */
@media (prefers-color-scheme: light) {
    .theme-system {
        --background: #bdbdbd;
        --text: #212121;
    }
}

这样就完全去掉了冗余的间接变量，同时满足所有主题需求：

• 当HTML类为theme-dark时，使用深色变量
• 当HTML类为theme-light时，使用浅色变量
• 当HTML类为theme-system时，默认用深色，若系统偏好浅色则自动切换为浅色

如果后续需要统一修改颜色，也可以用基础变量来管理（这是可选优化，仅当颜色在更多场景复用时有意义）：

html {
    --dark-bg: #212121;
    --dark-text: #bdbdbd;
    --light-bg: #bdbdbd;
    --light-text: #212121;
}

.theme-dark, .theme-system {
    --background: var(--dark-bg);
    --text: var(--dark-text);
}

.theme-light {
    --background: var(--light-bg);
    --text: var(--light-text);
}

@media (prefers-color-scheme: light) {
    .theme-system {
        --background: var(--light-bg);
        --text: var(--light-text);
    }
}

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