296      阿裏雲  技術社區[雲棲]

如何獲取、安裝和製作 GTK 主題

多數桌麵版 Linux 都支持主題。GUI（LCTT 譯注：圖形用戶界麵）獨有的外觀或者“風格”叫做主題。用戶可以改變主題讓桌麵看起來與眾不同。通常，用戶也會更改圖標，然而，主題和圖標包是兩個獨立的實體。很多人想製作他們自己的主題，因此這是一篇關於 GTK 主題的製作以及各種製作時所必需的信息的文章。

注意： 這篇文章著重討論 GTK3，但會稍微談一下 GTK2、Metacity 等。本文不會討論光標和圖標。

基本概念

GIMP 工具包（簡稱 GTK）是一個用來在多種係統上（因此造就了 GTK 的跨平台）創建圖形用戶界麵的構件工具包。GTK（https://www.gtk.org/）通常被誤認為代表“GNOME 工具包”，但實際上它代表“GIMP 工具包”，因為最初創造它是為了給 GIMP 設計用戶界麵。GTK 是一個用 C 語言編寫的麵向對象工具包（GTK 本身不是一種語言）。GTK 遵循 LGPL 協議完全開源。GTK 是一個廣泛使用的圖形用戶界麵工具包，它含有很多用於 GTK 的工具。

為 GTK 製作的主題無法用在基於 Qt 的應用上。QT 應用需要使用 Qt 主題。

主題使用層疊樣式表（CSS）來生成主題樣式。這裏的 CSS 和網站開發者在網頁上使用的相同。然而不是引用 HTML 標簽，而是引用 GTK 構件的專用標簽。學習 CSS 對主題開發者來說很重要。

主題存放位置

主題可能會存儲在 ~/.themes 或者 /usr/share/themes 文件夾中。存放在 ~/.themes 文件夾下的主題隻有此 home 文件夾的所有者可以使用。而存放在 /usr/share/themes 文件夾下的全局主題可供所有用戶使用。當執行 GTK 程序時，它會按照某種確定的順序檢查可用主題文件的列表。如果沒有找到主題文件，它會嚐試檢查列表中的下一個文件。下述文字是 GTK3 程序檢查時的順序列表。

1. $XDG_CONFIG_HOME/gtk-3.0/gtk.css （另一寫法 ~/.config/gtk-3.0/gtk.css）
2. ~/.themes/NAME/gtk-3.0/gtk.css
3. $datadir/share/themes/NAME/gtk-3.0/gtk.css （另一寫法 /usr/share/themes/name/gtk-3.0/gtk.css）

注意： “NAME”代表當前主題名稱。

如果有兩個主題名字相同，那麼存放在用戶 home 文件夾（~/.themes）裏的主題會被優先使用。開發者可以利用這個 GTK 主題查找算法的優勢來測試存放在本地 home 文件夾的主題。

主題引擎

主題引擎是軟件的一部分，用來改變圖形用戶界麵構件的外觀。引擎通過解析主題文件來了解應當繪製多少種構件。有些引擎隨著主題被開發出來。每種引擎都有優點和缺點，還有些引擎添加了某些特性和特色。

從默認軟件源中可以獲取很多主題引擎。Debian 係的 Linux 發行版可以執行 apt-get install gtk2-engines-murrine gtk2-engines-pixbuf gtk3-engines-unico 命令來安裝三種不同的引擎。很多引擎同時支持 GTK2 和 GTK3。以下述列表為例：

• gtk2-engines-aurora - Aurora GTK2 引擎
• gtk2-engines-pixbuf - Pixbuf GTK2 引擎
• gtk3-engines-oxygen - 將 Oxygen 組件風格移植 GTK 的引擎
• gtk3-engines-unico - Unico GTK3 引擎
• gtk3-engines-xfce - 用於 Xfce 的 GTK3 引擎

創作 GTK3 主題

開發者創作 GTK3 主題時，或者從空文件著手，或者將已有的主題作為模板。從現存主題著手可能會對新手有幫助。比如，開發者可以把主題複製到用戶的 home 文件夾，然後編輯這些文件。

GTK3 主題的通用格式是新建一個以主題名字命名的文件夾。然後新建一個名為 gtk-3.0 的子目錄，在子目錄裏新建一個名為 gtk.css 的文件。在文件 gtk.css 裏，使用 CSS 代碼寫出主題的外觀。為了測試可以將主題移動到 ~/.theme 裏。使用新主題並在必要時進行改進。如果有需求，開發者可以添加額外的組件，使主題支持 GTK2、Openbox、Metacity、Unity 等桌麵環境。

為了闡明如何創造主題，我們會學習 Ambiance 主題，通常可以在 /usr/share/themes/Ambiance 找到它。此目錄包含下麵列出的子目錄以及一個名為 index.theme 的文件。

