语义 UI 多个语义 UI 主题的主题构建器,支持 Font Awesome 类名和原始语义 UI React 文档演示

Semantic UI theme builder for multiple Semantic UI themes with support for Font Awesome classnames and original Semantic UI React docs demo

我是 Semantic UI 的忠实粉丝,更甚是 Semantic UI React。除了它们是优秀的库之外,它们的文档也很棒。

但是,为其组件编写和维护主题可能很麻烦。编写、构建和维护多个主题变得更加困难。

所以问题是:如何编写、构建和维护多个语义 UI 主题并使用官方语义 UI 文档查看它们的状态?

在使用 Semantic UI 多年后,终于开始写一个合适的主题构建器,我想出了这个问题的解决方案 here

该存储库是 Semantic UI React 的克隆,在根目录中有一个主题目录。

构建的主题的源代码存在于 themes/src/themes/ 中。在此回购中包含的示例中 你会发现一个父主题和两个子主题。

  • parent-theme:可以定义通用覆盖的父主题,它使用来自子主题的变量
  • child-theme-light:一个子主题,其中定义了浅色主题的颜色变量, 由父主题中的变量和覆盖使用
  • child-theme-dark:子主题,其中定义了深色主题的颜色变量, 由父主题中的变量和覆盖使用

我这样写是为了能够创建具有共同特征的嵌套主题, 例如同一应用程序的浅色和深色主题,其中颜色变量在子主题中定义, 覆盖是在父主题中定义的,它使用颜色变量。

我还添加了使用 Font Awesome native 类 的功能,这样你就可以写 <Icon className='fas fa-check'> 并且复选图标将呈现。