<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>nothing to see here &#187; Development</title>
	<atom:link href="http://www.endolith.com/wordpress/category/development/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.endolith.com/wordpress</link>
	<description>move along</description>
	<lastBuildDate>Sat, 03 Dec 2011 22:20:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Making Wine colors match Ubuntu themes</title>
		<link>http://www.endolith.com/wordpress/2008/08/03/wine-colors/</link>
		<comments>http://www.endolith.com/wordpress/2008/08/03/wine-colors/#comments</comments>
		<pubDate>Sun, 03 Aug 2008 20:57:08 +0000</pubDate>
		<dc:creator>Endolith</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[appearance]]></category>
		<category><![CDATA[colors]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[theming]]></category>
		<category><![CDATA[Ubuntu]]></category>
		<category><![CDATA[Wine]]></category>

		<guid isPermaLink="false">http://www.endolith.com/wordpress/?p=46</guid>
		<description><![CDATA[Inspired by attempts to make Wine&#8216;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&#8217;re using in Gnome. (Of course it would be best to have actual theme support, but current [...]]]></description>
			<content:encoded><![CDATA[<p>Inspired by attempts to make <a href="http://www.winehq.org/">Wine</a>&#8216;s theme <a title="Ubuntu Wiki - &quot;ou can change the wine color scheme to closely match the default Ubuntu colors &quot;" href="https://help.ubuntu.com/community/Wine#Color%20Scheme">match the Human theme in Ubuntu</a>, I tried to write a script to scrape colors from <a href="http://www.gnome.org/">Gnome</a> and apply them to Wine automatically, so the themes match no matter what theme you&#8217;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.)</p>
<h3 id="toc-download-script">Download script</h3>
<p>The latest version of the script is<span style="text-decoration: line-through;"> <a href="https://code.launchpad.net/~endolith/+junk/wine-color-scraper">posted on Launchpad</a>, though I haven&#8217;t exactly figured out how to use Bazaar yet&#8230;  (Direct link to latest version <a href="http://bazaar.launchpad.net/%7Eendolith/%2Bjunk/wine-color-scraper/download/head%3A/wine_colors_from_gno-20080917052131-swsx4rmh15fu1csz-1/wine_colors_from_gnome.py?file_id=wine_colors_from_gno-20080917052131-swsx4rmh15fu1csz-1">here</a>?)  Also</span> <a href="http://gist.github.com/74192"></a></p>
<p><a href="http://gist.github.com/74192">Here</a> on Github</p>
<p>As of this edit, it works pretty well for some themes, but not others.  I&#8217;ve been told that my first all-in-one attempt was in vain, since each GTK engine is free to use GTK&#8217;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&#8217;t sound like fun&#8230;</p>
<p>Making the fonts match is also important, which isn&#8217;t covered by the script.  You can see in my screenshots that I&#8217;ve set the winecfg fonts to match Gnome, but I can&#8217;t figure out how to set the others.  If you know how to set the fonts, please tell me.</p>
<h3 id="toc-screenshots">Screenshots</h3>
<p>It works pretty well for Clearlooks themes:</p>
<div id="attachment_311" class="wp-caption alignnone" style="width: 310px"><a rel="attachment wp-att-311" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/blue-clearlooks/"><img class="size-medium wp-image-311" title="blue-clearlooks" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/10/blue-clearlooks-300x131.png" alt="Blue Clearlooks theme with Tango icons" width="300" height="131" /></a><p class="wp-caption-text">Blue Clearlooks theme with Tango icons</p></div>
<div id="attachment_341" class="wp-caption alignnone" style="width: 310px"><a rel="attachment wp-att-341" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/ubuntu-human1/"><img class="size-medium wp-image-341" title="ubuntu-human" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/10/ubuntu-human1-300x131.png" alt="Ubuntu Human theme" width="300" height="131" /></a><p class="wp-caption-text">Ubuntu Human theme</p></div>
<p>It (surprisingly) works pretty well for Ubuntu Studio&#8217;s theme:</p>
<div id="attachment_317" class="wp-caption alignnone" style="width: 310px"><a rel="attachment wp-att-317" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/ubuntu-studio-all/"><img class="size-medium wp-image-317" title="ubuntu-studio-all" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/10/ubuntu-studio-all-300x300.png" alt="Ubuntu Studio theme" width="300" height="300" /></a><p class="wp-caption-text">Ubuntu Studio theme</p></div>
<p>At first I thought it wasn&#8217;t working for Darklooks, since Notepad looks nothing like Gedit, but then I noticed that certain GTK windows <em>do</em> look the same as Wine windows, so I have no idea what they&#8217;re doing with Darklooks:</p>
<div id="attachment_320" class="wp-caption alignnone" style="width: 310px"><a rel="attachment wp-att-320" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/darklooks/"><img class="size-medium wp-image-320" title="darklooks" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/10/darklooks-300x291.png" alt="Darklooks theme" width="300" height="291" /></a><p class="wp-caption-text">Darklooks theme</p></div>
<p>There is apparently no way to scrape the title bar color from GTK (I&#8217;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&#8217;s a compromise anyway, since the drawing/shading/gradients of the title bars are completely different:</p>
<div id="attachment_321" class="wp-caption alignnone" style="width: 310px"><a rel="attachment wp-att-321" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/human-full-windows/"><img class="size-medium wp-image-321" title="human-full-windows" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/10/human-full-windows-300x256.png" alt="Ubuntu Human theme with full Wine windows" width="300" height="256" /></a><p class="wp-caption-text">Ubuntu Human theme with full Wine windows</p></div>
<p>An example of an engine that doesn&#8217;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:</p>
<div id="attachment_322" class="wp-caption alignnone" style="width: 310px"><a rel="attachment wp-att-322" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/resilience-bad/"><img class="size-medium wp-image-322" title="resilience-bad" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/10/resilience-bad-300x133.png" alt="Resilience theme" width="300" height="133" /></a><p class="wp-caption-text">Resilience theme</p></div>
<h3 id="toc-wine-color-values">Wine color values</h3>
<p>Although I <a href="http://ubuntuforums.org/showthread.php?p=5506889#post5506889">wasn&#8217;t immediately successful</a> with the script, I did figure out what all but one of the color values in the Windows/Wine registry do, which I couldn&#8217;t find in any concise list elsewhere. (In Windows registries, <code>"name"="data"</code> pairs are called &#8220;values&#8221;.  See <a title="Windows Registry - Wikipedia" href="http://en.wikipedia.org/wiki/Windows_registry#Keys_and_values">Windows Registry</a> on Wikipedia.)</p>
<p>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&#8217;ll explain them all here so you don&#8217;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 <code>winecfg</code> configuration dialog (which is called <em>Configure Wine</em> in the Gnome <em>Applications</em> ▸ <em>Wine</em> menu under the <em>Desktop Integration</em> tab).</p>
<p>I&#8217;ve since discovered the <a title="CSS2 system colors demonstration" href="http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html">CSS2 system colors</a>, 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&#8217;m curious to know how they do it.   (Poorly, <a href="http://ubuntuforums.org/showthread.php?t=878068#10">I&#8217;ve found</a>.  The colors are scraped by <a href="http://www.google.com/codesearch/p?hl=en#e_ObwTAVPyo/widget/src/gtk2/nsLookAndFeel.cpp&amp;q=nsLookAndFeel.cpp">nsLookAndFeel.cpp</a>, which exists in different versions for each toolkit.)   I&#8217;ve included them in the table, too, for completeness.   (These were deprecated in CSS3 and replaced by <a href="http://www.w3.org/TR/2003/WD-css3-ui-20030703/#system">the &#8220;appearance&#8221; property</a>.)</p>
<table border="1" cellspacing="0">
<tbody>
<tr>
<th>Wine/Windows registry</th>
<th><em>Wine Configuration</em> Item</th>
<th>CSS2</th>
</tr>
<tr>
<td><code>ActiveBorder</code></td>
<td>Active Border</td>
<td><code>ActiveBorder</code></td>
</tr>
<tr>
<td><code>ActiveTitle</code></td>
<td>Active Title Bar</td>
<td><code>ActiveCaption</code></td>
</tr>
<tr>
<td><code>AppWorkSpace</code></td>
<td>Application Workspace</td>
<td><code>AppWorkspace</code></td>
</tr>
<tr>
<td><code>Background</code></td>
<td>Desktop</td>
<td><code>Background</code></td>
</tr>
<tr>
<td><code>ButtonAlternateFace</code></td>
<td>Controls Alternate Background</td>
</tr>
<tr>
<td><code>ButtonDkShadow</code></td>
<td>Controls Dark Shadow</td>
</tr>
<tr>
<td><code>ButtonFace</code></td>
<td>Controls Background</td>
<td><code>ButtonFace</code></td>
</tr>
<tr>
<td><code>ButtonHilight</code></td>
<td>Controls Highlight</td>
<td><code>ButtonHighlight</code></td>
</tr>
<tr>
<td><code>ButtonLight</code></td>
<td>Controls Light</td>
</tr>
<tr>
<td><code>ButtonShadow</code></td>
<td>Controls Shadow</td>
<td><code>ButtonShadow</code></td>
</tr>
<tr>
<td><code>ButtonText</code></td>
<td>Controls Text</td>
<td><code>ButtonText</code></td>
</tr>
<tr>
<td><code>GradientActiveTitle</code></td>
<td>Active Title Bar Gradient</td>
</tr>
<tr>
<td><code>GradientInactiveTitle</code></td>
<td>Inactive Title Bar Gradient</td>
</tr>
<tr>
<td><code>GrayText</code></td>
<td>Gray Text</td>
<td><code>GrayText</code></td>
</tr>
<tr>
<td><code>Hilight</code></td>
<td>Selection Background</td>
<td><code>Highlight</code></td>
</tr>
<tr>
<td><code>HilightText</code></td>
<td>Selection Text</td>
<td><code>HighlightText</code></td>
</tr>
<tr>
<td><code>HotTrackingColor</code></td>
<td>Hot Tracked Item</td>
</tr>
<tr>
<td><code>InactiveBorder</code></td>
<td>Inactive Border</td>
<td><code>InactiveBorder</code></td>
</tr>
<tr>
<td><code>InactiveTitle</code></td>
<td>Inactive Title Bar</td>
<td><code>InactiveCaption</code></td>
</tr>
<tr>
<td><code>InactiveTitleText</code></td>
<td>Inactive Title Text</td>
<td><code>InactiveCaptionText</code></td>
</tr>
<tr>
<td><code>InfoText</code></td>
<td>ToolTip Text</td>
<td><code>InfoText</code></td>
</tr>
<tr>
<td><code>InfoWindow</code></td>
<td>ToolTip Background</td>
<td><code>InfoBackground</code></td>
</tr>
<tr>
<td><code>Menu</code></td>
<td>Menu Background</td>
<td><code>Menu</code></td>
</tr>
<tr>
<td><code>MenuBar</code></td>
<td>Menu Bar</td>
</tr>
<tr>
<td><code>MenuHilight</code></td>
<td>Menu Highlight</td>
</tr>
<tr>
<td><code>MenuText</code></td>
<td>Menu Text</td>
<td><code>MenuText</code></td>
</tr>
<tr>
<td><code>Scrollbar</code></td>
<td>Scrollbar</td>
<td><code>Scrollbar</code></td>
</tr>
<tr>
<td><code>TitleText</code></td>
<td>Active Title Text</td>
<td><code>CaptionText</code></td>
</tr>
<tr>
<td><code>Window</code></td>
<td>Window Background</td>
<td><code>Window</code></td>
</tr>
<tr>
<td><code>WindowFrame</code></td>
<td>Window Frame</td>
<td><code>WindowFrame</code></td>
</tr>
<tr>
<td><code>WindowText</code></td>
<td>Window Text</td>
<td><code>WindowText</code></td>
</tr>
</tbody>
</table>
<p>In <em>Wine Configuration</em> there&#8217;s one more option called &#8220;Message Box Text&#8221;, but you can&#8217;t change its color.</p>
<p>CSS2 also includes the following &#8220;ThreeD&#8221; colors.  I&#8217;m not sure how they are supposed to differ from the Button colors:</p>
<dl>
<dt><strong>ThreeDDarkShadow</strong> </dt>
<dd>Dark shadow for three-dimensional display elements. </dd>
<dt><strong>ThreeDFace</strong> </dt>
<dd>Face color for three-dimensional display elements. </dd>
<dt><strong>ThreeDHighlight</strong> </dt>
<dd>Highlight color for three-dimensional display elements. </dd>
<dt><strong>ThreeDLightShadow</strong> </dt>
<dd>Light color for three-dimensional display elements (for edges facing the light source). </dd>
<dt><strong>ThreeDShadow</strong> </dt>
<dd>Dark shadow for three-dimensional display elements. </dd>
</dl>
<p>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:</p>
<h4 id="toc-buttons-and-3d-objects">Buttons and 3D objects</h4>
<p><a rel="attachment wp-att-159" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/buttons/"><img class="alignnone size-full wp-image-159" title="buttons" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/08/buttons.png" alt="" width="348" height="475" /></a></p>
<ul>
<li><code><span style="color: #ffff00;">ButtonHilight</span></code> &#8212; Outermost button highlight, also used for text shadows on grayed-out buttons</li>
<li><span style="color: #00ff00;"><code>ButtonLight</code></span> &#8212; Inner lit up edges of buttons, usually set to the same color as ButtonFace</li>
<li> <span style="color: #cccccc;"><code>ButtonFace</code></span> &#8212; Button background</li>
<li><span style="background-color: #cccccc; color: #000000;"><code>ButtonText</code></span> &#8212; Color for 3D object text and other glyphs (Maximize symbol, drop-down arrow, etc.)</li>
<li><span style="color: #ff0000;"><code>ButtonShadow</code></span> &#8212; Inner shadow of buttons, also used for grayed-out button text</li>
<li><span style="color: #0000ff;"><code>ButtonDkShadow</code></span> &#8212; Outermost shadow of buttons, usually black</li>
<li> <span style="color: #00ffff;"><code>WindowFrame</code></span> &#8212; The glow around the widget that is currently in focus</li>
</ul>
<p>These colors are also used for every other 3D object, like tabs, borders, drop-down boxes, etc.</p>
<p>I still can&#8217;t figure out what &#8220;<code>ButtonAlternateFace</code>&#8221; 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 <a rel="attachment wp-att-73" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/windows-standard-xp-classic-colors/">default Windows Standard Classic theme</a>.)  As far as I can tell, the &#8220;<code>ButtonAlternativeFace</code>&#8221; value seen around the web is just a misspelling.</p>
<h4 id="toc-window-decorations">Window decorations</h4>
<p>The equivalent names for active and inactive windows aren&#8217;t instantly obvious in alphabetical order:</p>
<table border="1" cellspacing="0">
<tbody>
<tr>
<td></td>
<th>Active window</th>
<th>Inactive window</th>
</tr>
<tr>
<th>Title bar text</th>
<td><code>TitleText</code></td>
<td><code>InactiveTitleText</code></td>
</tr>
<tr>
<th>Left end of title bar</th>
<td><code>ActiveTitle</code></td>
<td><code>InactiveTitle</code></td>
</tr>
<tr>
<th>Right end of title bar</th>
<td><code>GradientActiveTitle</code></td>
<td><code>GradientInactiveTitle</code></td>
</tr>
<tr>
<th>Window border</th>
<td><code>ActiveBorder</code></td>
<td><code>InactiveBorder</code></td>
</tr>
</tbody>
</table>
<h4 id="toc-menus">Menus</h4>
<p>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 <code>UserPreferencesMask</code> value in <code>[HKEY_CURRENT_USERControl PanelDesktop]</code>, as described in <a href="http://blogs.msdn.com/tonyschr/archive/2004/05/10/129412.aspx">Tony Schreiner&#8217;s WebLog</a>.  I had no idea.  I don&#8217;t know why flat menus <a title="Bug 256520: Should use flat menus by default instead of 3D menus" href="https://bugs.launchpad.net/ubuntu/+source/wine/+bug/256520">aren&#8217;t the default in Wine</a>.  They seem better.</p>
<div id="attachment_126" class="wp-caption alignnone" style="width: 390px"><a rel="attachment wp-att-126" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/menus-3d/"><img class="size-full wp-image-126" title="menus-3d" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/08/menus-3d.png" alt="3D menus" width="380" height="260" /></a><p class="wp-caption-text">3D menus</p></div>
<div id="attachment_127" class="wp-caption alignnone" style="width: 390px"><a rel="attachment wp-att-127" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/menus-flat/"><img class="size-full wp-image-127" title="menus-flat" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/08/menus-flat.png" alt="Flat menus" width="380" height="260" /></a><p class="wp-caption-text">Flat menus</p></div>
<ul>
<li><span style="color: #ff00ff;"><code>Menu</code></span> &#8212; Background for menus, also background for menu bars in 3D mode</li>
<li> <span style="color: #00ffff;"><code>MenuBar</code></span> &#8212; Background for menu bars. Not seen with default 3D menus</li>
<li> <span style="color: #ffff00;"><code>MenuHilight</code></span> &#8212; Selected item background Highlight for flat menus.  Not seen in default 3D menu mode; <span style="color: #0000ff;"><code>Hilight</code></span> is used for this, instead.</li>
<li> <code>MenuText</code> &#8212; Menu text</li>
</ul>
<h4 id="toc-selections">Selections</h4>
<ul>
<li> <span style="color: #0a246a;"><code>Hilight</code></span> &#8212; Background of selected text, background of selected menu item in 3D menu mode</li>
<li><code>HilightText</code> &#8212; Selected text itself</li>
<li> <span style="color: #ffff00;"><code>HotTrackingColor</code></span> &#8212; Hover color for single-click navigation, like links or single-click mode in Windows Explorer</li>
</ul>
<div id="attachment_139" class="wp-caption alignnone" style="width: 192px"><a rel="attachment wp-att-139" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/hot-tracking-color/"><img class="size-full wp-image-139" title="hot-tracking-color" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/08/hot-tracking-color.png" alt="" width="182" height="269" /></a><p class="wp-caption-text">Hot tracking vs selection</p></div>
<h4 id="toc-tooltips">ToolTips</h4>
<ul>
<li><code>InfoText </code>&#8211; Tooltip text</li>
<li> <code>InfoWindow</code> &#8212; Tooltip background</li>
</ul>
<h4 id="toc-backgrounds">Backgrounds</h4>
<ul>
<li><code>AppWorkSpace</code> &#8212; Background color of multiple-document interface (any program that lets you Tile and Cascade sub-windows inside of a main window)</li>
<li><code> Background</code> &#8212; Background color of the Windows desktop (or virtual desktop in Wine)</li>
<li> <code>Window</code> &#8212; Background color of notepad, for instance</li>
</ul>
<h4 id="toc-scroll-bar">Scroll bar</h4>
<p><a rel="attachment wp-att-142" href="http://www.endolith.com/wordpress/2008/08/03/wine-colors/scrollbar/"><img class="alignnone size-full wp-image-142" title="scrollbar" src="http://www.endolith.com/wordpress/wp-content/uploads/2008/08/scrollbar.png" alt="" width="500" height="366" /></a></p>
<ul>
<li> <span style="color: #00ff00;"><code>Scrollbar</code></span> &#8212; Background of scrollbar</li>
</ul>
<p>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&#8217;t get it.</p>
<p>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.</p>
<p>In Wine, it colors the bottom right corner of Notepad, between the scrollbars, but not the scrollbars themselves.  I&#8217;m not sure what this means.</p>
<h4 id="toc-text">Text</h4>
<ul>
<li> <code>WindowText</code> &#8212; Text in Notepad, for instance</li>
<li> <code>GrayText</code> &#8212; Grayed out text in windows, like labels for unavailable widgets</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.endolith.com/wordpress/2008/08/03/wine-colors/feed/</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
	</channel>
</rss>

