有很多问题要问如何在Semantic-UI中更改主题,但是我什至没有找到一个涉及动态更改主题的问题,即在Webpack构建之后。
我想允许站点的每个用户保存他们自己的主题首选项。我有些用户喜欢深色主题,有些用户则是色盲的,另一些用户眼睛较弱,需要较大的字体或更多的对比度等。
我知道有可能动态更改主题,因为语义UI演示都可以进行更改。不幸的是,主题页面和我看到的所有文档都描述了如何更改站点范围的主题,以及如何在新的站点范围的版本中应用该主题。或自定义(仍然)整个站点的构建。
我想我很高兴能够将一个类添加到某个元素的类列表中(例如“ github”),并让该类为该用户使用该主题(即使只是针对该元素)。但理想的,我想有我的网页加载整个网站的覆盖额外.LESS或.css文件(S)为用户,为用户选择的主题。
我仍然是相当新的语义用户界面,并将动态更改应用于Webpack网站。关于如何在构建后应用其他较少的变量更改,或者像演示一样重新加载整个Semantic-UI主题的任何建议?
请注意,演示站点不是指向GitHub的链接;外观相似,右上角附近有一个油漆罐图标,它会弹出一个侧边栏,您可以通过它更改主题。动态地。
更新:
我现在需要对此进行测试,但是在这里我可能会回答我的问题。
看来,gulp build过程通常编译并结合了所有少等文件到dist文件夹中semantic.css,semantic.js,semantic.min.css和semantic.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)