为web应用程序实现主题

我正在构建一个web应用程序，我想要有不同的颜色主题供用户选择。为web应用程序实现主题

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

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

来源

2013-05-02 sublime

CSS本身不能，但没有什么能阻止你用另一种可以做这种计算的语言来发布CSS – 2013-05-02 22:23:34

不是CSS，但你总是可以将它们的选择存储在一个变量（服务器，cookie等）中，然后样式表中的一个开关，用于确定颜色，布局等。 – 2013-05-02 22:23:55

你可以做的一个解决方案是使用像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样式表。将它们都包含在每个标题属性中。添加默认样式的元标记，然后使用JavaScript将该元标记设置为正确的样式表。这使您可以动态更改您的页面使用哪种样式表。

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

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

希望这将指向你在正确的方向。

来源

2013-05-02 23:18:32 JMWhittaker

使用多个样式表并不坏，你只需要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" />

然后在<体>提供了一种通过在组合框中列出他们切换主题：

<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-02 23:28:23

为web应用程序实现主题

回答

相关问题