Making Wine colors match Ubuntu themes

Filed under: Development
Created 08/03/2008 (4:57 pm) | Updated 06/28/2010 (8:52 pm)

Inspired by attempts to make Wine‘s theme match the Human theme in Ubuntu, I tried to write a script to scrape colors from Gnome and apply them to Wine automatically, so the themes match no matter what theme you’re using in Gnome. (Of course it would be best to have actual theme support, but current implementations are uselessly slow.  Matching the color scheme is a good start, and might be a useful component of real theme support anyway.)

Download script

The latest version of the script is posted on Launchpad, though I haven’t exactly figured out how to use Bazaar yet… (Direct link to latest version here?)  Also

Here on Github

As of this edit, it works pretty well for some themes, but not others.  I’ve been told that my first all-in-one attempt was in vain, since each GTK engine is free to use GTK’s colors in whatever way it wants, so scraping from GTK directly as I am doing will only work some of the time.  To really do it correctly, I guess I would have to make separate color mappings for each GTK engine.  That doesn’t sound like fun…

Making the fonts match is also important, which isn’t covered by the script.  You can see in my screenshots that I’ve set the winecfg fonts to match Gnome, but I can’t figure out how to set the others. If you know how to set the fonts, please tell me.

Screenshots

It works pretty well for Clearlooks themes:

Blue Clearlooks theme with Tango icons

Blue Clearlooks theme with Tango icons

Ubuntu Human theme

Ubuntu Human theme

It (surprisingly) works pretty well for Ubuntu Studio’s theme:

Ubuntu Studio theme

Ubuntu Studio theme

At first I thought it wasn’t working for Darklooks, since Notepad looks nothing like Gedit, but then I noticed that certain GTK windows do look the same as Wine windows, so I have no idea what they’re doing with Darklooks:

Darklooks theme

Darklooks theme

There is apparently no way to scrape the title bar color from GTK (I’d have to go into each engine to figure out which colors they use), so I just have it using the selection color, which matches Clearlooks themes decently.  It’s a compromise anyway, since the drawing/shading/gradients of the title bars are completely different:

Ubuntu Human theme with full Wine windows

Ubuntu Human theme with full Wine windows

An example of an engine that doesn’t work is Resilience.  They use a different set of colors for the menus than the ones I am scraping, so the menu colors are not only mismatched, they are unreadable:

Resilience theme

Resilience theme

Wine color values

Although I wasn’t immediately successful with the script, I did figure out what all but one of the color values in the Windows/Wine registry do, which I couldn’t find in any concise list elsewhere. (In Windows registries, "name"="data" pairs are called “values”. See Windows Registry on Wikipedia.)

Some of the Windows registry colors I could find online, but others I had to reverse engineer by changing the registry to obvious colors and restarting the Wine software/Windows. I’ll explain them all here so you don’t have to go through the same work. There are 31 possible color values, which are the same between Wine and Windows XP registries, but have different names in the winecfg configuration dialog (which is called Configure Wine in the Gnome ApplicationsWine menu under the Desktop Integration tab).

I’ve since discovered the CSS2 system colors, which map suspiciously directly to a number of the Windows colors (with slight spelling changes, of course) allowing you to produce them in your browser (theoretically).  So it looks like the web browsers have to implement the same functionality as my scraper script.  I’m curious to know how they do it.   (Poorly, I’ve found.  The colors are scraped by nsLookAndFeel.cpp, which exists in different versions for each toolkit.)   I’ve included them in the table, too, for completeness.   (These were deprecated in CSS3 and replaced by the “appearance” property.)

