Semantic-UI 中的动态主题更改

Question

有很多问题询问如何在 Semantic-UI 中更改主题，但我什至找不到涉及更改主题的问题动态，即在 webpack 构建之后.

我想让网站的每个用户保存他们自己的主题偏好。我有一些用户喜欢深色主题，还有一些用户是色盲的，还有一些用户眼睛较弱，需要更大的字体，或者更多的对比度等。

我知道动态更改主题是可能的，因为语义用户界面演示都是这样做的。不幸的是，我看到的主题页面和所有文档都描述了如何更改站点范围的主题，并将其应用到新的站点范围的构建中。或者自定义（仍然）站点范围的构建。

我想我很高兴能够将一个类添加到一个元素的类列表（例如“github”）并让它为该用户使用该主题（即使它只是用于该元素） .但是理想情况下，我想让我的页面加载一个额外的 .less 或 .css 文件，该文件具有站点范围的覆盖为该用户，对于用户-选定的主题。

我仍然是相当新的语义 UI 和将动态更改应用于 webpack 站点。关于如何在构建后应用额外的较少变量更改或重新加载整个 Semantic-UI 主题的任何建议，例如 demo 吗？

请注意，演示站点不是指向 GitHub 的链接；它看起来很像，右上角附近有一个油漆罐图标，它会打开一个侧边栏，允许您更改主题。 动态。

更新：

我现在需要对此进行测试，但我可能会在这里为我自己的问题找到答案。

似乎gulp build 进程通常会将所有less 文件和其他文件编译并组合到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。

总结：看起来一切都在语义*.css 文件中，交换不同构建的输出允许我们交换主题。今晚晚些时候我会测试一下。

更新 2：

我用所有 github 条目更新了 theme.config 文件，然后重建了 dist 文件夹，将 semantic.min.css 作为语义-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">

Answer 1

“所以它已经被处理和组合了，为了交换主题，我认为只需将一个语义.min.css 文件与构建的输出交换为另一个主题。”

正确。

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