Integrating a GTK theme with Fvwm color styles.

ozrocpablogc
Cat in the hat
Cat in the hat
Posts: 30
Joined: Sun Jun 03, 2007 4:48 pm
Contact:

Integrating a GTK theme with Fvwm color styles.

Postby ozrocpablogc » Sun Jun 10, 2007 6:17 pm

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

Code: Select all

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


So I have a colourstyle that uses those defined colors:

Code: Select all

# 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: Select all

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"


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: Select all

#!/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


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.
# whoami | tr 'otr' 'ekg'

thomasadam
Administrator
Administrator
Posts: 3043
Joined: Mon Nov 08, 2004 1:12 am
Location: England
Contact:

Re: Integrating a GTK theme with Fvwm color styles.

Postby thomasadam » Sun Jun 10, 2007 6:36 pm

ozrocpablogc wrote:

Code: Select all

#!/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


At least do the above properly:

Code: Select all

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

ozrocpablogc
Cat in the hat
Cat in the hat
Posts: 30
Joined: Sun Jun 03, 2007 4:48 pm
Contact:

Re: Integrating a GTK theme with Fvwm color styles.

Postby ozrocpablogc » Sun Jun 10, 2007 9:34 pm

At least do the above properly


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: Select all

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"
# whoami | tr 'otr' 'ekg'

ozrocpablogc
Cat in the hat
Cat in the hat
Posts: 30
Joined: Sun Jun 03, 2007 4:48 pm
Contact:

Re: Integrating a GTK theme with Fvwm color styles.

Postby ozrocpablogc » Mon Jun 11, 2007 11:00 am

Simplifying everything:

  • I have three colors defined in configs/colors and colorsets for Fvwm (mine in configs/theme_style) use them.

    Code: Select all

    SetEnv Color1 #0000ff
    SetEnv Color2 #00ff00
    SetEnv Color3 #ff0000

  • In a menu, I have this function:

    Code: Select all

    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]

  • And scripts/gtk_themeator is just this:

    Code: Select all

    #!/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

  • Finally, the gtkrc_fvwm is like this:

    Code: Select all

    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"

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 ;-)
# whoami | tr 'otr' 'ekg'

thomasadam
Administrator
Administrator
Posts: 3043
Joined: Mon Nov 08, 2004 1:12 am
Location: England
Contact:

Re: Integrating a GTK theme with Fvwm color styles.

Postby thomasadam » Mon Jun 11, 2007 7:00 pm

ozrocpablogc wrote:Is this better written, thomasadam? Thank you for the tips ;-)


It's better, but since you asked...

ozrocpablogc wrote:

Code: Select all

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]


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

Code: Select all

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


Then you have:

Code: Select all

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


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

Code: Select all

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


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

ozrocpablogc
Cat in the hat
Cat in the hat
Posts: 30
Joined: Sun Jun 03, 2007 4:48 pm
Contact:

Re: Integrating a GTK theme with Fvwm color styles.

Postby ozrocpablogc » Mon Jun 25, 2007 3:01 pm

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
# whoami | tr 'otr' 'ekg'

shaozi
Cat in the hat
Cat in the hat
Posts: 69
Joined: Thu Dec 23, 2004 9:28 am
Location: California, USA

Re: Integrating a GTK theme with Fvwm color styles.

Postby shaozi » Tue Jul 10, 2007 9:09 pm

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.

ozrocpablogc
Cat in the hat
Cat in the hat
Posts: 30
Joined: Sun Jun 03, 2007 4:48 pm
Contact:

Re: Integrating a GTK theme with Fvwm color styles.

Postby ozrocpablogc » Fri Aug 03, 2007 11:27 am

shaozi wrote: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 ( http://www.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).
# whoami | tr 'otr' 'ekg'


Return to “Other languages”

Who is online

Users browsing this forum: No registered users and 1 guest