4

我正在构建一个 Web 应用程序，我希望用户可以选择不同的颜色主题。

我可以有不同的样式表，然后我可以加载我想要的样式表，但我认为这将是很多代码（即使我只是将主题级别的 CSS 取出到一个单独的文件中）。

我想知道是否有一种方法可以以某种方式设置全局主题参数，然后所有 CSS 属性都可以使用它来计算适合该主题参数值的颜色。

4

2 回答 2

3

使用多个样式表并没有那么糟糕，您只需要在页面的 <head> 部分中添加几行 JavaScript：

 <script type="text/javascript">
    function switchCSS(NewCSS)
    {
        document.getElementById("theme").href=NewCSS;
    }
 </script>

样式表的命名链接：

 <link id="theme" rel="stylesheet" href="css/gray.css" type="text/css" />

然后在 <body> 中提供一种通过在组合框中列出主题来切换主题的方法：

<select onchange="switchCSS(value);">
    <option value="gray.css">Gray</option>
    <option value="blue.css">Blue</option>
    <option value="red.css">Red</option>
</select>
于 2013-05-02T23:28:23.687 回答
3

您可以做的一种解决方案是使用 CSS 预处理器，如 SASS。像往常一样创建样式表，而不是直接在单独的主题 .scss 文件中为它们创建变量以用作参考，而不是直接编写颜色。

light_theme.scss 文件中的示例：

$page_background_color: #f7f7f7;

在 dark_theme.scss 文件中：

$page_background_color: #333;

然后你的主 .scss 文件：

body {
     background-color: $page_background_color;
}

所以当使用 SASS 编译时，结果将是两个 .css 样式表。将它们都包含在每个标题属性中。添加 Default-style 的元标记，然后使用 JavaScript 将该元标记设置为正确的样式表。这使您能够动态更改页面使用的样式表。

根据您的用例，您可以使用 localstorage 保存用户选择的样式表并检查该上传页面加载。

我有上述要点 - https://gist.github.com/jmwhittaker/4540000

希望这将为您指明正确的方向。

于 2013-05-02T23:18:32.913 回答