如何獲取、安裝和製作 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&apos;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/

對這篇文章感覺如何？

太棒了

不錯

愛死了

不太好

感覺很糟

Rain

雨落清風。心向陽

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

基本概念

主題存放位置

主題引擎

創作 GTK3 主題

測試主題

主題下載

延伸閱讀

對這篇文章感覺如何？

配置 logrotate 的終極指導

6 個值得好好學習的 JavaScript 框架

Leave a reply 取消回復

More in:Linux中國

如何通過 VLC 使用字幕

Unix 桌面：在 Linux 問世之前

Valve 對於 Ubuntu 的 Snap 版本的 Steam 並不滿意：原因何在

Wine 9.0 發布，實驗性地加入了 Wayland 驅動

中文操作系統論壇

關注 LinuxStory

開源學村

編程類開放書籍薈萃

如何殺死 Linux 中的殭屍進程

2022年，從學習Rust開始

5本學習 TeX 的最佳免費書籍

Makefile 簡介

Linux 內核補丁提交初體驗

使用 Linux 命令行解決Wordle 問題

Linux 的前世今生 – 1

特別關注

Самое Популярное Казино В России: Обзор Площадки «Azino777 Вход»

在 Ubuntu 24.04 上安裝和配置 VNC 遠程桌面

學校教師和計算機愛好者開發的法語 Linux 發行版：PrimTux 8 正式發布

LinuxStory

加入 LinuxStory 交流群組

投票調查

最熱標籤

基本概念

主題存放位置

主題引擎

創作 GTK3 主題

測試主題

主題下載

延伸閱讀

分享

對這篇文章感覺如何？

You may also like

Leave a reply 取消回復

More in:Linux中國

中文操作系統論壇

關注 LinuxStory

開源學村

特別關注

最新文章

最熱標籤