Wine/Windows registry Wine Configuration Item CSS2
ActiveBorder Active Border ActiveBorder
ActiveTitle Active Title Bar ActiveCaption
AppWorkSpace Application Workspace AppWorkspace
Background Desktop Background
ButtonAlternateFace Controls Alternate Background
ButtonDkShadow Controls Dark Shadow
ButtonFace Controls Background ButtonFace
ButtonHilight Controls Highlight ButtonHighlight
ButtonLight Controls Light
ButtonShadow Controls Shadow ButtonShadow
ButtonText Controls Text ButtonText
GradientActiveTitle Active Title Bar Gradient
GradientInactiveTitle Inactive Title Bar Gradient
GrayText Gray Text GrayText
Hilight Selection Background Highlight
HilightText Selection Text HighlightText
HotTrackingColor Hot Tracked Item
InactiveBorder Inactive Border InactiveBorder
InactiveTitle Inactive Title Bar InactiveCaption
InactiveTitleText Inactive Title Text InactiveCaptionText
InfoText ToolTip Text InfoText
InfoWindow ToolTip Background InfoBackground
Menu Menu Background Menu
MenuBar Menu Bar
MenuHilight Menu Highlight
MenuText Menu Text MenuText
Scrollbar Scrollbar Scrollbar
TitleText Active Title Text CaptionText
Window Window Background Window
WindowFrame Window Frame WindowFrame
WindowText Window Text WindowText

In Wine Configuration there’s one more option called “Message Box Text”, but you can’t change its color.

CSS2 also includes the following “ThreeD” colors.  I’m not sure how they are supposed to differ from the Button colors:

ThreeDDarkShadow
Dark shadow for three-dimensional display elements.
ThreeDFace
Face color for three-dimensional display elements.
ThreeDHighlight
Highlight color for three-dimensional display elements.
ThreeDLightShadow
Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow
Dark shadow for three-dimensional display elements.

In Wine/Windows, some of these colors only appear in certain configurations, so they were hard to figure out. Here are the functions of each, as near as I can determine:

Buttons and 3D objects

  • ButtonHilight — Outermost button highlight, also used for text shadows on grayed-out buttons
  • ButtonLight — Inner lit up edges of buttons, usually set to the same color as ButtonFace
  • ButtonFace — Button background
  • ButtonText — Color for 3D object text and other glyphs (Maximize symbol, drop-down arrow, etc.)
  • ButtonShadow — Inner shadow of buttons, also used for grayed-out button text
  • ButtonDkShadow — Outermost shadow of buttons, usually black
  • WindowFrame — The glow around the widget that is currently in focus

These colors are also used for every other 3D object, like tabs, borders, drop-down boxes, etc.

I still can’t figure out what “ButtonAlternateFace” does. This is used by the registry in Windows XP and in many Wine themes online. (By default, no colors are defined in the Wine registry and it just adopts a Microsoft-esque color scheme, but they are defined in an actual Windows XP registry with the default Windows Standard Classic theme.) As far as I can tell, the “ButtonAlternativeFace” value seen around the web is just a misspelling.

Window decorations

The equivalent names for active and inactive windows aren’t instantly obvious in alphabetical order:

Active window Inactive window
Title bar text TitleText InactiveTitleText
Left end of title bar ActiveTitle InactiveTitle
Right end of title bar GradientActiveTitle GradientInactiveTitle
Window border ActiveBorder InactiveBorder

Menus

There are actually two different ways to display menus; 3D menus and flat menus. This is set by flipping one of the bits in the UserPreferencesMask value in [HKEY_CURRENT_USERControl PanelDesktop], as described in Tony Schreiner’s WebLog. I had no idea. I don’t know why flat menus aren’t the default in Wine. They seem better.

3D menus

3D menus

Flat menus

Flat menus

  • Menu — Background for menus, also background for menu bars in 3D mode
  • MenuBar — Background for menu bars. Not seen with default 3D menus
  • MenuHilight — Selected item background Highlight for flat menus. Not seen in default 3D menu mode; Hilight is used for this, instead.
  • MenuText — Menu text

Selections

  • Hilight — Background of selected text, background of selected menu item in 3D menu mode
  • HilightText — Selected text itself
  • HotTrackingColor — Hover color for single-click navigation, like links or single-click mode in Windows Explorer

Hot tracking vs selection

ToolTips

  • InfoText – Tooltip text
  • InfoWindow — Tooltip background

