小编App*_*l W的帖子

语义UI中的动态主题更改

有很多问题要问如何在Semantic-UI中更改主题,但是我什至没有找到一个涉及动态更改主题的问题,即在Webpack构建之后。

我想允许站点的每个用户保存他们自己的主题首选项。我有些用户喜欢深色主题,有些用户则是色盲的,另一些用户眼睛较弱,需要较大的字体或更多的对比度等。

我知道有可能动态更改主题,因为语义UI演示都可以进行更改。不幸的是,主题页面和我看到的所有文档都描述了如何更改站点范围的主题,以及如何在新的站点范围的版本中应用该主题。或自定义(仍然)整个站点的构建。

我想我很高兴能够将一个类添加到某个元素的类列表中(例如“ github”),并让该类为该用户使用该主题(即使只是针对该元素)。但理想的,我想有我的网页加载整个网站的覆盖额外.LESS或.css文件(S)为用户,为用户选择的主题。

我仍然是相当新的语义用户界面,并将动态更改应用于Webpack网站。关于如何在构建后应用其他较少的变量更改,或者像演示一样重新加载整个Semantic-UI主题的任何建议?

请注意,演示站点不是指向GitHub的链接;外观相似,右上角附近有一个油漆罐图标,它会弹出一个侧边栏,您可以通过它更改主题。动态地。

更新:

我现在需要对此进行测试,但是在这里我可能会回答我的问题。

看来,gulp build过程通常编译并结合了所有少等文件到dist文件夹中semantic.csssemantic.jssemantic.min.csssemantic.min.js。它还在dist/components子文件夹中生成了不同的单独的.css文件,但是(我认为)如果要加载完整的CSS文件(例如semantic.min.css),则实际上不需要components子文件夹。对于那些要进行优化以使其仅包含所使用组件的.css文件的站点,这是存在的吗?

因此,它已经过处理和组合,并且要交换主题,我认为所需要做的就是将一个semantic.min.css文件与构建的输出交换为另一个主题。.js文件是相同的,至少对于默认主题与github主题而言是相同的。

如果是这样,则可以将其复制semantic.min.css到备用文件,semantic.github.min.css然后使用该.css文件。或将其复制到主题子文件夹,如github/semantic.min.css。然后,无论哪种情况,都使用href最初引用的样式表上的新内容更新DOM 。

简介:似乎所有内容都在semantic * .css文件中,并且交换不同构建的输出使我们可以交换主题。我今晚晚些时候测试。

更新2:

theme.config使用所有github条目更新了文件,然后重建了dist文件夹,将semantic.min.cssas语义github.min.css与原始文件一起复制到了我的静态文件夹中,然后仅更新了href以选择它:

// normally:    <link rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css"> …
Run Code Online (Sandbox Code Playgroud)

javascript semantic-ui

5
推荐指数
1
解决办法
2406
查看次数

标签 统计

javascript ×1

semantic-ui ×1