Integrating a GTK theme with Fvwm color styles.

I’ve read many people talking about integration between Fvwm style and other applications.
I wanted to change at once my Fvwm colorset and Gtk style, and for that I’ve prepared a minimalist GTK theme wich I can control from a simple bash script.
I use just three colors (well, black and white too) for both GTK/FVWM themes.

Here you have a really green screenshot. 8)
http://ozrocpablo.googlepages.com/screen_green.png/screen_green-full.jpg

I define in a file ~/.fvwm/configs/colors

SetEnv Color1 #2222ff SetEnv Color2 #8888ff SetEnv Color3 #0000ff

So I have a colourstyle that uses those defined colors:

# Unfocused window
Colorset 0 fg white, bg $[Color2], fgsh black
# Focused window
Colorset 1 fg black, bg $[Color1], fgsh white
# Pager Unfocused
Colorset 20 fg #ffffff, bg $[Color2]
# Pager Focused
Colorset 21 fg #ffffff, bg $[Color2]
# Windows in pager Focused
Colorset 22 fg #ffffff, bg $[Color1]
# Windows in pager Unfocused
Colorset 23 fg #ffffff, bg $[Color1]

# Icons Unfocused
Colorset 30 fg #ffffff, fgsh #000000, bg $[Color1]
# Icons Focused
Colorset 31 fg #000000, fgsh #ffffff, bg $[Color2]

# Taskbar
colorset 40 fg #ffffff, bg $[Color2], fgsh #000000
colorset 41 fg #000000, bg $[Color2], fgsh #ffffff

# Dock (Panel)
Colorset 42 fg $[Color3], bg $[Color2]

Then, I have a GTK theme called DontPanic_gtk with this file in ~/.themes/DontPanic_gtk/gtk-2.0/gtkrc_fvwm

[code]style “dontpanic_default”
{
bg[ACTIVE] = “#Color2
fg[ACTIVE] = “#000000
bg[NORMAL] = “#Color2
fg[NORMAL] = “#000000
bg[INSENSITIVE] = “#Color2
fg[INSENSITIVE] = “#000000
bg[PRELIGHT] = “#Color2
fg[PRELIGHT] = “#000000
bg[SELECTED] = “#Color2
fg[SELECTED] = “#000000

base[NORMAL] = “#Color2
base[ACTIVE] = “#Color2
base[SELECTED] = “#Color2
base[INSENSITIVE] = “#Color2
base[PRELIGHT] = “#Color2

font="-adobe-helvetica-medium-r-normal---120---p-*-iso8859-1"

}

style “dontpanic_menu”
{
bg[NORMAL] = “#Color2
fg[NORMAL] = “#000000
bg[INSENSITIVE] = “#Color2
fg[INSENSITIVE] = “#000000
bg[PRELIGHT] = “#ffffff
fg[PRELIGHT] = “#000000
}

style “dontpanic_list”
{
bg[SELECTED] = “#ffffff

base[NORMAL] = “#Color2
base[ACTIVE] = “#Color2
base[SELECTED] = “#Color1
base[INSENSITIVE] = “#Color2
base[PRELIGHT] = “#Color2
}

style “dontpanic_listbutton”
{
bg[ACTIVE] = “#Color3
fg[ACTIVE] = “#000000
bg[NORMAL] = “#Color3
fg[NORMAL] = “#000000
bg[PRELIGHT] = “#Color3
fg[PRELIGHT] = “#000000
bg[INSENSITIVE] = “#Color3
fg[INSENSITIVE] = “#000000
bg[SELECTED] = “#Color3
fg[SELECTED] = “#000000

font="-adobe-helvetica-bold-r-normal---120---p-*-iso8859-1"
}

style “dontpanic_tooltips”
{
bg[NORMAL] = “#ffffff
fg[NORMAL] = “#000000
}

style “dontpanic_progressbar”
{
fg[NORMAL] = “#000000
fg[SELECTED] = “#000000

bg[NORMAL] = “#Color2
bg[SELECTED] = “#Color3
}

style “dontpanic_notebook”
{
bg[ACTIVE] = “#Color1
bg[INSENSITIVE] = “#Color1
}

style “dontpanic_scrollbar”
{
bg[ACTIVE] = “#Color1
}

Common default

class “GtkWidget” style “dontpanic_default”
class “GtkWindow” style “dontpanic_default”
class “GtkDialog” style “dontpanic_default”
class “GtkButton” style “dontpanic_default”
class “GtkEntry” style “dontpanic_default”
class “GtkText” style “dontpanic_default”
class “GtkFileSelection” style “dontpanic_default”
class “GtkFontSelection” style “dontpanic_default”

