Конструктор тем Semantic UI для нескольких тем Semantic UI с поддержкой имен классов Font Awesome и оригинальной демонстрации Semantic UI React docs - PullRequest
Новая
       19

Конструктор тем Semantic UI для нескольких тем Semantic UI с поддержкой имен классов Font Awesome и оригинальной демонстрации Semantic UI React docs

0 голосов
/ 06 ноября 2018

Я большой поклонник Semantic UI и тем более Semantic UI React. Помимо прекрасных библиотек, их документы просто потрясающие.

Однако написание и ведение тем для их компонентов может быть громоздким. И становится все труднее писать, создавать и поддерживать несколько тем.

Таким образом, вопрос заключается в следующем: как писать, создавать и поддерживать несколько тем Semantic UI и просматривать их состояние с использованием официальных документов Semantic UI?

1 Ответ

0 голосов
/ 06 ноября 2018

После многолетней работы с Semantic UI и, наконец, приступив к написанию правильного компоновщика тем, я нашел решение этой проблемы здесь .

Репозиторий является клоном Semantic UI React с каталогом тем в корневом каталоге.

Исходный код создаваемых тем находится в themes/src/themes/. В примере, включенном в этот репо Вы найдете одну родительскую тему и две дочерние темы.

  • parent-theme: родительская тема, в которой можно определить общие переопределения, которые используют переменные из дочерних тем
  • child-theme-light: дочерняя тема, в которой определены переменные цвета для светлой темы, которые используются переменными и переопределяют в родительской теме
  • child-theme-dark: дочерняя тема, в которой определены переменные цвета для темной темы, которые используются переменными и переопределяют в родительской теме

Я написал это так, чтобы иметь возможность создавать вложенные темы, которые имеют общие характеристики, например светлые и темные темы для того же приложения, в котором переменные цвета определены в дочерних темах, и переопределения определены в родительской теме, которые используют переменные цвета.

Я также добавил возможность использования собственных классов Font Awesome, чтобы вы могли писать <Icon className='fas fa-check'> и значок проверки будет отображаться.

...