18
Sep 2011
24 Comments
Dissecting the new Windows 8 Start UI: Layers, Images and Colors oh my!

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…

Exploded view of the new Start UI

Exploded view of the new Windows 8 Start UI
(© Within Windows)

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.)

Example of customized Start UI w/ original non-transparent parallax image.Example of customized Start UI w/ original non-transparent parallax image.
(© Within Windows)

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.

  • Me

    Very interesting. I assume that this will easily be customizable by users in the release version.

  • http://twitter.com/pdileepa Dileepa Prabhakar

    Does the background color also change the background color everywhere? For e.g., Alt+Tab background? Green is ugly!

    • Anonymous

      nope, in my theme still green the alt + tab.
      i didn’t think about it, i should try to find that out ;)

    • http://www.withinwindows.com Rafael R.

      Emily is right. If you compile/run my code above, it’ll dump out all the color names/values for you.

  • Anonymous

    Thanks! I was looking for that resource file!

  • http://twitter.com/NeilNuttall Neil Nuttall

    Actually, I hope this doesn’t become too cusomisable. End users could me this look really ugly really quickly.
    Maybe just ability to change the background colour, and a pre-defined set of appropialy alpha-ed background images (with the ability for power-users/sys-admins to load up new ones via a simple registry hack or GPO policy)

    • http://www.withinwindows.com Rafael R.

      Yup. I suspect we’ll see some inbox color sets/backgrounds, leaving the more advanced stuff to us tinker tots.

    • Anonymous

      They shouldn’t remove customization from every user just because some users are going to make their own desktops look ugly. That’s just got Apple written all over it.

  • Anonymous
  • Anonymous

    haha it sucks i have found this after i already found it out.

    but this is the way i made my desktop look like, i spent alot of today tweaking it to look nice!

    http://fc05.deviantart.net/fs71/i/2011/261/6/1/windows_8_metro____my_metro_by_kophs-d4aa3ou.png

  • Anonymous

    Thanks for the details Rafael. As usual brilliant work.

    If anyone wants to customize the background, following tutorial by MS MVP Vishal Gupta will help him:

    http://www.askvg.com/how-to-customize-or-change-start-screen-green-background-start-button-tiny-start-menu-and-other-metro-ui-stuff-in-windows-8/

    I checked the tutorial yesterday night. It also tells about twinui.dll file which contains resources for new tiny start menu.

  • Anonymous

    In other news, the Advanced Appearance settings window (the one that allowed you define custom title bar font, caption button size, scrollbar size etc) is gone in Windows 8. Very sad.

    • http://www.withinwindows.com Rafael R.

      It’ll be in newer builds.

      • Anonymous

        How do you know that? Is that a hopeful guess or you know it’s not removed?

      • http://www.withinwindows.com Rafael R.

        There was an OEM who confirmed it on video, forgot which.

    • http://www.withinwindows.com Rafael R.

      Correction: I misread your comment. I was referring to a new dialog to allow customization of the Start Screen. I have no information on that dialog, looks gone to me. :(

  • Panda X

    I noticed when running the code it dumps the color as bgra, it that just how its stored?

  • Bhast2

    sorry but Panda-x found this out and did the whole start menu on the 15th
    http://www.neowin.net/forum/topic/1025792-windows-8-with-purple-bg/

    • http://www.withinwindows.com Rafael R.

      You’re cute. :)

      Sent from my Windows Phone
      ——————————

  • Guest

    If anyone is interested in the output of said program, I ran it in the developer preview to get the following output: http://pastebin.com/uNC2Rwwq

  • Aditi

    Wouldn’t it be wonderful if the tiles generated for newly installed programs get their background from the program icons?

  • C-tekk

    Does anyone here know how to use custom made tiles to launch apps/programs/etc. in metro ui (windows 8) ?  I’m making some nice ones for a few apps now… here’s the one I’m working on some Media Player tiles right now.  Anyone interested in helping me figure this out?

    • C-tekk

      If you want to help me with metro tile customization, email me… thanks..
      c-tekk@live.com

  • http://galeyev.marat.myopenid.com/ Guest

    Hello, thank you for good post!
    But, do you know by chance, how to programmaticaly manipulate tiles on the Live Tile, I mean change the position, size, etc of the specific item on the Live Tile?