Semantic UI Doc ( Usage ) を読む

Usage には 2 つのページがあるが、説明が書いてあるのはほとんど Theming だけ。もうひとつの Layout はテーマや UI 部品のサンプル。

Semantic UI ではデフォルト変数を変更することでテーマを上書きできる。テーマの上書きについて学ぶにはサンプルプロジェクトを見るのが一番早いかもしれない。

Semantic UI には 12 個の名前付き色変数（ @pink : #FF1493 など）が用意されており、色が変化するコンポーネントはこれらのグローバル変数を使って表示される。この変数は site.variables に登録されている。

各コンポーネントでは、site.variables に登録されたグローバル変数（ @checkboxActiveBackground: @primaryColorなど ）から色を継承する。

サイト内で部分的にテーマを変更することもできる。これには theme.config を使う。たとえば、ボタンは GitHub の見た目にするが、メニューの見た目は chubby （ Semantic UI が独自に持つフラットなテーマ）にするなどができる。

テーマごとの UI 部品の見た目は Semantic UI のドキュメントページで確認できる。たとえばメニューなら https://semantic-ui.com/collections/menu.html で確認できる。UI 部品によって利用できるテーマが違うので注意が必要。

また、UI 部品ごとに .variables と .overrides ファイルがある。 .variables は変数を、 .overrides は追加の CSS スタイルを加えるのに使う。

テーマにはデフォルトテーマ、パッケージ化された UI 部品のテーマ、サイトテーマの 3 階層の変数継承がある。

...読んでみたけどあんまりわかった気がしない。