How do I configure themes in XFCE?

Question

I am trying to set up a good dark theme but they all suck. Or maybe I'm not installing them right? I followed some instructions and the theme appears in Settings > Appearance but for the themes that look good, they is always something wrong with them, for example the Applications menu turns to white font text on white background so I can't read anything. Same for the tabs in the settings, I can't read anything. And others look fine but they won't switch the title bar color of some windows, like the Terminal window. Do all dark themes suck or what?

I am coming from GNOME 3 where I had everything set up looking nicely. Also I would like to have the clock center horizontally, I can't seem to do that in XFCE.

Any pointers?

Thanks.

Answer 1

I do not use a dark theme. However, I have tinkered quite a bit with my themes in Xfce. I agree that it can take a little work to get everything looking just right. Greybird is a nice theme. If you install it, it will include Blackbird which is probably nice. I think Numix too has a pretty nice dark theme.

A few tips:
Go to Settings Editor > xsettings > ColorScheme. There you can change the background and foreground color.

I have a file in my home directory named .gtkrc-2.0 where I have some customizations. My theme is not a dark theme and my accent color is green. (You can see at the bottom that the theme is Greybird.) So, you'll want to tweak the hexadecimal values to your liking according to a dark theme (kind of inverted from mine). There are other examples of this online too.

# Custom styles

style "gtk-theme-config-panel" {
    bg[NORMAL] = "#555555"
    bg[PRELIGHT] = "#4f7e53"
    bg[ACTIVE] = "#4f7e53"
    bg[SELECTED] = "#4f7e53"
    fg[NORMAL] = "#fcfcfc"
    fg[PRELIGHT] = "#fcfcfc"
    fg[SELECTED] = "#fcfcfc"
    fg[ACTIVE] = "#fcfcfc"
}

widget "*PanelWidget*" style "gtk-theme-config-panel"
widget "*PanelApplet*" style "gtk-theme-config-panel"
widget "*fast-user-switch*" style "gtk-theme-config-panel"
widget "*CPUFreq*Applet*" style "gtk-theme-config-panel"
widget "*indicator-applet*" style "gtk-theme-config-panel"
class "PanelApp*" style "gtk-theme-config-panel"
class "PanelToplevel*" style "gtk-theme-config-panel"
widget_class "*PanelToplevel*" style "gtk-theme-config-panel"
widget_class "*notif*" style "gtk-theme-config-panel"
widget_class "*Notif*" style "gtk-theme-config-panel"
widget_class "*Tray*" style "gtk-theme-config-panel" 
widget_class "*tray*" style "gtk-theme-config-panel"
widget_class "*computertemp*" style "gtk-theme-config-panel"
widget_class "*Applet*Tomboy*" style "gtk-theme-config-panel"
widget_class "*Applet*Netstatus*" style "gtk-theme-config-panel"
widget "*gdm-user-switch-menubar*" style "gtk-theme-config-panel"
widget "*Xfce*Panel*" style "gtk-theme-config-panel"
class "*Xfce*Panel*" style "gtk-theme-config-panel"

style "gtk-theme-config-menu" {
    base[NORMAL] = "#eeeeee"
    bg[NORMAL] = "#eeeeee"
    bg[ACTIVE] = "#eeeeee"
    bg[INSENSITIVE] = "#eeeeee"
    text[NORMAL] = "#333333"
    fg[NORMAL] = "#333333"
}

widget_class"*<GtkMenu>*"style"gtk-theme-config-menu"

gtk-theme-name="Greybird"
# End custom styles

I often end up digging into the CSS files for my themes and changing values there. For example, if there is a color you do not like on your theme, you can use gpick to get the hexadecimal value. Then you can use grep -R on your theme directory to find the places you could try changing. To try out changes, you can toggle between your theme and another.

Centering the clock:
This is a workaround and will not work if you have Window Buttons filling up the panel beneath it. You can put the clock on its own panel, then center it above the panel below it, and make the panel transparent. You'll also want to check "Lock panel" so it does not show the handles.