class “List” style “dontpanic_list”
class “Tree” style “dontpanic_list”
class “GtkProgressBar” style “dontpanic_progressbar”
class “Scrollbar” style “dontpanic_scrollbar”
class “MenuItem” style “dontpanic_menu”
class “GtkNotebook” style “dontpanic_notebook”

widget “gtk-tooltips*” style “dontpanic_tooltips”

widget_class “List.GtkButton” style “dontpanic_listbutton”
widget_class “Tree.GtkButton” style “dontpanic_listbutton”
[/code]

With this stupid script (basically a pair of sed’s) I take the colors defined for Fvwm and put them in GTK’s one, activating it via gtk-theme-switch (ok, I know it wasn’t neccesary to make a separate script, but I’m a born2bash)

[code]#!/bin/bash

COLOR_1=$(cat ~/.fvwm/configs/colors | grep SetEnv\ Color1 | cut -d # -f 2)
COLOR_2=$(cat ~/.fvwm/configs/colors | grep SetEnv\ Color2 | cut -d # -f 2)
COLOR_3=$(cat ~/.fvwm/configs/colors | grep SetEnv\ Color3 | cut -d # -f 2)

cat ~/.themes/DontPanic_gtk/gtk-2.0/gtkrc_fvwm | sed “s/#Color1/#$COLOR_1/g” | sed “s/#Color2/#$COLOR_2/g” | sed “s/#Color3/#$COLOR_3/g” > ~/.themes/DontPanic_gtk/gtk-2.0/gtkrc

gtk-theme-switch2 DontPanic_gtk
[/code]

My GTK theme is not perfect (I’ve not tested it too much and it’s my first gtk theme), but I think the idea is quite interesting. Probably someone could do it much better, but I think nobody did it before, so here’s the idea.

At least do the above properly:

COLOR_1="$(awk -F '#' '/Color1/ {print $2}' < ~/.fvwm/configs/colors)"
....

sed -e "s/\#Color2/\#$COLOR_2/g" -e s/\#Color3/\#$COLOR_3/g" < ./orig_file > ./some_file

(You can even cut out the intermediary step as you have it there and just awk entirely. YMMV. (And at least I’ve bothered to quote things properly too – so many people seem not to bother these days.)

– Thomas Adam

Thank you, I’ll try.
I’m just a physicist who tries to learn day by day and enjoy playing with python, perl, bash, and just any code I find with a bit of logic. I try and retry until something works and when it does what it’s supposed to do I try to clean it and learn how to do it better.

I’ve also simplified a lot the gtk theme (now without black or white):

[code]style “dontpanic_default”
{
bg[ACTIVE] = “#Color2
fg[ACTIVE] = “#Color3
bg[NORMAL] = “#Color1
fg[NORMAL] = “#Color3
bg[INSENSITIVE] = “#Color2
fg[INSENSITIVE] = “#Color3
bg[PRELIGHT] = “#Color2
fg[PRELIGHT] = “#Color3
bg[SELECTED] = “#Color2
fg[SELECTED] = “#Color3

base[NORMAL] = “#Color2
base[ACTIVE] = “#Color2
base[SELECTED] = “#Color1
base[INSENSITIVE] = “#Color2
base[PRELIGHT] = “#Color1

font="-adobe-helvetica-medium-r-normal---120---p-*-iso8859-1"

}

Common default

class “GtkWidget” style “dontpanic_default”
class “GtkWindow” style “dontpanic_default”
class “GtkDialog” style “dontpanic_default”
class “GtkButton” style “dontpanic_default”
class “GtkEntry” style “dontpanic_default”
class “GtkText” style “dontpanic_default”
class “GtkFileSelection” style “dontpanic_default”
class “GtkFontSelection” style “dontpanic_default”

class “List” style “dontpanic_default”
class “Tree” style “dontpanic_default”
class “GtkProgressBar” style “dontpanic_default”
class “Scrollbar” style “dontpanic_default”
class “MenuItem” style “dontpanic_default”
class “GtkNotebook” style “dontpanic_default”

widget “gtk-tooltips*” style “dontpanic_default”

widget_class “List.GtkButton” style “dontpanic_default”
widget_class “Tree.GtkButton” style “dontpanic_default”[/code]

Simplifying everything:

[list]
[*] I have three colors defined in configs/colors and colorsets for Fvwm (mine in configs/theme_style) use them.

SetEnv Color1 #0000ff SetEnv Color2 #00ff00 SetEnv Color3 #ff0000
[/:m]
[
] In a menu, I have this function:

[code]DestroyFunc user_ChangeColorset
AddToFunc user_ChangeColorset

  • I Read $[FVWM_USERDIR]/configs/colors
  • I Read $[FVWM_USERDIR]/configs/theme_style
  • I Exec exec sh $[FVWM_USERDIR]/scripts/gtk_themeator.sh $[Color1] $[Color2] $[Color3][/code]
    [/:m]
    [
    ] And scripts/gtk_themeator is just this:

[code]#!/bin/bash

COLOR_1=$1
COLOR_2=$2
COLOR_3=$3

sed -e s/#Color1/#$COLOR_1/g -e s/#Color2/#$COLOR_2/g -e s/#Color3/#$COLOR_3/g ~/.themes/DontPanic_gtk/gtk-2.0/gtkrc_fvwm > ~/.themes/DontPanic_gtk/gtk-2.0/gtkrc

gtk-theme-switch2 DontPanic_gtk
[/code]
[/:m]
[
] Finally, the gtkrc_fvwm is like this:

[code]style “dontpanic_default”
{
bg[ACTIVE] = “#Color2
fg[ACTIVE] = “#Color3
bg[NORMAL] = “#Color1
fg[NORMAL] = “#Color3
bg[INSENSITIVE] = “#Color2
fg[INSENSITIVE] = “#Color3
bg[PRELIGHT] = “#Color2
fg[PRELIGHT] = “#Color3
bg[SELECTED] = “#Color2
fg[SELECTED] = “#Color3
base[NORMAL] = “#Color2
base[ACTIVE] = “#Color2
base[SELECTED] = “#Color1
base[INSENSITIVE] = “#Color2
base[PRELIGHT] = “#Color1
font="-adobe-helvetica-medium-r-normal---120---p-*-iso8859-1"
}

Common default

class “GtkWidget” style “dontpanic_default”
class “GtkWindow” style “dontpanic_default”
class “GtkDialog” style “dontpanic_default”
class “GtkButton” style “dontpanic_default”
class “GtkEntry” style “dontpanic_default”
class “GtkText” style “dontpanic_default”
class “GtkFileSelection” style “dontpanic_default”
class “GtkFontSelection” style “dontpanic_default”
class “List” style “dontpanic_default”
class “Tree” style “dontpanic_default”
class “GtkProgressBar” style “dontpanic_default”
class “Scrollbar” style “dontpanic_default”
class “MenuItem” style “dontpanic_default”
class “GtkNotebook” style “dontpanic_default”
widget “gtk-tooltips*” style “dontpanic_default”
widget_class “List.GtkButton” style “dontpanic_default”
widget_class “Tree.GtkButton” style “dontpanic_default”
[/code][/*:m][/list:u]

So, when I change the three colors defined in configs/colors , both Gtk and Fvwm change their appearance (some Gtk app’s need to be restarted to change their appearance).
It’s a simple way for having a full themed desktop. Themeing everything with more colors and making a more complex gtk theme should be much better, but as an idea, I think it’s quite interesting. Maybe it should be also possible to write something similar for qt, but since I don’t use any qt app, I’m not going to try.

I recommend Agave (http://home.gna.org/colorscheme/) for choosing three-color themes.

Is this better written, thomasadam? Thank you for the tips :wink:

It’s better, but since you asked…

Note that in the above, you can get away with:

+ I Read $./configs/colors
+ I Read $./configs/theme_style

Then you have:

[code]

  • I Exec exec sh $[FVWM_USERDIR]/scripts/gtk_themeator.sh $[Color1] $[Color2] $[Color3][/code]

Which is OK, but it exec()s too many shells, when the idiom you’re really wanting is:

[code]

  • I Exec exec $[FVWM_USERDIR]/scripts/gtk_themeator.sh $[Color1] $[Color2] $[Color3][/code]

I could comment more on your little bash script, but I won’t — it falls outside the scope of this forum to really do so.

– Thomas Adam

Well, it may be better or worst written, but it just works great! 8)
See this stupid gif for some of my 3-color based fvwm colorsets translated to a Gtk theme:
http://ozrocpablo.googlepages.com/temas.gif

It is very nice!

Do you know where is the c function that change gtk look on the fly? I am always want to do that.

Also, you may be interested in my post on dynamic changing fvwm colors.

viewtopic.php?f=39&t=948&hilit=

I am thinking to integrate the capability of changing gtk into my functions.

Integrating your colorset chooser from wallpaper and my Gtk theme is a really good idea.
I use 3 colors and your function just two, but it should be easy to choose an intermediate one as the third, for example.

About changing gtk look on the fly, I use gtk-theme-switch ( muhri.net/nav.php3?node=gts ) and never looked for any other way 'cause it worked for me.
It works quite well but some apps need to be restarted (firefox’s tabs keep old style until the app is restarted, for example).