语义UI中的动态主题更改

Question

有很多问题要问如何在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">
// 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一个ID“ theme”，以使其更容易找到并动态替换href：

<link id="theme" rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">

Answer 1

“所以它已经被处理和组合，并且要交换主题，我认为所有必要的是将一个 Semantic.min.css 文件与另一个主题的构建输出交换。”

正确的。

根据您是拥有每个用户的样式，还是用户可以选择的多个主题，您可以简单地拥有单独的 less 文件，这些文件具有每个主题的覆盖，这些文件可以用 webpack 编译，但可能不会插入到您的 index.html 中。然后您可以<link>根据用户偏好动态添加/删除s 。如果您<link>通过前端 javascript插入标签，动态添加将导致从默认样式闪烁到每个用户的主题样式（因为它必须等待前端 JS 加载，这将在同时，然后注入新的<link>并且只有在加载新样式后才显示新样式）。添加每用户<link>标签服务器端以使其无缝。