Semantic UI 佈景主題( Themes )樣式變更的方法

並不是所有Semantic UI的元件或組計都有佈景主題( Themes )可變化，因此如果想要知道是否有可變化的佈景主題( Themes )，則可以到官方網站去看每個元件的佈景主題( Themes )支援程度。


我們可以利用 Node 將Semantic UI的佈景主題重新編譯， Windows 用戶可以到 這裡下載Node 。

安裝以後執行 Node.js command prompt 開啟命令列模式。

接著到 Semantic UI 官方網站 下載最新版本的內容

下載以後解縮到硬碟，記住Semantic UI的路徑，等會將會需要用到。

依照Semantic UI 官方教材所說的，還需要安裝 Gulp ，因此在剛剛開啟命令列提示視窗中輸入

npm install -g gulp

安裝Gulp以後，進入Semantic UI的目錄底下，在此例子中，路徑為 D:\Semantic-UI-1.10.2 ，進入該路徑。

進入目錄時，要先確定該目錄是否含有 package.json 

 如果這時候想更換佈景主題，就必須先到 src 這個目錄底下找出 theme.config.example 這個檔案，將檔案內容部分變更為你理想中的佈景主題。

可以看到設定 default 為主要佈景主題方案，如果需要，可以將其中一個項目改為目標佈景主題，例如，將button項目改為 material 

/* Global */

@site       : 'default';

@reset      : 'default';

/* Elements */

@button     : 'material ';

@divider    : 'default';

@flag       : 'default';

@header     : 'default';

@icon       : 'default';

@image      : 'default';

@input      : 'default';

@label      : 'default';

@list       : 'default';

@loader     : 'default';

@rail       : 'default';

@reveal     : 'default';

@segment    : 'default';

@step       : 'default';

其中 default 也是佈景主題的一種

如果打開其中的目錄就會發現此佈景主題所支援的項目

每種主題的支援項目並不一定，因此需要個別自行查看。

為了證明佈景主題的確改變，先進入 Semantic-UI 目錄底下的 examples目錄，打開homepage.html

得到了使用預設佈景主題畫面。

其中 按鈕元素的樣式與 MouseOver樣式為

注意:

要進行此步驟前，需要先將 Semantic UI 1.10.2 中的 package.json 做一個修改，否則會無法進行下去。

請將 package.json 中的

"wrench"            : "git://github.com/derekslife/wrench-js.git#156eaceed68ed31ffe2a3ecfbcb2be6ed1417fb2"

這一段改成

"wrench"            : "1.*"

即可。

現在開始進入安裝並設定 Semantic UI，在開啟命令列提示視窗中輸入

npm install

安裝命令執行完畢後，會自動進入安裝模式，這時候會問選擇安裝模式，請選擇第一個自動模式

接下來會再問你是否在安裝以後刪除原始擋，選 No Thanks

接著會問是否堪使建置Semantic UI，選擇YES以後，就會開始編譯

編譯完畢以後所產生的檔案會覆蓋 Semantic UI 底下的 dist 目錄所有檔案以及其子目錄，因此將此 dist 目錄內容複製到要使用的站台即可。

接下來我們來驗證佈景主題是否改變，進入 Semantic-UI 目錄底下的 examples目錄，打開homepage.html 會發現，原來的按鈕MouseOver樣式已經改變成 material 的陰影樣式了

所有動作執行到這裡，就完成了更換佈景主題的動作。

希望此篇可以幫助到你，謝謝。