Question

（更新2 ：此问题是在SPA的上下文中，尽管与该问题关系不大。）

我的用户分为天空爱好者和森林爱好者。由于我无意告诉他们使用哪种配色方案，并且由于我无意发布单独的应用程序，因此我提供了一个在两个调色板之间进行选择的复选框。

这很简单。例如，我们可以选择容器并设置其类。

function change_palette(cb) {
    var bg = document.getElementById("somecontainer");
    var fg = document.getElementById("sometext");
    if(!cb.checked) {
        bg.className = "mycontainer sky_bgcol";
        fg.className = "mytext sky_fgcol";
    }
    else {
        bg.className = "mycontainer forest_bgcol";
        fg.className = "mytext forest_fgcol";
    }
}

.sky_fgcol { color: #D6EAF8; }
.sky_bgcol { background-color: #2e86c1; }

.forest_fgcol { color: #D4EFDF; }
.forest_bgcol { background-color: #196F3D; }

.mycontainer { width: 400px; height: 300px; }
.mytext { text-align: center; }
.floatright { float: right; }

<div id="somecontainer" class="mycontainer sky_bgcol">
    <div id="sometext" class="mytext sky_fgcol">
        <h2>Title</h2>
        <label class="floatright">
            <input type='checkbox'
                onclick='change_palette(this);'>Sky/Forest
        </label>
    </div>
</div>

但是，如果我们没有六种颜色或七种颜色而不是两种颜色，而我们有几十种而不是两种DIV，则这种方法存在两个问题。

change_palette()函数很脆弱。它需要知道哪些元素属于哪个调色板。某人迟早会添加一个元素，但无法适当地修改此功能。
每种配色方案的各个部分均未连接。正确的解决方案是将一个 pointer 更改为天空/森林以调整调色板。

我可以通过编写一个仅在一个地方指定必要设置的配置文件来解决这两个问题。

但是我想知道这样做是否会过大，并且SASS / SCCC都具有可以更好地解决此问题的功能。有吗您是否可以通过其他方式提供一种好的解决方案的指针？

更新1

Paul suggests使用CSS变量，然后（在JavaScript中）在调色板之间进行切换，但这是不可取的，因为这两种颜色会在CSS和Javascript之间重复（这也使CSS变量变得难以维护。多余的定义。

P.S .：我提供了MWE，以便我们进行具体的问答。

Answer 1

如果只想更改颜色，则应使用css变量（自定义属性）：

:root{
    --main-color: #D6EAF8;
    --main-bg-color: #2e86c1;
}

.sky_fgcol { color: var(--main-color) }
.sky_bgcol { background-color: var(--main-bg-color) }

然后您使用类似的方法来切换它们：

document.documentElement.style.setProperty('--main-color', 'yellow');
document.documentElement.style.setProperty('--main-bg-color', 'red');

在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

如果您想在一个呼叫中切换整个调色板，则可以通过对主体或高级元素上的所有对象进行作用域确定来进行切换，例如，您在标签上使用了class =“ sky”，并且要更改它，只需替换掉与新的类。然后必须将css的范围定为：

.sky .fgcol{...}
.sky .bgcol{...}

或者您可以使用变量和变量范围：

.sky{
    --main-color: #D6EAF8;
    --main-bg-color: #2e86c1;
}
.fgcol{color: var(--main-color)}

就像这样，您不必显式地定义类的范围并重写它们，而只需定义不同的范围来定义所有变量，然后将它们从主体中切换即可。一类替换。

通过复选框更改HTML页面的调色板

1 个答案: