Making Wine colors match Ubuntu themes

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