• gtk-2.0
• gtk-3.0
• metacity-1
• unity

index.theme 含有元數據（比如主題的名字）和一些重要的配置（比如按鈕的布局）。下麵是 Ambiance 主題的 index.theme 文件內容。

1. [Desktop Entry]
2. Type=X-GNOME-Metatheme
3. Name=Ambiance
4. Comment=Ubuntu Ambiance theme
5. Encoding=UTF-8
7. [X-GNOME-Metatheme]
8. GtkTheme=Ambiance
9. MetacityTheme=Ambiance
10. IconTheme=ubuntu-mono-dark
11. CursorTheme=DMZ-White
12. ButtonLayout=close,minimize,maximize:
13. X-Ubuntu-UseOverlayScrollbars=true

gtk-2.0 目錄包括支持 GTK2 的文件，比如文件 gtkrc 和文件夾 apps。文件夾 apps 包括具體程序的 GTK 配置。文件 gtkrc 是 GTK2 部分的主要 CSS 文件。下麵是 /usr/share/themes/Ambiance/gtk-2.0/apps/nautilus.rc 文件的內容。

1. # ==============================================================================
2. # NAUTILUS SPECIFIC SETTINGS
3. # ==============================================================================
5. style "nautilus_info_pane" {
6. bg[NORMAL] = @bg_color
7. }
9. widget_class "*Nautilus*<GtkNotebook>*<GtkEventBox>" style "nautilus_info_pane"
10. widget_class "*Nautilus*<GtkButton>" style "notebook_button"
11. widget_class "*Nautilus*<GtkButton>*<GtkLabel>" style "notebook_button"

gtk-3.0 目錄裏是 GTK3 的文件。GTK3 使用 gtk.css 取代了 gtkrc 作為主文件。對於 Ambiance 主題，此文件有一行 @import url("gtk-main.css");。settings.ini 包含重要的主題級配置。GTK3 主題的apps 目錄和 GTK2 有同樣的作用。assets 目錄裏有單選按鈕、多選框等的圖像文件。下麵是/usr/share/themes/Ambiance/gtk-3.0/gtk-main.css 的內容。