Backgrounds

  • AppWorkSpace — Background color of multiple-document interface (any program that lets you Tile and Cascade sub-windows inside of a main window)
  • Background — Background color of the Windows desktop (or virtual desktop in Wine)
  • Window — Background color of notepad, for instance

Scroll bar

  • Scrollbar — Background of scrollbar

This is only visible in a few applications. I see the color in Firefox, for instance, but not in Notepad, IE, MS Word, system tools, or anything else in Windows. I don’t get it.

The scroll bar buttons and handles are just colored the same as any other 3D button, but the background of the bar is just a gray in most apps, no matter what you set this value to.

In Wine, it colors the bottom right corner of Notepad, between the scrollbars, but not the scrollbars themselves. I’m not sure what this means.

Text

  • WindowText — Text in Notepad, for instance
  • GrayText — Grayed out text in windows, like labels for unavailable widgets

33 Responses to “Making Wine colors match Ubuntu themes”

  1. Alexander Gieg Says:

    Thank you very much for both the research, the script, and this post. My Wine apps look awesome now! Try to have this added to Wine or Winetricks, it’s really worth it!

  2. Endolith Says:

    It has been added to Wine Doors: http://www.wine-doors.org/trac/changeset/1536

  3. Flimm Says:

    It’s great when code gets shared between projects like that! Thanks for staying open source.

  4. Mike Says:

    How did you get your fonts anti-aliased?

  5. Endolith Says:

    I’m not sure. It looks like they are aliased in the winecfg dialog, but anti-aliased in Notepad and menus.

    I guess that’s just from setting the fonts to Bitstream Vera in winecfg’s Desktop Integration tab? I’d really like to know how to set the font everywhere programmatically, but I haven’t figured out where this is stored in the registry yet.

  6. Andy Piper Says:

    This is a great guide. I’m using it to customise my UNR 9.10 Wine install to match the look of the UNR desktop.

    I had to make a few changes where apparently the script got it a little wrong or I couldn’t access certain values in the winecfg tool. First of all I had to change the menubar colour as it is dark by default in UNR 9.10 but the GTK script seemed to make it light. Then I also had to go through and change all the fonts visible in winecfg to FreeSans 9.

    To get the rest of the fonts in the Windows not to be horrible non-aliased Verdana, I edited .wine/system.reg and altered two lines:

    [Software\\Microsoft\\Windows NT\\CurrentVersion\\FontSubstitutes]
    “MS Shell Dlg”=”FreeSans”
    “MS Shell Dlg 2″=”FreeSans”

    I also switched to 2D menus as you suggested by editing user.reg, and then I found the menu highlight colour was wrong so I made the value for Hilight the same as the one set for MenuHilight.

  7. Endolith Says:

    Yeah, the themes are different, so the script will not work perfectly with all themes. If someone wanted to, they could create test cases and have different color mappings for each theme.

    On my setup, Bitstream Vera Sans at a font size of “11″ in Wine is about the same as Sans at a font size of “8″ in Gnome.

  8. Endolith Says:

    The fonts are no longer anti-aliased, though. I’ll have to see if the old .cfg files make it anti-aliased again, and then I can get the diff.

  9. on Says:

    I got this when running python
    Traceback (most recent call last):
    File “wine_colors_from_gnome.py”, line 127, in
    color_pairs.append(‘”Background”=”%s”‘ % format_hex_color(desktop_color))
    File “wine_colors_from_gnome.py”, line 28, in format_hex_color
    return “%s %s %s” % (int(r,16), int(g,16), int(b,16))
    ValueError: invalid literal for int() with base 16: ”

    Any ideas?

  10. Endolith Says:

    You can comment out the desktop color line and it should work. Are you in Gnome? Which version? They might report the desktop color in a different format or can’t access it. I should make that part of a try.. statement instead

  11. Endolith Says:

    Actually I already had a version that included this. It’s on http://gist.github.com/74192

  12. jack Says:

    Hi
    if do not use drive /, which gives access to linux root for wine applications, then regedit.exe cant read /tmp/winecolors.reg

    $ python wine_colors_from_gtk.py
    GTK engine: Clearlooks
    Using regedit to import colors into registry…

    Warning: could not find DOS drive for current working directory ‘/home/username/.wine’, starting in the Windows directory.
    regedit: File not found “/tmp/winecolors3IQ348.reg” (2)
    Done importing colors

  13. Endolith Says:

    Sorry, I don’t understand if you’re asking a question or telling us how to fix something. Wine’s regedit can’t see the tmp file because it doesn’t know where the root filesystem is?

  14. Linus Unnebäck Says:

    Actually, I think he is trying to say that if wine isn’t configured with any path to / (wine have z: for this by default), wine can’t read from /tmp/*.

    A fix for this would be to put the reg-file in $HOME/.wine/dosdevices/c:/windows/temp/ instead ($HOME/.wine/ should be the wineprefix path, not sure how to get that).

    //Linus Unnebäck

  15. Endolith Says:

    Is ~/.wine/drive_c/windows/temp ok? I added a thing to the gist to put it there instead. Does it work?

  16. Dario Says:

    Amazing! Work Great in Karmic with Human and Human-Clearlooks.
    Thank you!

  17. casper Says:

    Thanks a lot, confirmed it works well in Lucid with Ambiance-theme (haven’t tried others though but I think they’d come with the same fantastic result).

  18. Aplicar el esquema de color de nuestro tema GTK a wine (o como integrar esteticamente aún más wine con nuestro tema) « Ubuntu Life Says:

    [...] Referencia | Endolith [...]

  19. Aplicar el esquema de color de nuestro tema GTK a wine (o como integrar esteticamente aún más wine con nuestro tema) | Ayuda Linux Says:

    [...] Referencia | Endolith [...]

  20. Ootmann Says:

    Hey thx for that! Does anybody know a script that works with kde4?

  21. Miro Hrončok Says:

    Hi, working like a charm in Xfce with Clearlooks. I Would also like to include this in my app Wibom, but I haven’t found any licence statement – is it free software?

  22. Endolith Says:

    Sure. What license do you need for compatibility? :)

  23. Miro Hrončok Says:

    My app is BSDL, but need any free licence, nothing specific :)

  24. Miro Hrončok Says:

    Is there any parmanent link to the script? I don’t belive that raw link on Github, cause it is too complicated.

  25. Endolith Says:

    The link is http://gist.github.com/74192, and you can push “Download” to get the latest version without copying and pasting.

  26. Endolith Says:

    Uhhhh… I guess it’s GPL for now. Probably something more permissive later after I do some research..

  27. Miro Hrončok Says:

    It works :) Screenshot

  28. Make Wine Apps Match Your GTK Theme With A Python Script | Lifehacker Australia Says:

    [...] Making Wine colours Match Ubuntu Themes [via OMG! Ubuntu!] Tagged:gnomelinuxubuntuwine [...]

  29. n3cr0 Says:

    Is there an easy way to take everything back?
    Thanks.

  30. Endolith Says:

    To get back to the default theme? I think deleting user.reg will do that. :/ It will lose all your other settings, too, though. Maybe the script should make a backup first…

  31. n3cr0 Says:

    Found here:
    http://www.winehq.org/pipermail/wine-bugs/2004-August/010161.html
    from reference
    http://ubuntuforums.org/showthread.php?t=55286

    =)

  32. Integrar aun más Wine con tu theme | Ubunteate Says:

    [...] | Endolith | Wine Wiki | Ubuntu Life MeneameBitacorasRedditDeliciousGoogle BuzzFacebookTwitter [...]

  33. xubuntu: wine colors, themes « नक्कारखाना (The Drum House) Says:

    [...] xubuntu: wine colors, themes Posted in linux by Sudhanshu on April 4, 2011 http://www.endolith.com/wordpress/2008/08/03/wine-colors/ [...]

Leave a Comment

Some HTML allowed. Check the preview: