Changing GTK 3 Themes with BASH and Zenity Commands

BASH，GTK，Tutorial

Changing GTK 3 Themes with BASH and Zenity Commands

【摘要】如果每次更換佈景要自己改設定檔，很不方便。本文敘述更換 GTK 3 佈景的 BASH 和 Zenity 指令，可以很輕易地更換佈景。


【目錄】

    【前言】
    【準備工作】
    【原理】
    【指令說明】
    【後語】
    【附錄】

【前言】

一、先前的網誌敘述了十六種 GTK 3 的佈景，每次更換需自己修改設定檔，頗為麻煩。因此用 BASH 和 Zenity 指令寫了一個很短的程式，以快速更換佈景。這曾在 Google 的 Blogger 發表過，近日重新整理，分享於此。


二、完整的指令在【附錄】裡。本例將之存成 change-theme 檔，放在 $HOME/.local/bin/ 目錄中，且設為可執行檔。開啟虛擬終端機，輸入 change-theme 即可更改佈景。當然 $PATH 需已包含此目錄。

all-themes

（製作本圖的指令請見【後語】）


【準備工作】

一、這十六種佈景的 css 檔要先依前篇 “GTK 3 Themes” 所述的方法一一製作好（都只要修改前面十九行即可），才能使用本程式。


二、檔名以紅色為例，深淺分別是 red-dark.css 和 red-light.css。其餘橙、黃、綠、藍、靛、紫、灰色的英文分別是 orange、yellow、green、blue、indigo、purple、gray。


三、本文用 themeName 做通用的佈景名稱，放在 $HOME/.themes/ 目錄中。各位要用什麼佈景名，就以之取代 themeName。themeName 目錄裡是 gtk-3.0 目錄，所有的 css 檔都放在這裡面。以深紅色為例，其全路徑是 $HOME/.themes/themeName/gtk-3.0/red-dark.css。


【原理】

一、通常 GTK 3 的佈景若有深淺兩種，在 $HOME/.themes/themeName/gtk-3.0/ 目錄裡會有 gtk.css 和 gtk-dark.css 兩檔。這兩個檔名是官方規定的，不能更改，也一定要在 gtk-3.0/ 目錄中。

如果 $HOME/.config/gtk-3.0/settings.ini 檔的 gtk-application-prefer-dark-theme 設定是 0，會用 gtk.css 檔；若是 1，則用 gtk-dark.css 的設定。

因為一次只會用這兩檔中的一檔，所以本例予以簡化，只用 gtk.css 檔。因此必需設定：

gtk-application-prefer-dark-theme = 0

二、因為十六色的檔名各異，所以比較方便的方法是在 gtk.css 檔中呼叫其中一檔。語法是：

@import url("檔名");

當然也可以用更改檔名的方式，但此法需有另一檔記錄目前的設定，才能改來改去，未必比較方便。


【指令說明】

一、先用 Zenity 的 list 對話框列出所有的選項。因為一次只能選一種，所以用 radiolist。

zenity --list --radiolist --width=200 --height=580 \
  --text "請選擇新佈景：\n" \
  --column "單選" --column "佈景" \
  FALSE 深紅色 \
  FALSE 淺紅色 \
  FALSE 深橙色 \
  FALSE 淺橙色 \
  FALSE 深黃色 \
  FALSE 淺黃色 \
  FALSE 深綠色 \
  FALSE 淺綠色 \
  FALSE 深藍色 \
  FALSE 淺藍色 \
  FALSE 深靛色 \
  FALSE 淺靛色 \
  FALSE 深紫色 \
  FALSE 淺紫色 \
  TRUE 深灰色 \
  FALSE 淺灰色

  --text：最上面的說明，通常是這個對話框的目的。
  --column：定義欄名。至少兩欄，第一欄一定是 radio，後欄才是自己的內容。
  column 後面一一對應地列出各項，因為有兩欄，所以每一列要有兩項。前項不是 TRUE 就是 FALSE； TRUE 表預選項，radiolist 只能有一個。


二、儲存所選項目。

Theme=$(上面 zenity 的內容)

這種對話框按 [OK] 的輸出內容是所選項 radio 旁那一欄的內容。即使定義了三欄、四欄做說明，也是一樣。

Theme=$() 是把輸出內容儲存在 Theme 變數中。


三、取出深或淺。

Shade=${Theme:0:1}

把第一字「深」還是「淺」用 Shade 變數儲存。


四、因為本例檔名用英文，所以改為英文。

case ${Shade} in
  淺 ) Shade=light;;
  *  ) Shade=dark;;
esac


五、把顏色第二字——七彩或灰——用 Color 變數儲存，然後改為英文。

Color=${Theme:1:1}
case ${Color} in
  紅 ) Color=red;;
  橙 ) Color=orange;;
  黃 ) Color=yellow;;
  綠 ) Color=green;;
  藍 ) Color=blue;;
  靛 ) Color=indigo;;
  紫 ) Color=purple;;
  *  ) Color=gray;;
esac


六、將對應的檔名設定在 gtk.css 檔中。

echo "@import url(\"${Color}-${Shade}.css\");" > "$HOME/.themes/themeName/gtk-3.0/gtk.css"

若 gtk.css 檔不存在，會新增；若已存在，會被覆寫。


【後語】

一、記得 $HOME/.config/gtk-3.0/settings.ini 檔必需設定：

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/themeName" "/usr/share/themes"


四、上面圖片是用 ImageMagick 製作，來源圖檔的尺寸就是 zenity 設定的 200×580。

montage \
  red-dark.png red-light.png \
  orange-dark.png orange-light.png \
  yellow-dark.png yellow-light.png \
  green-dark.png green-light.png \
  blue-dark.png blue-light.png \
  indigo-dark.png indigo-light.png \
  purple-dark.png purple-light.png \
  gray-dark.png gray-light.png \
  -tile 4x4 -geometry '150x435+1+1' all-themes.png

【附錄】

#!/bin/bash
 
Theme=$(zenity --list --radiolist --width=200 --height=580 --text "請選擇新佈景：\n" --column "單選" --column "佈景" FALSE 深紅色 FALSE 淺紅色 FALSE 深橙色 FALSE 淺橙色 FALSE 深黃色 FALSE 淺黃色 FALSE 深綠色 FALSE 淺綠色 FALSE 深藍色 FALSE 淺藍色 FALSE 深靛色 FALSE 淺靛色 FALSE 深紫色 FALSE 淺紫色 TRUE 深灰色 FALSE 淺灰色)
 
Shade=${Theme:0:1}
case ${Shade} in
  淺 ) Shade=light;;
  *  ) Shade=dark;;
esac
 
Color=${Theme:1:1}
case ${Color} in
  紅 ) Color=red;;
  橙 ) Color=orange;;
  黃 ) Color=yellow;;
  綠 ) Color=green;;
  藍 ) Color=blue;;
  靛 ) Color=indigo;;
  紫 ) Color=purple;;
  *  ) Color=gray;;
esac
 
echo "@import url(\"${Color}-${Shade}.css\");" > "$HOME/.themes/themeName/gtk-3.0/gtk.css"

已發表

發表留言