Semantic 中的动态主题变化-UI

Question

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

之后

我想允许站点的每个用户保存他们自己的 主题偏好。我有一些用户喜欢深色主题，另一些用户是色盲，还有一些用户视力不好，需要更大的字体或更高的对比度等。

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

我想我很高兴能够将 class 添加到元素的 class 列表中（例如 "github"）并让它使用该主题该用户（即使只是针对该元素）。但是 理想情况下，我想让我的页面加载额外的 .less 或 .css 文件，并为该用户在站点范围内覆盖，针对用户select编辑的主题。

我在语义方面还很陌生-ui 并且对 webpack 站点应用动态更改。关于如何在 build 之后应用额外的较少变量更改，或重新加载整个 Semantic-UI 主题，如 demo，有什么建议吗？

请注意，演示站点不是 link 到 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文件与b[的输出交换=103=]ld 为另一个主题。 .js 文件是相同的，至少对于默认主题与 github 主题是一样的。

如果这是真的，则需要将 semantic.min.css 复制到另一个文件，例如 semantic.github.min.css 并改用该 .css 文件。或者将其复制到主题子文件夹，如 github/semantic.min.css。然后，无论哪种情况，在最初引用的样式表上用新的 href 更新 DOM。

总结：看起来它都在 semantic*.css 文件中，交换不同 builds 的输出允许我们交换主题。今晚晚些时候我会测试这个。

更新二：

我用所有 github 条目更新了 theme.config 文件，然后 rebuilt dist 文件夹，将 semantic.min.css 复制为语义-github.min.css到我的原始静态文件夹，然后将 href 更新为 select 它：

// 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

"So it's already processed and combined, and to swap themes, I think all that is necessary is to swap one semantic.min.css file with the output of the build for another theme."

正确。

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

Semantic 中的动态主题变化-UI

Dynamic theme change in Semantic-UI

javascript

semantic-ui