GTK 3 Themes

【摘要】說明如何以 Adwaita 佈景為基礎，製作灰色和七彩的佈景。深灰和淺灰的 CSS 檔可直接複製使用，另外也敘述了改成七彩的方法。

【目錄】

    【前言】
    【佈景特色】
    【使用方法】
    【特別說明】
    【改色】
        深灰改淺灰
        深灰調亮
        淺灰調暗
        改凸顯色
        改成七彩
    【後語】

【前言】

一、約半年前，將 Adwaita 的設定從頭到尾檢查一遍，去除不必要的，修改保留的，新增必要的，完成了深灰色的 GTK 3 佈景。

二、完成後，除了 GTK3 Demo 和 GTK3 Widget Factory（註一）以外，又測試過二十餘個 GTK 3 應用程式，大致都沒問題。曾發表於 Google 的 Blogger；近日重新改寫，發表於此。（註一：這兩個程式來自 gtk-3-examples 程式包。）

三、然後進一步以自製的深灰色佈景為原型，修改出淺灰和七彩的佈景；前兩篇網誌是深灰和淺灰的 CSS 檔，可直接複製使用。至於七彩的佈景下面會敘述修改的方法。只要依之而行，很容易自己做出來。

【佈景特色】

一、需要凸顯的地方（highlight）用迥異的顏色標出，很容易看到。例如：focus 的項目、預選按鈕、使用中的標籤等。

二、容易修改。官方的 Adwaita 用不同的值來定義肉眼無法分辨的顏色，而且分散各處，很難修改。例如，相近的灰色用了 #303030、#313131、#323232、#353535 等。而本佈景的灰色只用了十五個色階，且全在檔頭前十五行。此外，凸顯色（highlight）只有在第十九行一個地方，也很容易修改成其他顏色。

三、容易查找。本例每一個 css selector 各自成行，即使設定值相同也不合併，並儘量依字母排序。所以同一個 widget 的設定通常在一起，不太會分散在檔案的不同地方。

四、精簡。原本的 Adwaita 若將每一個 selector 各自分行，約有 1,500 行。本例去掉不需要的設定和註解後，不到 600 行。

五、不依賴自製圖檔。Adwaita 有一 assets 目錄，裡面是一些小圖檔。要正確顯示使用它的圖形界面，必需有這些圖檔，本例使用系統圖示，不用自製圖檔，以提高可攜性。

【使用方法】

一、將 GTK 3 深灰色佈景的內容存成 gtk-dark.css 檔，淺灰色的 GTK 3 佈景內容則存成 gtk.css 檔，放在 $HOME/.themes/Green/gtk-3.0/ 目錄中。另外在 $HOME/.config/gtk-3.0/settings.ini 檔設定：

gtk-theme-name = Green
gtk-application-prefer-dark-theme = 1

二、要用淺色佈景，修改上述設定為：

gtk-application-prefer-dark-theme = 0

三、如果 root 程式也要用這個佈景，可用以下指令建立連結：

sudo ln -sf "$HOME/.config/gtk-3.0/settings.ini" "/etc/gtk-3.0"
sudo ln -sf "$HOME/.themes/Green" "/usr/share/themes"

【特別說明】

一、本佈景適用於桌上型和筆記型電腦，可能不適用於觸控螢幕的平板電腦和手機。

二、因為橫式中文都是由左到右，所以本例去除了由右到左的設定。

三、為了簡化，本例去除了非 focus 視窗的設定，也就是含有 :backdrop 的項目。因為要區別是否為 focus 視窗，用視窗管理員（window manager）就可以了。

四、有 .view 這個 style class 的 widget 有 iconview 和 textview 和 treeview。其中 iconview 和 treeview 本例分別用 iconview.view 和 treeview.view，而把 .view 留給 textview，因為 textview.view 無效。

五、.view:selected {} 是為 ibus 輸入法而設的。paned paned paned paned {} 是為 spacefm-gtk3 檔案管理員而設的。

六、傳統上，有一些如下的顏色設定，但本例不含這些，因為去掉也無妨。如果覺得還是有需要，請自行加入。

@define-color theme_bg_color @color_3;
@define-color theme_fg_color @color_e;
@define-color theme_base_color @color_2;
@define-color theme_text_color @color_d;
@define-color theme_selected_bg_color @color_high;
@define-color theme_selected_fg_color @color_f;
@define-color theme_unfocused_bg_color darker(@color_3);
@define-color theme_unfocused_fg_color darker(@color_e);
@define-color theme_unfocused_base_color darker(@color_2);
@define-color theme_unfocused_text_color darker(@color_d);
@define-color theme_unfocused_selected_bg_color darker(@color_high);
@define-color theme_unfocused_selected_fg_color darker(@color_f);

【改色】

深灰改淺灰

將深灰色改為淺灰色只要三個步驟，但記得先將 gtk-dark.css 另存成 gtk.css。

一、將前面十五行的順序顛倒。也就是 color_1 到 color_f 改成 color_f 到 color_1。改完後是：

@define-color color_f #101010;
@define-color color_e #202020;
@define-color color_d #303030;
@define-color color_c #404040;
@define-color color_b #505050;
@define-color color_a #606060;
@define-color color_9 #707070;
@define-color color_8 #808080;
@define-color color_7 #909090;
@define-color color_6 #a0a0a0;
@define-color color_5 #b0b0b0;
@define-color color_4 #c0c0c0;
@define-color color_3 #d0d0d0;
@define-color color_2 #e0e0e0;
@define-color color_1 #f0f0f0;

二、第 16 行到第 19 行四個特殊色的十六進位碼，8 先改成 f，4 再改成 8。

@define-color color_error #f00000;
@define-color color_success #008000;
@define-color color_warning #f0f000;
@define-color color_high #00f000;

三、用文書程式中尋找取代的方法將全部的 darker 和 lighter 互換。例如：

先找 darker，取代為 zzz；
再找 lighter，取代為 darker；
最後找 zzz，取代為 lighter。

深灰調亮

若覺得本例的深灰色太暗，可以調亮；也就是將前面十九行的十六進位碼全加 shade()。

例如，把

@define-color color_1 #101010;

改成

@define-color color_1 shade(#101010, 1.5);

最後面的數字容許範圍從 0 到 2。0 是最暗，1 是原色不變，2 是最亮。

第 16 行到第 19 行的四個特殊色不要太亮，用 1.2 即可。

@define-color color_1 shade(#101010, 1.5);
@define-color color_2 shade(#202020, 1.5);
@define-color color_3 shade(#303030, 1.5);
@define-color color_4 shade(#404040, 1.5);
@define-color color_5 shade(#505050, 1.5);
@define-color color_6 shade(#606060, 1.5);
@define-color color_7 shade(#707070, 1.5);
@define-color color_8 shade(#808080, 1.5);
@define-color color_9 shade(#909090, 1.5);
@define-color color_a shade(#a0a0a0, 1.5);
@define-color color_b shade(#b0b0b0, 1.5);
@define-color color_c shade(#c0c0c0, 1.5);
@define-color color_d shade(#d0d0d0, 1.5);
@define-color color_e shade(#e0e0e0, 1.5);
@define-color color_f shade(#f0f0f0, 1.5);
@define-color color_error shade(#800000, 1.2);
@define-color color_success shade(#004000, 1.2);
@define-color color_warning shade(#808000, 1.2);
@define-color color_high shade(#008000, 1.2);

淺灰調暗

若覺得淺灰色太亮，一樣可以調暗；也是將前面十九行的十六進位碼全加 shade()。

例如，把

@define-color color_f #101010;

改成

@define-color color_f shade(#101010, 0.8);

第 16 行到第 19 行的四個特殊色也可以用 0.8。

@define-color color_f shade(#101010, 0.8);
@define-color color_e shade(#202020, 0.8);
@define-color color_d shade(#303030, 0.8);
@define-color color_c shade(#404040, 0.8);
@define-color color_b shade(#505050, 0.8);
@define-color color_a shade(#606060, 0.8);
@define-color color_9 shade(#707070, 0.8);
@define-color color_8 shade(#808080, 0.8);
@define-color color_7 shade(#909090, 0.8);
@define-color color_6 shade(#a0a0a0, 0.8);
@define-color color_5 shade(#b0b0b0, 0.8);
@define-color color_4 shade(#c0c0c0, 0.8);
@define-color color_3 shade(#d0d0d0, 0.8);
@define-color color_2 shade(#e0e0e0, 0.8);
@define-color color_1 shade(#f0f0f0, 0.8);
@define-color color_error shade(#f00000, 0.8);
@define-color color_success shade(#008000, 0.8);
@define-color color_warning shade(#f0f000, 0.8);
@define-color color_high shade(#00f000, 0.8);

改凸顯色

如果凸顯色（highlight）不喜歡綠色，可以修改第十九行 color_high 的定義，例如紅、橙、黃、藍、靛、紫分別為：

@define-color color_high #800000;
@define-color color_high #804000;
@define-color color_high #808000;
@define-color color_high #000080;
@define-color color_high #400080;
@define-color color_high #800080;

改成七彩

如果不喜歡灰色，大多只要改前面十五行即可；除了綠色以外，特殊色可以不必改。以下列出各色修改後的結果，只要取代深灰或淺灰 CSS 檔的前十五行即可；唯綠色佈景也要改凸顯色，不然看不清楚。

紅－深

@define-color color_1 shade(#100000, 2);
@define-color color_2 shade(#200000, 2);
@define-color color_3 shade(#300000, 2);
@define-color color_4 shade(#400000, 2);
@define-color color_5 shade(#500000, 2);
@define-color color_6 shade(#600000, 2);
@define-color color_7 shade(#700000, 2);
@define-color color_8 shade(#800000, 2);
@define-color color_9 shade(#900000, 2);
@define-color color_a shade(#a00000, 2);
@define-color color_b shade(#b00000, 2);
@define-color color_c shade(#c00000, 2);
@define-color color_d shade(#d00000, 2);
@define-color color_e shade(#e00000, 2);
@define-color color_f shade(#f00000, 2);

紅－淺

@define-color color_f shade(#100000, 2);
@define-color color_e shade(#200000, 2);
@define-color color_d shade(#300000, 2);
@define-color color_c shade(#400000, 2);
@define-color color_b shade(#500000, 2);
@define-color color_a shade(#600000, 2);
@define-color color_9 shade(#700000, 2);
@define-color color_8 shade(#800000, 2);
@define-color color_7 shade(#900000, 2);
@define-color color_6 shade(#a00000, 2);
@define-color color_5 shade(#b00000, 2);
@define-color color_4 shade(#c00000, 2);
@define-color color_3 shade(#d00000, 2);
@define-color color_2 shade(#e00000, 2);
@define-color color_1 shade(#f00000, 2);

橙－深

@define-color color_1 shade(#100800, 1.8);
@define-color color_2 shade(#201000, 1.8);
@define-color color_3 shade(#301800, 1.8);
@define-color color_4 shade(#402000, 1.8);
@define-color color_5 shade(#502800, 1.8);
@define-color color_6 shade(#603000, 1.8);
@define-color color_7 shade(#703800, 1.8);
@define-color color_8 shade(#804000, 1.8);
@define-color color_9 shade(#904800, 1.8);
@define-color color_a shade(#a05000, 1.8);
@define-color color_b shade(#b05800, 1.8);
@define-color color_c shade(#c06000, 1.8);
@define-color color_d shade(#d06800, 1.8);
@define-color color_e shade(#e07000, 1.8);
@define-color color_f shade(#f07800, 1.8);

橙－淺

@define-color color_f shade(#100800, 1.8);
@define-color color_e shade(#201000, 1.8);
@define-color color_d shade(#301800, 1.8);
@define-color color_c shade(#402000, 1.8);
@define-color color_b shade(#502800, 1.8);
@define-color color_a shade(#603000, 1.8);
@define-color color_9 shade(#703800, 1.8);
@define-color color_8 shade(#804000, 1.8);
@define-color color_7 shade(#904800, 1.8);
@define-color color_6 shade(#a05000, 1.8);
@define-color color_5 shade(#b05800, 1.8);
@define-color color_4 shade(#c06000, 1.8);
@define-color color_3 shade(#d06800, 1.8);
@define-color color_2 shade(#e07000, 1.8);
@define-color color_1 shade(#f07800, 1.8);

黃－深

@define-color color_1 shade(#101000, 1.2);
@define-color color_2 shade(#202000, 1.2);
@define-color color_3 shade(#303000, 1.2);
@define-color color_4 shade(#404000, 1.2);
@define-color color_5 shade(#505000, 1.2);
@define-color color_6 shade(#606000, 1.2);
@define-color color_7 shade(#707000, 1.2);
@define-color color_8 shade(#808000, 1.2);
@define-color color_9 shade(#909000, 1.2);
@define-color color_a shade(#a0a000, 1.2);
@define-color color_b shade(#b0b000, 1.2);
@define-color color_c shade(#c0c000, 1.2);
@define-color color_d shade(#d0d000, 1.2);
@define-color color_e shade(#e0e000, 1.2);
@define-color color_f shade(#f0f000, 1.2);

黃－淺

@define-color color_f shade(#101000, 2);
@define-color color_e shade(#202000, 2);
@define-color color_d shade(#303000, 2);
@define-color color_c shade(#404000, 2);
@define-color color_b shade(#505000, 2);
@define-color color_a shade(#606000, 2);
@define-color color_9 shade(#707000, 2);
@define-color color_8 shade(#808000, 2);
@define-color color_7 shade(#909000, 2);
@define-color color_6 shade(#a0a000, 2);
@define-color color_5 shade(#b0b000, 2);
@define-color color_4 shade(#c0c000, 2);
@define-color color_3 shade(#d0d000, 2);
@define-color color_2 shade(#e0e000, 2);
@define-color color_1 shade(#f0f000, 2);

綠－深

@define-color color_1 #001100;
@define-color color_2 #002200;
@define-color color_3 #003300;
@define-color color_4 #004400;
@define-color color_5 #005500;
@define-color color_6 #006600;
@define-color color_7 #007700;
@define-color color_8 #008800;
@define-color color_9 #009900;
@define-color color_a #00aa00;
@define-color color_b #00bb00;
@define-color color_c #00cc00;
@define-color color_d #00dd00;
@define-color color_e #00ee00;
@define-color color_f #00ff00;
@define-color color_high #804020;

綠－淺

@define-color color_f shade(#001100, 2);
@define-color color_e shade(#002200, 2);
@define-color color_d shade(#003300, 2);
@define-color color_c shade(#004400, 2);
@define-color color_b shade(#005500, 2);
@define-color color_a shade(#006600, 2);
@define-color color_9 shade(#007700, 2);
@define-color color_8 shade(#008800, 2);
@define-color color_7 shade(#009900, 2);
@define-color color_6 shade(#00aa00, 2);
@define-color color_5 shade(#00bb00, 2);
@define-color color_4 shade(#00cc00, 2);
@define-color color_3 shade(#00dd00, 2);
@define-color color_2 shade(#00ee00, 2);
@define-color color_1 shade(#00ff00, 2);
@define-color color_high #f08040;

藍－深

@define-color color_1 shade(#000010, 2);
@define-color color_2 shade(#000020, 2);
@define-color color_3 shade(#000030, 2);
@define-color color_4 shade(#000040, 2);
@define-color color_5 shade(#000050, 2);
@define-color color_6 shade(#000060, 2);
@define-color color_7 shade(#000070, 2);
@define-color color_8 shade(#000080, 2);
@define-color color_9 shade(#000090, 2);
@define-color color_a shade(#0000a0, 2);
@define-color color_b shade(#0000b0, 2);
@define-color color_c shade(#0000c0, 2);
@define-color color_d shade(#0000d0, 2);
@define-color color_e shade(#0000e0, 2);
@define-color color_f shade(#0000f0, 2);

藍－淺

@define-color color_f lighter(shade(#000010, 1.8));
@define-color color_e lighter(shade(#000020, 1.8));
@define-color color_d lighter(shade(#000030, 1.8));
@define-color color_c lighter(shade(#000040, 1.8));
@define-color color_b lighter(shade(#000050, 1.8));
@define-color color_a lighter(shade(#000060, 1.8));
@define-color color_9 lighter(shade(#000070, 1.8));
@define-color color_8 lighter(shade(#000080, 1.8));
@define-color color_7 lighter(shade(#000090, 1.8));
@define-color color_6 lighter(shade(#0000a0, 1.8));
@define-color color_5 lighter(shade(#0000b0, 1.8));
@define-color color_4 lighter(shade(#0000c0, 1.8));
@define-color color_3 lighter(shade(#0000d0, 1.8));
@define-color color_2 lighter(shade(#0000e0, 1.8));
@define-color color_1 lighter(shade(#0000f0, 1.8));

靛－深

@define-color color_1 shade(#080010, 2);
@define-color color_2 shade(#100020, 2);
@define-color color_3 shade(#180030, 2);
@define-color color_4 shade(#200040, 2);
@define-color color_5 shade(#280050, 2);
@define-color color_6 shade(#300060, 2);
@define-color color_7 shade(#380070, 2);
@define-color color_8 shade(#400080, 2);
@define-color color_9 shade(#480090, 2);
@define-color color_a shade(#5000a0, 2);
@define-color color_b shade(#5800b0, 2);
@define-color color_c shade(#6000c0, 2);
@define-color color_d shade(#6800d0, 2);
@define-color color_e shade(#7000e0, 2);
@define-color color_f shade(#7800f0, 2);

靛－淺

@define-color color_f lighter(shade(#080010, 1.8));
@define-color color_e lighter(shade(#100020, 1.8));
@define-color color_d lighter(shade(#180030, 1.8));
@define-color color_c lighter(shade(#200040, 1.8));
@define-color color_b lighter(shade(#280050, 1.8));
@define-color color_a lighter(shade(#300060, 1.8));
@define-color color_9 lighter(shade(#380070, 1.8));
@define-color color_8 lighter(shade(#400080, 1.8));
@define-color color_7 lighter(shade(#480090, 1.8));
@define-color color_6 lighter(shade(#5000a0, 1.8));
@define-color color_5 lighter(shade(#5800b0, 1.8));
@define-color color_4 lighter(shade(#6000c0, 1.8));
@define-color color_3 lighter(shade(#6800d0, 1.8));
@define-color color_2 lighter(shade(#7000e0, 1.8));
@define-color color_1 lighter(shade(#7800f0, 1.8));

紫－深

@define-color color_1 shade(#100010, 2);
@define-color color_2 shade(#200020, 2);
@define-color color_3 shade(#300030, 2);
@define-color color_4 shade(#400040, 2);
@define-color color_5 shade(#500050, 2);
@define-color color_6 shade(#600060, 2);
@define-color color_7 shade(#700070, 2);
@define-color color_8 shade(#800080, 2);
@define-color color_9 shade(#900090, 2);
@define-color color_a shade(#a000a0, 2);
@define-color color_b shade(#b000b0, 2);
@define-color color_c shade(#c000c0, 2);
@define-color color_d shade(#d000d0, 2);
@define-color color_e shade(#e000e0, 2);
@define-color color_f shade(#f000f0, 2);

紫－淺

@define-color color_f lighter(shade(#100010, 1.7));
@define-color color_e lighter(shade(#200020, 1.7));
@define-color color_d lighter(shade(#300030, 1.7));
@define-color color_c lighter(shade(#400040, 1.7));
@define-color color_b lighter(shade(#500050, 1.7));
@define-color color_a lighter(shade(#600060, 1.7));
@define-color color_9 lighter(shade(#700070, 1.7));
@define-color color_8 lighter(shade(#800080, 1.7));
@define-color color_7 lighter(shade(#900090, 1.7));
@define-color color_6 lighter(shade(#a000a0, 1.7));
@define-color color_5 lighter(shade(#b000b0, 1.7));
@define-color color_4 lighter(shade(#c000c0, 1.7));
@define-color color_3 lighter(shade(#d000d0, 1.7));
@define-color color_2 lighter(shade(#e000e0, 1.7));
@define-color color_1 lighter(shade(#f000f0, 1.7));

【後語】

一、本文列舉的佈景有七彩和灰色且各有深淺，共十六種。每次要更換還要自己改設定檔，頗為麻煩。因此特別寫了一個很短的程式，可以很方便地更換佈景，敘述於另一篇網誌：用 BASH 和 Zenity 指令更換 GTK 3 佈景。

二、如果想自己製作 GTK 3 CSS，一定會用到 GTK 3 Style Properties 和 GTK 3 CSS Nodes。但是這些資料分散在官方 Reference Manual 各個 widget 的說明中，不利查詢。本網誌先前曾敘述過收集 nodes 的方法和收集 style properties 的方法，有興趣的人可以參考看看。