GTK主题教程

或许大家有些许疑惑，既然 gtk.css 才是主题的配置文件，那其他的 css 文 件都是干什么的，这个我等会和大家说明吧！一步一步来，咱先看看 gtk.css 的 内容吧：
纳尼！就这么点儿！这不基本上啥也没有嘛！其实并不是啥也没有，很多主 题的制作的者为了使主题代码的结构清晰，也为了便于后期的修改和维护，都不 会把所有的主题代码一股脑的塞进 gtk.css 这一个文件里的。通常主题制作者都 会采取引用外配置文件的做法，对！没有错，gtk.css 里的这一条代码就是引用 其他的 css 文件的作法，一般都是@import 加上 url（”其它的 css 文件的文 件名“），所以大家应该就知道除 gtk.css 之外 gtk-main.css 是怎么来的了吧！ （引用其它的 css 文件时文件名都是可以自定义的，只要引用的时候名字别写错 就行，而被引用文件的默认目录就是 gtk3 主题的根目录。）
其它的文件在不同的主题中或许会少见一些，但上述的两个文件基本上所 有的主题中都可以看到（估计是 gtk 主题的传统吧，都约定俗成了！主要是 gnome3 的默认主题 Adwaita 就是这样的）
对了，在此特别说明一下：gnome3 桌面很多程序会默认使用暗主题也就 是 Dark 主题，而这种情况下主题默认检索的主题文件就不是 gtk.css 了。而是 gtk-dark.css，如果这个文件没有才会默认使用 gtk.css 的。所以 gtk-dark.css 可以没有但也很重要（也就是说你可以不给桌面做暗主题，统一主题。但暗主题 的存在也是可以丰富桌面的显示风格的）
GTK 主题目录
Gtk 主题的默认目录一般有两个---“系统目录”和“用户目录”，系统目 录是在/usr/share/themes 下，这个目录是系统所有用户都可以共用的主题目 录，这也是主题安装包的安装目录。而“用户目录”是在$HOME/.themes 下， “$HOME”的意思是指用户根目录。比如用户”Mike“，那”Mike“的用户 根目录就是/home/Mike，那么”Mike“的用户主题目录就是 /home/Mike/.themes，然而用户根目录下的这个.themes 隐藏文件夹默认情 况下是没有的，所以一般都需要自己新建。
把外置的文件都置于一个文件夹 widgets 里（这个可以自己自定义，很多 主题都喜欢放 apps 文件夹了，个人命名为 widgets 觉得更贴切，毕竟是从 gtk-widgets.css 文件里分离出来的。）
现在，gtk3 主题的大体结构已经讲得差不多了，接下来就讲讲 gtk3 主题里 css3 代码的写法吧：
接下来，我们就接着讲主题文件的内容吧，先从最主要的 gtk-widgets.css 讲起吧
主题开始一般都是定义所有类最基本的一些元素，（其中的一些定义我也只 搞懂其中几个而已，所以这里就不深讲了）下面就是主要内容了：
代码注释的做法
主题中的代码你会发现有很多的标题分段，这样做的理由和引用外文件的做 法一样都是为了便于管理和修改还有别人阅读代码。
Color： #ffffff； /* 白色的代码为#ffffff {#后面的数值分别代表 R（红色 red）G（绿色 green） B（蓝色 blue）的 16 进制值，00 代表没有，ff 自然是最大。}*/ 但是你会看到一般主题代码里出现的一些颜色定义值都是些宏定义，比如
Color： @theme_fg_color； /*theme foreground color（主题前景色）*/ ( 或者： Color： white； /* white，black，yellow 等都是一些系统的宏定义颜色值， 这是 linux 系统中固定的 ，注意：transparent 表示透明 ) 所义这里就可以一瞥宏定义的好处了，你只需要修改 gtk.css 里的宏定义颜色值 就可以改变整个主题的颜色，而不需要一个一个的修改。
大家可以自己百度一些 css3 的教程和参考文件，网上的比我讲得要详细得 多，也比我专业得我。（我一个门外汉在代码方面就不在这里班门弄斧了）
关于用法的话，那几个主要的样式我就一个一个都讲讲最基本的知识吧，比 如颜色样式 color：
不管是 color，background-color 还是 boder-color 后面的用法都是接颜 色的 16 进制值，比如定义一个前景色为白色：
这些代码都是定义一些后面配置文件中需要用用到的颜色值，中间的颜色名 称自然也是自定义的（但看了这么多主题文件了，取的那些个颜色名几乎都是大 同小异，不过这样也好，修改起来比较省事） 。
然后把文件拉到最后我们会看到很多引用的外 css 文件：
（现在明白为什么主题目录里这么多的 css 文件了吧！） 这里需要说明一下，一般情况下几乎所有的主题都喜欢把主题的框架和主要
。。。。。。
红色的部分是必须的，index.theme 这个文件一般也不能缺少。紫色和绿 色部分是窗口管理器的主题，一个完整的桌面主题里也是不可缺少的。而蓝色部 分是桌面环境的主题（如 gnome-shell 的顶栏和 cinnamon 的底栏） 。
下面贴一张主题文件夹的截图吧：
由于个人能力有限，所以在这篇教程里我就主要介绍介绍 gtk3 主题吧！其 他的如 cinnamon、gnome-shell、openbox 等个人没怎么使用过，所以也没 深入研究，即便想在此介绍也心有余而力不足!（gtk3 主题我也只是略懂皮毛而 已！）
关于 border 边框（或者描边）的有： Border-style： 边框样式； Border-color： 边框颜色； Boder-image： 边框图像； Border-radius： 圆角边框的圆角半径（像素为单位）； Box-shadow： 边框阴影； 还有一些效果如： Text-shadow： 文字阴影； Transition： 颜色过渡效果（可用来制作一些动感效果）； Animation： 动画效果； 等等。。。
知道这些之后我们再打开 gtk-main.css 看看里面是些什么东东吧！ （貌似 几乎所有的主题 gtk.css 引用外文件时都取名为 gtk-main.css，估计是因为很多 的主题都是基于 gnome3 桌面的默认主题开发的原因吧！）
开头部分都是些@define-color 加个名字再加个颜色 16 进制值，都是些啥 呢？其实这些都是些宏定义或者怎么说呢？：变量的定义（个人对编程什么的不 是很了解，说得不是很到位还希望各位大神见谅！）
内容写到 gtk-widgets.css 里，所以一般情况下这个文件会比较大一些，因为它 占了大部分的内容。而 gtk-widgets-assets.css 一般都是定义一些主题中需要 用到的背景图片的内容，所以在这个文件里你会看到基本上都是一些引用图片的 代码（至于怎么引用图片嘛！会 css 的自然不需我多说，不懂 css 代码的后面我 会详细的为你讲解，到时候你就会发现原来 css 代码真的是简单到爆啊！）
如图：
看到这么多 css 文件，大家可别慌哦！其实 gtk3 主题默认必须有的文件就 两个：一个是 settings.ini（主题引擎的配置文件，作用我不是特别清楚，一般 都不管它。但$HOME/.config/gtk-3.0/settings.ini 作用却比较到哦！： ~/.config/gtk-3.0/settings.ini [Settings] gtk-theme-name = Adwaita #设置默认主题 gtk-application-prefer-dark-theme = true #设置程序默认使用暗主题 gtk-font-name = Sans 10 #设置默认字体和大小），另一个就是 gtk.css（这 个就是 gtk3 主题的配置文件了）
4.gtk3 主题的 css3 代码
先从一些基本和常见的 gtk 控件讲起吧！比如说 button（按钮）， 先打开我 Vimix-dark 里的 button.css 看看：
Css3 代码的结构一般都是 .“类名”{ ”代码“} 大括号之前是代码起作用的控件的 gtk 类名然后大括号里是 css 的样式内 容，不同的样式用分号隔开，分行显示。 一般在 css 里常用的样式和用法有： Color： 前景颜色； Background-color: 背景颜色； Background-image: 背景图像（图片或渐变）； Padding： 背景填充；
再讲一点关于 color 的用法吧，一般宏定义颜色值会让系统主题的颜色显示比较 单一。因为你不会去定义太多的颜色值，这样会显得很乱修改起来很麻烦。所以 一般直接在代码里修改颜色的显示，而方法的话一般有 3 中：（举几个例子） 1. Color: shade(@theme_fg_color, 0.95); /* shade 的效果是改变颜色的灰度，以数字 1 为界的话，小于 1 的值是增加颜 色的灰度，使颜色显得更暗。相反数字大于 1 的话会减小颜色的灰度，越大越显 白。）
2. GTK 主题结构
Gtk 主题结构一般如下图所示：
”主题名“
/Index.theme (主题定义和介绍文件） /gtk-2.0/ (gtk2 主题文件夹） /gtk-3.0/ （gtk3 主题文件夹) /metacity-1/ (gnome 默认窗口管理器主题文件夹） /unity/ （ubuntu 的窗口管理器主题文件夹） /gnome-shell/ （gnome-shell 主题文件夹） /cinnamon/ （linux-mint 的 cinamon 主题文件夹） /xfwm4/ （xfce4 的窗口管理器主题文件夹） /openbox-3/（openbox 的窗口管理器的主题文件夹）
3. gtk3 主题的结构
说完桌面主题的结构，咱再说说 gtk3 主题的结构吧！（别急！我们一步一 步来！）
gtk3 主题自从统一使用 css 主题引擎之后，可以说是大大降低了主题制作 的难度！因为 css 代码是一种很容易看懂和学习的网页编程语言。所以不用说 gtk3 主题目录下自然都是些 css 文件。
但个人更喜欢将分段的代码写到外引用的文件中，这样更便于管理和测试主 题。
大家可以看看我的另一个主题 Vimix-Dark：
百度文库
将主题中定义不同部件和 gtk 类的代码都分别放不同外置文件里，比如： 关于 unity 窗口管理器和 unity 栏的代码放 unity.css 文件里，关于按钮的代码 的代码放 button.css 里，关于菜单的代码放 menu.css 里，关于链接按钮的代 码放 link-button.css 里，等等。。。
GTK 主题教程
Gtk 主题也就是 gtk 程序的主题，众所周知基于 gtk 开发的桌面环境都可以 应用 gtk 的主题，如基于 gtk2 开发的 xfce4、gnome2、mate 等，基于 gtk3 开发的 gnome3 以及 gnome3 的衍生桌面诸如 ubuntu 的 unity，mint 的 cinnamon 等。当然！gtk2 程序只能用 gtk2 主题，gtk3 程序只能用 gtk3 主题。 所以一款完整的 gtk 主题或主题包是必须包含 gtk2 部分和 gtk3 部分。所以作 为这篇教程的开始，我还是先讲讲 gtk 主题的目录和结构吧！
2. Color: alpha(@theme_fg_color, 0.50); /* alpha 的作用是修改颜色的 alpha 值也就是透明度，0.5 的话就是 50%的透 明 */
3. Color: mix(@menu_fg_color, @menu_bg_color, 0.50); /* mix 的作用是将两个颜色混合，这个目前我还不是很懂，后面的数值作用的 是哪个量我还不是很清楚，各位网页大神们肯定知道！ */ 其他的颜色样式的用法都一致，不管是 background-color 还是 boder-color。