Loading...

Dissecting the new Windows 8 Start UI: Layers, Images and Colors oh my!

Sunday, September 25, 2011 // by Saurabh // Labels: , , , , // No comments:
At BUILD, we were given loaner Windows 8 Developer Preview (WDP) PCs to tinker with. Shortly after, I was approached and asked: Can you figure out how to change the green background color present on the new Start UI? “That shouldn’t be hard”, I replied. Days later, it became obvious it was a little more complicated than that…
The Start UI makes use of at least three layers –  a foreground (tile) layer, a background image layer, and a background color layer. Farthest from the eye is the background color layer, which is set to a single RGBA color (#0e6e39ff in this case) and fits to the dimensions of the screen. The optional middle layer contains an image used in conjunction with clever parallax scrolling to subtly hint visual depth. Floating on top are your tiles.
The Control Panel UI used to customize color throughout Windows 8 isn’t present in the WDP build, but you can gauge how customizable future builds of Windows 8 will be by inspecting its internal “Color Sets”. A Color Set is simply a collection (or set) of RGBA Color name and value pairs. Baked into the WDP are currently two Color Sets – one for normal use and one for high contrast use, identified internally as 0 and 1 respectively.
You can dig into these Color Sets using new APIs added to the Uxtheme library, e.g. GetImmersiveColorNamedTypeByIndex and GetImmersiveColorFromColorSetEx. I wrote a quick and dirty C# + Win32 application that iterated through the 475 defined Colors and printed out their names, values, and index positions.
[DllImport("uxtheme.dll", EntryPoint = "#100")]
static extern IntPtr GetImmersiveColorNamedTypeByIndex(uint dwIdx);

[DllImport("uxtheme.dll", EntryPoint = "#95")]
static extern uint GetImmersiveColorFromColorSetEx(uint dwColorSet, uint dwItemIdx, bool bIgnoreHighContrast);

static void Main(string[] args)
{
    for (uint i = 0; i < 475; i++)
    {
        var ppsz = GetImmersiveColorNamedTypeByIndex(i);
        Console.WriteLine("idx: {0}, name: {1}", i,
            Marshal.PtrToStringUni(Marshal.ReadIntPtr(ppsz)));

        //
        // We're only interested in the standard color set, hence the 0.
        //
        var rgba = GetImmersiveColorFromColorSetEx(0, i, true);
        Console.WriteLine("color: {0:X}", rgba);

        Console.WriteLine();
    }

    return;

}


I won’t go through and map all 475 Colors here, but lets take a look at the Start UI again. The background color is driven by the Color named “ImmersiveStartBackground”. Tiles created from applications on the Classic Desktop (e.g. Visual Studio 11 Express) get their background appearance from the “ImmersiveStartDesktopTilesBackground” Color. Those same tiles also look to the “ImmersiveStartDesktopTilesText” Color for its text color.


So, back to the question from BUILD – how do you change the green background color?


If you’re not prepared to spend a lot of time on this, wait for updated Windows 8 bits featuring new Control Panel UI. No, really. I mean it. If you must, you can find the normal Color Set (g_ImmersiveColors) baked into Uxtheme.dll at file offset 0x96F30 (or 0x32E68 for x86) and the high-contrast Color Set (g_ImmersiveHighContrastMappings) at 0xA6BF0 (or 0×49058 for x86). (You can use my code above to map Color names to index positions.)
One quirk you’ll quickly discover is that changing the “ImmersiveStartBackground” color isn’t enough. Unfortunately, whomever designed the placeholder parallax image opted out of the use of alpha-transparency and simply used an opaque green color. If you must change these images, you can find the PNGs in shsxs.dll – resource items 5231 and 5232.


Like It? Share It

0 comments:

Post a Comment

Popular Posts

Advertisement