How to create your own GTK3 theme

Write tutorials here
There are more tutorials here
Forum rules
Please don't add support questions to tutorials,start your own thread in the appropriate sub-forum instead. Before you post please read this
User avatar
Level 8
Level 8
Posts: 2322
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

How to create your own GTK3 theme

Postby Zorba » Wed Jan 01, 2014 3:16 pm

To create your own GTK 3 theme, take a GTK three theme (Mint-X is the easiest to edit), copy it from /usr/share/themes, paste it in ~/.themes, rename it and edit the files and images.

The following list of files/images to edit are for a copy of Mint-X gtk theme in Linux Mint 16 Cinnamon.
Note: The files/images may be slightly different for previous/future versions of the Mint-X gtk theme.


To change Background color (the light grey color in Mint-X gtk theme):
gtk-3.0 > gtk.css - @define-color bg_color #d6d6d6;
gtk-3.0 > settings.ini - nbg_color:#d6d6d6
gtk-2.0 > gtkrc - nbg_color:#D6D6D6
change image color in GIMP:
gtk-2.0 > Bars - menubarbg.png
gtk-2.0 > Bars - toolbarbg.png
gtk-2.0 > Apps > Caja - toolbarbg.png
gtk-2.0 > Apps > Nautilus - toolbarbg.png

For Nemo sidebar - make the following edits in gtk-3.0 > apps > nemo.css -

NemoWindow .sidebar .view {
background-color: #3F3F3F; /* to change dark grey background color of sidebar*/
color: #EEEEEE; /* to change normal text color in sidebar */
/* text-shadow: 1px 1px alpha (#000000, 0.7); */

NemoWindow .sidebar .view:selected {
color: #EEEEEE; /* to change selected text color in sidebar*/

NemoWindow .sidebar .view:hover {
background-color: shade(#3F3F3F , 1.4); /* to change the hover background color in sidebar*/

To change Nemo searchbar (pale green color):
gtk-3.0 > gtk.css - @define-color info_bg_color rgb(172, 205, 138); /* change the three rgb numbers */

To add support for Nautilus sidebar:

Create this file named nautilus.css, save it in gtk-3.0 > apps

/* sidebar */
NautilusWindow .sidebar,
NautilusWindow .sidebar .view {
background-color: #7fa24d; /* change this value to your own choice for sidebar background color */
color: #EEEEEE;
/* text-shadow: 1px 1px alpha (#000000, 0.7); */

NautilusWindow .sidebar .view:selected {
color: #EEEEEE;

NautilusWindow .sidebar .view:hover {
background-color: shade(#3F3F3F , 1.4);

then in :
gtk-3.0 > gtk.css - add this to bottom of file: @import url("apps/nautilus.css");

Selected background color (pale green color):
gtk-3.0 > gtk.css - @define-color selected_bg_color #accd8a;
gtk-3.0 > settings.ini - nselected_bg_color:#accd8a
gtk-2.0 > gtkrc - nselected_bg_color:#accd8a
gtk-2.0 > gtkrc - nfocus_color:#94b06f
change image color of these files in GIMP:
gtk-2.0 > Treeview - row-selected.png
gtk-2.0 > Treeview - iconview-selected.png
gtk-2.0 > Treeview - Progressbar/bar.png
gtk-2.0 > Apps > Caja - row-selected.png
gtk-2.0 > Apps > Nautilus - row-selected.png

Change color of radio buttons and checkboxes in GIMP:
gtk-2.0 > Radiocheck - check-a-shadow-out.png
gtk-2.0 > Radiocheck - check-p-shadow-in.png
gtk-2.0 > Radiocheck - check-shadow-in.png
gtk-2.0 > Radiocheck - check-s-shadow-in.png
gtk-2.0 > Radiocheck - radio.svg***** (export as radio.png)
gtk-2.0 > Radiocheck - radio-p-shadow-in.png
gtk-2.0 > Radiocheck - radio-shadow-in.png
gtk-2.0 > Radiocheck - radio-s-shadow-in.png
gtk-3.0 > assets > checkbox-checked.png
gtk-3.0 > assets > checkbox-checked-hover.png
gtk-3.0 > assets > radio-selected.png
gtk-3.0 > assets > radio-selected-hover.png

Change tooltips background color (pale yellow color):
gtk-3.0 > gtk.css - @define-color tooltip_bg_color: #F5F5B5;
gtk-3.0 > settings.ini - ntooltip_bg_color:#F5F5B5
gtk-2.0 > gtkrc - ntooltip_bg_color:#FBEAA0

To Edit the window titles font color:
gtk-3.0 >gtk.css
@define-color selected_fg_color #2e2e2e; and
@define-color fg_color #dbf3d3;

To edit nemo window background colour from white:
in folder gtk-3.0 >gtk.css
edit @define-color base_color #ffffff;
NOTE: Changing this setting will also affect the background color of other apps, which may be unwanted.
eg. gedit, libre office etc.



1- If you are working on another theme other than Mint-x you can add suuport for nemo by creating a simple css with the below details and we place it in gtk-3.0 >apps:

Code: Select all

  /* sidebar */

    NemoWindow .sidebar .view {
       background-color: #E56C19;
       color: #EEEEEE;
       /* text-shadow: 1px 1px alpha (#000000, 0.8); */

    NemoWindow .sidebar .view:selected {
       color: #EEEEEE;

    NemoWindow .sidebar .view:hover {
        background-color: shade(#3F3F3F , 1.4);

    /* inactive pane */
    .nemo-inactive-pane .view {
        background-color: shade(@theme_base_color, 0.95);

    .nemo-inactive-pane .view:selected {
        background-color: @theme_selected_bg_color;

    /* Adjust size of small nemo status bar buttons */
    NemoWindow .toolbar .button {
        padding: 2px 4px;

and add this line:

Code: Select all

 @import url("apps/nemo.css");

to the very bottom of gtk-3.0 >gtk.css


For futher reading, and a step-by-step example of this process, see these tutorials:

Part 1 - changing the selected background color (the green "highlights") ... PART-1.pdf

Part 2 - changing the background color (from light-grey background) ... PART-2.pdf

Part 3 - changing nemo's sidebar color ... PART-3.pdf

These tutorials only deal with changing the colors of the Mint-X gtk theme (Controls) - not the cinnamon theme (panel, menu etc.).
The instructions are specific to Linux Mint 16 Cinnamon

Contributors: Brahim, caribriz, austin.texas and hexdef101[/quote]

Image Image Image

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 3 guests