有许多问题询问如何在Semantic-UI中更改主题，但我甚至无法找到一个问题，即它指的是动态更改主题 ，即在webpack构建之后
我希望允许网站的每个用户为主题保存他们自己的偏好设置。我有一些用户喜欢黑暗主题，有些人喜欢色盲，有些人眼睛很弱，需要更大的字体，或者更多的对比等等。
我知道可能动态更改主题，因为语义ui演示都是这样做的。不幸的是，Theming页面和我见过的所有文档都描述了如何更改站点范围的主题，并将其应用于新的站点范围内。或者自定义（仍然）站点范围的构建。
我想我很高兴能够在类列表中添加一个类（例如“github”）并让它为该用户使用该主题（即使它仅用于该元素） 。但是理想情况下，我想让我的页面加载一个额外的.less或.css文件，其中包含该用户的站点覆盖，对于用户来说 - 选定的主题。
我仍然是新的语义ui并将动态更改应用于webpack网站。有关如何在构建后应用其他较少变量的更改或重新加载整个Semantic-UI主题（如demo）的建议吗？
请注意，演示网站 是指向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文件是相同的，至少对于默认的vs github主题。
如果这是真的，则需要将semantic.min.css复制到备用文件，例如semantic.github.min.css并使用该.css文件。或者将其复制到主题子文件夹，如github/semantic.min.css。然后，在任何一种情况下，使用最初引用的样式表上的新href更新DOM。
总结：看起来它只是在语义* .css文件中，并且交换不同构建的输出允许我们交换主题。我今晚稍后会对此进行测试。
更新2：
我用所有github条目更新了theme.config文件，然后重建了dist文件夹，将semantic.min.css作为semantic-github.min.css复制到我的静态文件夹中，然后更新了href选择它：
// normally: <link rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
// non-default: <link rel="stylesheet" type="text/css" href="/static/semantic/semantic-theme.min.css">
function swapThemeCss (theme) {
console.log('Theme change to "' + theme + '".')
let sheet = document.querySelector('#theme')
if (!sheet) {
return
}
if (theme === 'default') {
sheet.setAttribute('href', '/static/semantic/semantic.min.css')
} else {
sheet.setAttribute('href', '/static/semantic/semantic-' + theme + '.min.css')
}
}
哦，在上面的例子中，我给了link一个'theme'的id，以便更容易找到它并动态替换href：
<link id="theme" rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
答案 0 :(得分：3)
“所以它已经被处理和组合，并交换主题，我认为所有必要的是将一个semantic.min.css文件与另一个主题的构建输出交换。”
正确。
根据您是拥有每个用户的样式，还是只有用户可以选择的多个主题，您可以简单地使用每个主题覆盖单独的较少文件，这些文件可以使用webpack进行编译，但可能不会插入到索引中html的。然后，您可以根据用户首选项动态添加/删除<link>。如果您通过前端javascript插入<link>标记，则动态添加将导致从默认样式到每用户主题样式的闪烁（因为它必须等待前端JS加载，这将呈现页面/同时默认样式，然后注入新的<link>并仅在加载后显示新样式。添加每用户<link>标记服务器以使其无缝。