多语义UI主题的语义UI主题构建器，支持Font Awesome类名和原始语义UI React docs演示 [英] Semantic UI theme builder for multiple Semantic UI themes with support for Font Awesome classnames and original Semantic UI React docs demo

问题描述

我是Semantic UI的忠实粉丝，甚至是语义UI React的粉丝。除了他们是优秀的图书馆，他们的文档是惊人的。

I am a big fan of Semantic UI and even more so of Semantic UI React. Aside from them being excellent libraries, their docs are amazing.

然而，为他们的组件编写和维护主题可能很麻烦。编写，构建和维护多个主题变得更加困难。

However, writing and maintaining themes for their components can be cumbersome. And it becomes even more difficult to write, build, and maintain multiple themes.

所以问题是：如何编写，构建和维护多个语义UI主题并进行审核他们的状态使用官方语义UI文档？

So the question is: How to write, build, and maintain multiple Semantic UI themes and review their state using the official Semantic UI docs?

推荐答案

使用Semantic UI多年后最终开始编写适当的主题建设者，我想出了这个问题的解决方案这里。

After working with Semantic UI for years and finally getting down to write a proper theme builder, I came up with this solution to the problem here.

回购是 Semantic UI React ，在根目录下有一个主题目录。

The repo is a clone of the Semantic UI React, with a themes directory at the root.

构建的主题的源代码位于 themes / src / themes / 。在此repo
中包含的示例中，您将找到一个父主题和两个子主题。

The source code of the themes that get built lives in themes/src/themes/. In the example included in this repo you will find one parent theme and two children themes.

• parent-theme：parent可以定义一般覆盖的主题，它使用来自子主题的变量


• child-theme-light：一个子主题，其中定义了轻主题的颜色变量，
  这是由父主题中的变量和覆盖消耗


• child-theme-dark：一个子主题，其中定义了黑暗主题的颜色变量，
  由变量消耗和父主题中的覆盖

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

I wrote it like this to be able to create nested themes that share common characteristics, e.g. light and dark themes for the same application where color variables are defined in the child themes, and the overrides are defined in the parent theme, which consume the color variables.

我还添加了使用Font Awesome本机类的功能，因此您可以编写
< Icon className ='fas fa-check'> 和检查图标将呈现。

I also added the capability of using Font Awesome native classes so you can write <Icon className='fas fa-check'> and the check icon will render.

这篇关于多语义UI主题的语义UI主题构建器，支持Font Awesome类名和原始语义UI React docs演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！