logo标签列表

实现Web应用程序的主题

htmlcss
4

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

我可以使用不同的样式表，然后加载我想要的那一个，但是我认为这将需要大量的代码（即使我只是将主题级别的CSS分离到单独的文件中）。

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

1
CSS本身无法进行此类计算，但没有任何阻止您使用另一种可以进行此类计算的语言来发出CSS。 - Explosion Pills
不是CSS，但你可以将用户的选择存储在变量（服务器、cookie等）中，然后在样式表中使用switch语句来确定颜色、布局等。 - David Starkey
2个回答
4

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

例如，在 light_theme.scss 文件中：

$page_background_color: #f7f7f7;

在dark_theme.scss文件中：
$page_background_color: #333;

然后，您的主要 .scss 文件：
body {
     background-color: $page_background_color;
}

因此，使用SASS编译后的结果将是两个.css样式表。在您的中都包含它们，并添加一个title属性。添加Default-style元标记，然后使用JavaScript将该元标记设置为正确的样式表。这使您可以动态更改页面使用的样式表。
根据您的用例，您可以使用localstorage保存用户对样式表的选择，并在每次加载页面时检查它。
我有一个上述内容的Gist-https://gist.github.com/jmwhittaker/4540000 希望这能指引您朝着正确的方向前进。
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接