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

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

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

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


reactjs javascript themes semantic-ui-react semantic-ui
person lolero    schedule 06.11.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

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

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

person lolero    schedule 06.11.2018