1. /*default color scheme */
2. @define-color bg_color #f2f1f0;
3. @define-color fg_color #4c4c4c;
4. @define-color base_color #ffffff;
5. @define-color text_color #3C3C3C;
6. @define-color selected_bg_color #f07746;
7. @define-color selected_fg_color #ffffff;
8. @define-color tooltip_bg_color #000000;
9. @define-color tooltip_fg_color #ffffff;
11. /* misc colors used by gtk+
12. *
13. * Gtk doesn't currently expand color variables for style properties. Thus,
14. * gtk-widgets.css uses literal color names, but includes a comment containing
15. * the name of the variable. Please remember to change values there as well
16. * when changing one of the variables below.
17. */
18. @define-color info_fg_color rgb (181, 171, 156);
19. @define-color info_bg_color rgb (252, 252, 189);
20. @define-color warning_fg_color rgb (173, 120, 41);
21. @define-color warning_bg_color rgb (250, 173, 61);
22. @define-color question_fg_color rgb (97, 122, 214);
23. @define-color question_bg_color rgb (138, 173, 212);
24. @define-color error_fg_color rgb (235, 235, 235);
25. @define-color error_bg_color rgb (223, 56, 44);
26. @define-color link_color @selected_bg_color;
27. @define-color success_color #4e9a06;
28. @define-color error_color #df382c;
30. /* theme common colors */
31. @define-color button_bg_color shade (@bg_color, 1.02); /*shade (#cdcdcd, 1.08);*/
32. @define-color notebook_button_bg_color shade (@bg_color, 1.02);
33. @define-color button_insensitive_bg_color mix (@button_bg_color, @bg_color, 0.6);
34. @define-color dark_bg_color #3c3b37;
35. @define-color dark_fg_color #dfdbd2;
37. @define-color backdrop_fg_color mix (@bg_color, @fg_color, 0.8);
38. @define-color backdrop_text_color mix (@base_color, @text_color, 0.8);
39. @define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75);
40. /*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/
41. @define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
42. @define-color backdrop_selected_fg_color @fg_color;
44. @define-color focus_color alpha (@selected_bg_color, 0.5);
45. @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
47. @define-color shadow_color alpha(black, 0.5);
49. @define-color osd_fg_color #eeeeec;
50. @define-color osd_bg_color alpha(#202526, 0.7);
51. @define-color osd_border_color alpha(black, 0.7);
53. @import url("gtk-widgets-borders.css");
54. @import url("gtk-widgets-assets.css");
55. @import url("gtk-widgets.css");
56. @import url("apps/geary.css");
57. @import url("apps/unity.css");
58. @import url("apps/baobab.css");
59. @import url("apps/gedit.css");
60. @import url("apps/nautilus.css");
61. @import url("apps/gnome-panel.css");
62. @import url("apps/gnome-terminal.css");
63. @import url("apps/gnome-system-log.css");
64. @import url("apps/unity-greeter.css");
65. @import url("apps/glade.css");
66. @import url("apps/california.css");
67. @import url("apps/software-center.css");
68. @import url("public-colors.css");

metacity-1 文件夾含有 Metacity 窗口管理器按鈕（比如“關閉窗口”按鈕）的圖像文件。此目錄還有一個名為 metacity-theme-1.xml 的文件，包括了主題的元數據（像開發者的名字）和主題設計。然而，主題的 Metacity 部分使用 XML 文件而不是 CSS 文件。

unity 文件夾含有 Unity 按鈕使用的 SVG 文件。除了 SVG 文件，這裏沒有其他的文件。

一些主題可能也會包含其他的目錄。比如， Clearlooks-Phenix 主題有名為 openbox-3 和 xfwm4 的文件夾。openbox-3 文件夾僅有一個 themerc 文件，聲明了主題配置和外觀（下麵有文件示例）。xfwm4 目錄含有幾個 xpm 文件、幾個 png 圖像文件（在 png 文件夾裏）、一個 README 文件，還有個包含了主題配置的 themerc 文件（就像下麵看到的那樣）。

/usr/share/themes/Clearlooks-Phenix/xfwm4/themerc

1. # Clearlooks XFWM4 by Casey Kirsle
3. show_app_icon=true
4. active_text_color=#FFFFFF
5. inactive_text_color=#939393
6. title_shadow_active=frame
7. title_shadow_inactive=false
8. button_layout=O|HMC
9. button_offset=2
10. button_spacing=2
11. full_width_title=true
12. maximized_offset=0
13. title_vertical_offset_active=1
14. title_vertical_offset_inactive=1

/usr/share/themes/Clearlooks-Phenix/openbox-3/themerc

1. !# Clearlooks-Evolving
2. !# Clearlooks as it evolves in gnome-git...
3. !# Last updated 09/03/10
5. # Fonts
6. # these are really halos, but who cares?
8. *.font: shadow=n
9. window.active.label.text.font:shadow=y:shadowtint=30:shadowoffset=1
10. window.inactive.label.text.font:shadow=y:shadowtint=00:shadowoffset=0
11. menu.items.font:shadow=y:shadowtint=0:shadowoffset=1
13. !# general stuff
15. border.width: 1
16. padding.width: 3
17. padding.height: 2
18. window.handle.width: 3
19. window.client.padding.width: 0
20. menu.overlap: 2
21. *.justify: center
23. !# lets set our damn shadows here, eh?
25. *.bg.highlight: 50
26. *.bg.shadow: 05
28. window.active.title.bg.highlight: 35
29. window.active.title.bg.shadow: 05
31. window.inactive.title.bg.highlight: 30
32. window.inactive.title.bg.shadow: 05
34. window.*.grip.bg.highlight: 50
35. window.*.grip.bg.shadow: 30
37. window.*.handle.bg.highlight: 50
38. window.*.handle.bg.shadow: 30
40. !# Menu settings
42. menu.border.color: #aaaaaa
43. menu.border.width: 1
45. menu.title.bg: solid flat
46. menu.title.bg.color: #E6E7E6
47. menu.title.text.color: #111111
49. menu.items.bg: Flat Solid
50. menu.items.bg.color: #ffffff
51. menu.items.text.color: #111111
52. menu.items.disabled.text.color: #aaaaaa
54. menu.items.active.bg: Flat Gradient splitvertical border
56. menu.items.active.bg.color: #97b8e2
57. menu.items.active.bg.color.splitTo: #a8c5e9
59. menu.items.active.bg.colorTo: #91b3de
60. menu.items.active.bg.colorTo.splitTo: #80a7d6
61. menu.items.active.bg.border.color: #4b6e99
62. menu.items.active.text.color: #ffffff
64. menu.separator.width: 1
65. menu.separator.padding.width: 0
66. menu.separator.padding.height: 3
67. menu.separator.color: #aaaaaa
69. !# set handles here and only the once?
71. window.*.handle.bg: Raised solid
72. window.*.handle.bg.color: #eaebec
74. window.*.grip.bg: Raised solid
75. window.*.grip.bg.color: #eaebec
77. !# Active
79. window.*.border.color: #585a5d
81. window.active.title.separator.color: #4e76a8
83. *.title.bg: Raised Gradient splitvertical
84. *.title.bg.color: #8CB0DC
85. *.title.bg.color.splitTo: #99BAE3
86. *.title.bg.colorTo: #86ABD9
87. *.title.bg.colorTo.splitTo: #7AA1D1
89. window.active.label.bg: Parentrelative
90. window.active.label.text.color: #ffffff
92. window.active.button.*.bg: Flat Gradient splitvertical Border
94. window.active.button.*.bg.color: #92B4DF
95. window.active.button.*.bg.color.splitTo: #B0CAEB
96. window.active.button.*.bg.colorTo: #86ABD9
97. window.active.button.*.bg.colorTo.splitTo: #769FD0
99. window.active.button.*.bg.border.color: #49678B
100. window.active.button.*.image.color: #F4F5F6
102. window.active.button.hover.bg.color: #b5d3ef
103. window.active.button.hover.bg.color.splitTo: #b5d3ef
104. window.active.button.hover.bg.colorTo: #9cbae7
105. window.active.button.hover.bg.colorTo.splitTo: #8caede
106. window.active.button.hover.bg.border.color: #4A658C
107. window.active.button.hover.image.color: #ffffff
109. window.active.button.pressed.bg: Flat solid Border
110. window.active.button.pressed.bg.color: #7aa1d2
112. window.active.button.hover.bg.border.color: #4A658C
114. !# inactive
116. !#window.inactive.border.color: #7e8285
117. window.inactive.title.separator.color: #96999d
119. window.inactive.title.bg: Raised Gradient splitvertical
120. window.inactive.title.bg.color: #E3E2E0
121. window.inactive.title.bg.color.splitTo: #EBEAE9
122. window.inactive.title.bg.colorTo: #DEDCDA
123. window.inactive.title.bg.colorTo.splitTo: #D5D3D1
125. window.inactive.label.bg: Parentrelative
126. window.inactive.label.text.color: #70747d
128. window.inactive.button.*.bg: Flat Gradient splitVertical Border
129. window.inactive.button.*.bg.color: #ffffff
130. window.inactive.button.*.bg.color.splitto: #ffffff
131. window.inactive.button.*.bg.colorTo: #F9F8F8
132. window.inactive.button.*.bg.colorTo.splitto: #E9E7E6
133. window.inactive.button.*.bg.border.color: #928F8B
134. window.inactive.button.*.image.color: #6D6C6C
136. !# osd (pop ups and what not, dock?)
138. osd.border.width: 1
139. osd.border.color: #aaaaaa
141. osd.bg: flat border gradient splitvertical
142. osd.bg.color: #F0EFEE
143. osd.bg.color.splitto: #f5f5f4
144. osd.bg.colorTo: #EAEBEC
145. osd.bg.colorTo.splitto: #E7E5E4
147. osd.bg.border.color: #ffffff
149. osd.active.label.bg: parentrelative
150. osd.active.label.bg.color: #efefef
151. osd.active.label.bg.border.color: #9c9e9c
152. osd.active.label.text.color: #444
154. osd.inactive.label.bg: parentrelative
155. osd.inactive.label.text.color: #70747d
157. !# yeah whatever, this is fine anyhoo?
158. osd.hilight.bg: flat vertical gradient
159. osd.hilight.bg.color: #9ebde5
160. osd.hilight.bg.colorTo: #749dcf
161. osd.unhilight.bg: flat vertical gradient
162. osd.unhilight.bg.color: #BABDB6
163. osd.unhilight.bg.colorTo: #efefef

測試主題

在創作主題時，測試主題並且微調代碼對得到想要的樣子是很有幫助的。有相當的開發者想要用到“主題預覽器”這樣的工具。幸運的是，已經有了。

• GTK+ Change Theme - 這個程序可以更改 GTK 主題，開發者可以用它預覽主題。這個程序由一個含有很多構件的窗口組成，因此可以為主題提供一個完整的預覽。要安裝它，隻需輸入命令 apt-get install gtk-chtheme。
• GTK Theme Switch - 用戶可以使用它輕鬆地更換用戶主題。測試主題時確保打開了一些應用，方便預覽效果。要安裝它，隻需輸入命令 apt-get install gtk-theme-switch，然後在終端敲出 gtk-theme-switch2 即可運行。
• LXappearance - 它可以更換主題，圖標以及字體。
• PyWF - 這是基於 Python 開發的一個 The Widget Factory 的替代品。可以在 https://gtk-apps.org/content/show.php/PyTWF?content=102024 獲取 PyWF。
• The Widget Factory - 這是一個古老的 GTK 預覽器。要安裝它，隻需輸入命令 apt-get install thewidgetfactory，然後在終端敲出 twf 即可運行。

最後更新：2017-05-25 18:02:52

  上一篇：  配置 logrotate 的終極指導

  下一篇：  如何在 RHEL 上設置 Linux RAID 1