Semantic UIのデフォルトカラーを変更する

次に同じことをやるときに手順を忘れていると思うので、自分向けのメモ。

Semantic UIのColorを変えたくて、Themingのページを読んだけど、いまいちよくわからず、手を動かしてみました。

まずはSemantic UIのソースをGitHubからクローンします。
github.com

自分の環境はWindows 10でnpmは5.6が入ってました。（古い…）ビルドするのにgulpが必要とのことで次のコマンドでインストールしました。

npm install -g gulp

以下でビルドできました。

cd Semantic-UI
npm install
gulp build

で、Colorの定義を変えるためにSemantic-UI\src\site\globalsのsite.variablesを開きます。

f:id:kikutaro777:20190228164307p:plain

中身は空なので、以下を定義。それぞれ乃木坂46、欅坂46、日向坂46のカラーコードに変更しました。

/*******************************
     User Global Variables
*******************************/
@purple         : #7e1083;
@green          : #a0d468;
@teal           : #7cc8e9;

で、再度ビルドするとdistフォルダにsemantic.min.cssなどが格納されます。

以下のような定義を試すと

f:id:kikutaro777:20190228164424p:plain

<div class="ui container">
    <h1 class="ui header">nogizaka</h1>
    <div class="ui inverted purple segment"></div>

    <h1 class="ui header">keyaki</h1>
    <div class="ui inverted green segment"></div>
        
    <h1 class="ui header">hinata</h1>
    <div class="ui inverted teal segment"></div>
</div>
<link rel="stylesheet" href="css/semantic.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/semantic.min.js"></script>