Creating TraditionalOK Color Variants

The TraditionalOK theme's origins can be traced back to Bluecurve, a theme for GNOME and KDE developed by the Red Hat Artwork Project. It was used in Red Hat Linux and Fedora Core from 2002-2005. It was replaced by the upgraded Clearlooks version in 2005, packaged with GNOME 2.12, and used as the default GNOME 2.X theme until 2011. Ubuntu used a variant of Clearlooks, called Human, as their default theme from 2006-2010. TraditionalOK was a further evolution, released in blue and green variants as part of the MATE desktop environment's default themes in 2013.

https://clearlooks.sourceforge.net/index-old.html
https://sources.debian.org/copyright/license/mate-themes/3.22.18-1/

TraditionalOK is a simple bright theme, looking back to the GTK 2 days of gradients and skeumorphic designs. If you aren't a fan of green or blue, experiment with these steps to make your own custom variant.

  1. Go to /usr/share/themes, copy the TraditionalOK folder and paste it in /home/username/.themes. Be sure to rename the theme folder to avoid conflicts.

  2. Inside your new theme folder, you'll find 3 sub-folders (gtk-2.0, gtk-3.0, metacity-1) and index.theme. You'll make your modifications in the gtk-3.0 and metacity-1 sub-folders.

  3. Choose an accent color that you like, and search online for its equivalent hex code. You can also use MATE's Color Selection app to do this. This app will be your best friend. In my case, I chose #767676 for a neutral gray theme. TraditionalOK's default blue accent color is hex code #86abd9.

  4. Open the gtk-3.0 folder; open gtk.css. Using Ctrl+H, search for #86abd9 and replace all instances with your custom hex code. Save and close.

  5. Open settings.ini and repeat the process from Step 4. Save and close.

  6. Open the metacity-1 folder; open metacity-theme-1.xml. Repeat the find/replace process from Step 4. Save and close.

  7. Now it's time to test your theme. Go to Control Center/Appearance Preferences and look for it in the theme list. NOTE: For me, it appeared identical to the original TraditionalOK, and would not apply properly when selected. To get around this, go to Customize Theme and set the Controls/Window Border individually. This should fully apply your theme.

  8. If your color choice causes active title bars to be unreadable, change the font color in metacity-theme-1.xml by changing the hex code at line 347. I changed it to white, #ffffff.

  9. If you discover additional undesirable accent colors while using your theme, identify the hex code with the MATE Color Selection tool and repeat steps 4-6 to replace with your custom color.

This was accomplished through trial-and-error, and there are likely many customization options and efficiencies I missed. I encourage anyone to add your own customization tips, or point out steps that could be done better.

3 Likes

How to customize titlebar colors on desktop? - #3 by arQon maybe?

Sorry - if you'd asked, I could have saved you the effort. (But you wouldn't have learned anything that way, so it was worth it anyway). :slight_smile:

3 Likes