html - 为 Web 应用程序实现主题

Question

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

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

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

Answer 1

您可以采用的一种解决方案是使用 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 样式表。将它们都包含在您的 each 中并带有 title 属性。添加默认样式的元标记，然后使用 JavaScript 将该元标记设置为正确的样式表。这使您能够动态更改页面使用的样式表。

根据您的用例，您可以使用本地存储来保存用户选择的样式表并检查上传页面加载情况。

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

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