如何獲取、安裝和製作 GTK 主題
基本概念
GIMP 工具包(簡稱 GTK)是一個用來在多種系統上(因此造就了 GTK 的跨平台)創建圖形用戶界面的構件工具包。GTK(http://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 程序檢查時的順序列表。
$XDG_CONFIG_HOME/gtk-3.0/gtk.css
(另一寫法~/.config/gtk-3.0/gtk.css
)~/.themes/NAME/gtk-3.0/gtk.css
$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
文件內容。
[Desktop Entry]
Type=X-GNOME-Metatheme
Name=Ambiance
Comment=Ubuntu Ambiance theme
Encoding=UTF-8
[X-GNOME-Metatheme]
GtkTheme=Ambiance
MetacityTheme=Ambiance
IconTheme=ubuntu-mono-dark
CursorTheme=DMZ-White
ButtonLayout=close,minimize,maximize:
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
文件的內容。
# ==============================================================================
# NAUTILUS SPECIFIC SETTINGS
# ==============================================================================
style "nautilus_info_pane" {
bg[NORMAL] = @bg_color
}
widget_class "*Nautilus*<GtkNotebook>*<GtkEventBox>" style "nautilus_info_pane"
widget_class "*Nautilus*<GtkButton>" style "notebook_button"
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
的內容。
/*default color scheme */
@define-color bg_color #f2f1f0;
@define-color fg_color #4c4c4c;
@define-color base_color #ffffff;
@define-color text_color #3C3C3C;
@define-color selected_bg_color #f07746;
@define-color selected_fg_color #ffffff;
@define-color tooltip_bg_color #000000;
@define-color tooltip_fg_color #ffffff;
/* misc colors used by gtk+
*
* Gtk doesn't currently expand color variables for style properties. Thus,
* gtk-widgets.css uses literal color names, but includes a comment containing
* the name of the variable. Please remember to change values there as well
* when changing one of the variables below.
*/
@define-color info_fg_color rgb (181, 171, 156);
@define-color info_bg_color rgb (252, 252, 189);
@define-color warning_fg_color rgb (173, 120, 41);
@define-color warning_bg_color rgb (250, 173, 61);
@define-color question_fg_color rgb (97, 122, 214);
@define-color question_bg_color rgb (138, 173, 212);
@define-color error_fg_color rgb (235, 235, 235);
@define-color error_bg_color rgb (223, 56, 44);
@define-color link_color @selected_bg_color;
@define-color success_color #4e9a06;
@define-color error_color #df382c;
/* theme common colors */
@define-color button_bg_color shade (@bg_color, 1.02); /*shade (#cdcdcd, 1.08);*/
@define-color notebook_button_bg_color shade (@bg_color, 1.02);
@define-color button_insensitive_bg_color mix (@button_bg_color, @bg_color, 0.6);
@define-color dark_bg_color #3c3b37;
@define-color dark_fg_color #dfdbd2;
@define-color backdrop_fg_color mix (@bg_color, @fg_color, 0.8);
@define-color backdrop_text_color mix (@base_color, @text_color, 0.8);
@define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75);
/*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/
@define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
@define-color backdrop_selected_fg_color @fg_color;
@define-color focus_color alpha (@selected_bg_color, 0.5);
@define-color focus_bg_color alpha (@selected_bg_color, 0.1);
@define-color shadow_color alpha(black, 0.5);
@define-color osd_fg_color #eeeeec;
@define-color osd_bg_color alpha(#202526, 0.7);
@define-color osd_border_color alpha(black, 0.7);
@import url("gtk-widgets-borders.css");
@import url("gtk-widgets-assets.css");
@import url("gtk-widgets.css");
@import url("apps/geary.css");
@import url("apps/unity.css");
@import url("apps/baobab.css");
@import url("apps/gedit.css");
@import url("apps/nautilus.css");
@import url("apps/gnome-panel.css");
@import url("apps/gnome-terminal.css");
@import url("apps/gnome-system-log.css");
@import url("apps/unity-greeter.css");
@import url("apps/glade.css");
@import url("apps/california.css");
@import url("apps/software-center.css");
@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
# Clearlooks XFWM4 by Casey Kirsle
show_app_icon=true
active_text_color=#FFFFFF
inactive_text_color=#939393
title_shadow_active=frame
title_shadow_inactive=false
button_layout=O|HMC
button_offset=2
button_spacing=2
full_width_title=true
maximized_offset=0
title_vertical_offset_active=1
title_vertical_offset_inactive=1
/usr/share/themes/Clearlooks-Phenix/openbox-3/themerc
!# Clearlooks-Evolving
!# Clearlooks as it evolves in gnome-git...
!# Last updated 09/03/10
# Fonts
# these are really halos, but who cares?
*.font: shadow=n
window.active.label.text.font:shadow=y:shadowtint=30:shadowoffset=1
window.inactive.label.text.font:shadow=y:shadowtint=00:shadowoffset=0
menu.items.font:shadow=y:shadowtint=0:shadowoffset=1
!# general stuff
border.width: 1
padding.width: 3
padding.height: 2
window.handle.width: 3
window.client.padding.width: 0
menu.overlap: 2
*.justify: center
!# lets set our damn shadows here, eh?
*.bg.highlight: 50
*.bg.shadow: 05
window.active.title.bg.highlight: 35
window.active.title.bg.shadow: 05
window.inactive.title.bg.highlight: 30
window.inactive.title.bg.shadow: 05
window.*.grip.bg.highlight: 50
window.*.grip.bg.shadow: 30
window.*.handle.bg.highlight: 50
window.*.handle.bg.shadow: 30
!# Menu settings
menu.border.color: #aaaaaa
menu.border.width: 1
menu.title.bg: solid flat
menu.title.bg.color: #E6E7E6
menu.title.text.color: #111111
menu.items.bg: Flat Solid
menu.items.bg.color: #ffffff
menu.items.text.color: #111111
menu.items.disabled.text.color: #aaaaaa
menu.items.active.bg: Flat Gradient splitvertical border
menu.items.active.bg.color: #97b8e2
menu.items.active.bg.color.splitTo: #a8c5e9
menu.items.active.bg.colorTo: #91b3de
menu.items.active.bg.colorTo.splitTo: #80a7d6
menu.items.active.bg.border.color: #4b6e99
menu.items.active.text.color: #ffffff
menu.separator.width: 1
menu.separator.padding.width: 0
menu.separator.padding.height: 3
menu.separator.color: #aaaaaa
!# set handles here and only the once?
window.*.handle.bg: Raised solid
window.*.handle.bg.color: #eaebec
window.*.grip.bg: Raised solid
window.*.grip.bg.color: #eaebec
!# Active
window.*.border.color: #585a5d
window.active.title.separator.color: #4e76a8
*.title.bg: Raised Gradient splitvertical
*.title.bg.color: #8CB0DC
*.title.bg.color.splitTo: #99BAE3
*.title.bg.colorTo: #86ABD9
*.title.bg.colorTo.splitTo: #7AA1D1
window.active.label.bg: Parentrelative
window.active.label.text.color: #ffffff
window.active.button.*.bg: Flat Gradient splitvertical Border
window.active.button.*.bg.color: #92B4DF
window.active.button.*.bg.color.splitTo: #B0CAEB
window.active.button.*.bg.colorTo: #86ABD9
window.active.button.*.bg.colorTo.splitTo: #769FD0
window.active.button.*.bg.border.color: #49678B
window.active.button.*.image.color: #F4F5F6
window.active.button.hover.bg.color: #b5d3ef
window.active.button.hover.bg.color.splitTo: #b5d3ef
window.active.button.hover.bg.colorTo: #9cbae7
window.active.button.hover.bg.colorTo.splitTo: #8caede
window.active.button.hover.bg.border.color: #4A658C
window.active.button.hover.image.color: #ffffff
window.active.button.pressed.bg: Flat solid Border
window.active.button.pressed.bg.color: #7aa1d2
window.active.button.hover.bg.border.color: #4A658C
!# inactive
!#window.inactive.border.color: #7e8285
window.inactive.title.separator.color: #96999d
window.inactive.title.bg: Raised Gradient splitvertical
window.inactive.title.bg.color: #E3E2E0
window.inactive.title.bg.color.splitTo: #EBEAE9
window.inactive.title.bg.colorTo: #DEDCDA
window.inactive.title.bg.colorTo.splitTo: #D5D3D1
window.inactive.label.bg: Parentrelative
window.inactive.label.text.color: #70747d
window.inactive.button.*.bg: Flat Gradient splitVertical Border
window.inactive.button.*.bg.color: #ffffff
window.inactive.button.*.bg.color.splitto: #ffffff
window.inactive.button.*.bg.colorTo: #F9F8F8
window.inactive.button.*.bg.colorTo.splitto: #E9E7E6
window.inactive.button.*.bg.border.color: #928F8B
window.inactive.button.*.image.color: #6D6C6C
!# osd (pop ups and what not, dock?)
osd.border.width: 1
osd.border.color: #aaaaaa
osd.bg: flat border gradient splitvertical
osd.bg.color: #F0EFEE
osd.bg.color.splitto: #f5f5f4
osd.bg.colorTo: #EAEBEC
osd.bg.colorTo.splitto: #E7E5E4
osd.bg.border.color: #ffffff
osd.active.label.bg: parentrelative
osd.active.label.bg.color: #efefef
osd.active.label.bg.border.color: #9c9e9c
osd.active.label.text.color: #444
osd.inactive.label.bg: parentrelative
osd.inactive.label.text.color: #70747d
!# yeah whatever, this is fine anyhoo?
osd.hilight.bg: flat vertical gradient
osd.hilight.bg.color: #9ebde5
osd.hilight.bg.colorTo: #749dcf
osd.unhilight.bg: flat vertical gradient
osd.unhilight.bg.color: #BABDB6
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 的替代品。可以在 http://gtk-apps.org/content/show.php/PyTWF?content=102024 獲取 PyWF。
- The Widget Factory - 這是一個古老的 GTK 預覽器。要安裝它,只需輸入命令
apt-get install thewidgetfactory
,然後在終端敲出twf
即可運行。
主題下載
- Cinnamon - http://gnome-look.org/index.php?xcontentmode=104
- Compiz - http://gnome-look.org/index.php?xcontentmode=102
- GNOME Shell - http://gnome-look.org/index.php?xcontentmode=191
- GTK2 - http://gnome-look.org/index.php?xcontentmode=100
- GTK3 - http://gnome-look.org/index.php?xcontentmode=167
- KDE/Qt - http://kde-look.org/index.php?xcontentmode=8x9x10x11x12x13x14x15x16
- Linux Mint Themes - http://linuxmint-art.org/index.php?xcontentmode=9x14x100
- Metacity - http://gnome-look.org/index.php?xcontentmode=101
- Ubuntu Themes - http://www.ubuntuthemes.org/
延伸閱讀
- Graphical User Interface (GUI) Reading Guide - http://www.linux.org/threads/gui-reading-guide.6471/
- GTK - http://www.linux.org/threads/understanding-gtk.6291/
- Introduction to Glade - http://www.linux.org/threads/introduction-to-glade.7142/
- Desktop Environment vs Window Managers - http://www.linux.org/threads/desktop-environment-vs-window-managers.7802/
- Official GTK+ 3 Reference Manual - https://developer.gnome.org/gtk3/stable/
- GtkCssProvider - https://developer.gnome.org/gtk3/stable/GtkCssProvider.html
via: http://www.linux.org/threads/installing-obtaining-and-making-gtk-themes.8463/
作者:DevynCJohnson 譯者:fuowang 校對:wxy
本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive