Colorizing a Modern Win8 JavaScript AppBar and AppBarCommands

[Fixed a couple links, sorry about that]

Lots of people are happy with the default styles of the WinJS.UI.AppBar and WinJS.UI.AppBarCommands, but what if you want to "colorize" them yourself?  In a previous post I talked about using sprites for your AppBarCommands, but that is a bit heavy if you already have an icon you need, and doesn't quite cover colorizing any appbarcommand label.

So I made a little project that doesn't really do much.  It just has a JavaScript AppBar and some CSS to colorize the AppBar and the commands.  I included normal, selected and disabled states.  Additionally there's a "normal" button for comparison.


I'm using two basic colors:

  •       rgb(0, 0, 64) provides a dark blue color for the appbar, and
  •       rgb(255, 204, 204) provides a light pink contrast color for the commands.

From those we derive 2 more colors for the hover states:

  •       rgba(255, 205, 205, .13), mostly transparent for rest state when hovered, and
  •       rgba(255, 205, 205, .87), partially transparent for selected state hover, which is
          rgb(222, 178, 186), when rgba(255, 205, 205, .87) is applied on an rgb(0, 0, 65) appbar   

Additionally, we need one more color for the disabled state to dim the command:

  •       rgba(255, 205, 205, .4), fairly transparent for disabled, which is like
          rgb(102, 82, 120) when applied to an rgb(0, 0, 64) appbar

Additionally, the appbar commands have lots of interesting states with hover, pressed states, etc.  The comments in the CSS file are intended to help people understand the different pseudo selectors and classes that we use.  They could be used for other things than just colorizing, either other effects for the various states or whatever your app needs.

HTML Sample AppBar

The default.html file declares the appbar and the appbarcommands.  There's also a tiny bit of JS to make the appbar show when the app starts.

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky:true}"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{extraClass:'colorbutton', icon:'addfriend', label:'Pink', section:'selection', type:'button'}"></button> <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{extraClass:'colorbutton', type:'separator', section:'selection'}"></hr> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{extraClass:'colorbutton', icon:'hangup', label:'Selected', section:'selection', selected:true, type:'toggle'}"></button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'world', id:'', label:'normal', onclick:null, section:'global', type:'toggle'}"></button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{disabled:true, extraClass:'colorbutton', icon:'camera', label:'Disabled', type:'toggle'}"></button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{disabled:true, selected:true, extraClass:'colorbutton', icon:'addfriend', label:'Disabled', type:'toggle'}"></button></div>

The interesting part of the HTML is the "extraClass" property, which will tag each of our commands with a "colorbutton" class.

The only other file I changed from the project template is the default.css file.  This CSS does several things for us:

 Making the AppBar Blue

I probably should've added a "blue-appbar" class or something, but I just changed all appbar styles:

.win-appbar { background-color: rgb(0, 0, 64);}

That certainly makes the appbar blue, and if your appbar is "dark" in a ui-dark.css app, or "light" in a ui-light.css app, you might be satisfied with this result.  However the icons on the appbar are really supposed match the appbar background color when the button is pressed or a toggle is selected.  I cover the coloring of the commands or toggles in the various sections further on, but in case that's all you want, here it is.  (If you color the commands as well, you'll see this block later; only add it once to your project).

When pressed the "disc" part of the button matches the pink ring color and needs a darker icon that matches the appbar.  Mouse/touch and keyboard have different active pseudo-selectors:

button.colorbutton:hover:active win-commandimage,button.colorbutton:-ms-keyboard-active .win-commandimage { color: rgb(0, 0, 64);}

Similarly, when a toggle is selected, it also needs a darker icon to show up on the light pink disc:

button.colorbutton[aria-checked=true] .win-commandimage,``button.colorbutton[aria-checked=true]:active .win-commandimage,button.colorbutton[aria-checked=true]:hover .win-commandimage { color: rgb(0, 0, 64);}

Coloring the Commands Pink

Both because I wanted to contrast the "normal" color command on the blue appbar with our custom pink colors, and because your app may have different modes, I tagged our commands with "colorbutton" in their "extraClass" property.  That turns into a CSS class we can use to easily attach to our buttons, such as when declaring the default "pink" color for the command, which shows up in the label and icon.  The source has more detailed comments:

.colorbutton,.colorbutton .win-commandimage,button.colorbutton:hover:active,button.colorbutton:-ms-keyboard-active,button.colorbutton:active { color: rgb(255, 204, 204);}

In addition, the command's "ring" needs to be pink with a transparent "disc":

.colorbutton .win-commandring,.colorbutton:active .win-commandring { background-color: transparent; border-color: rgb(255, 204, 204);}

That covers the basic color of the appbar command, but there are some other colors needed when pressed.  When pressed, not only is the ring pink, but the disc needs to be pink as well, and with a pink disc, we'll need to darken the icon image to the appbar color or the pink icon will be invisible on the pink disc:

button.colorbutton:hover:active .win-commandring,button.colorbutton:-ms-keyboard-active .win-commandring { background-color: rgb(255, 204, 204); border-color: rgb(255, 204, 204);} button.colorbutton:hover:active .win-commandimage,button.colorbutton:-ms-keyboard-active .win-commandimage { color: rgb(0, 0, 64);}

A tiny bit more detail; for mouse hover we want a slight tint in the disc, keeping the pink ring.  The tint we use for the normal appbar is 13% of the foreground color:

button.colorbutton:hover .win-commandring { background-color: rgba(255, 204, 204, .13); border-color: rgb(255, 204, 204);}

For keyboard users we can keep the default focus rectangle, or we can provide our own color.  Note that appbar uses a "win-hidefocus" class to hide the keyboard focus rectangle when the button wasn't focused by keyboard.  If we override the focus rectangle for our colorbutton class, then that'll be more specific than the default CSS, and we'll need to make sure to provide the more-specific win-hidefocus selector as well.  We'll make the keyboard focus rectangle the same light pink color here:

button.colorbutton:focus { border-color: rgb(255, 204, 204);} { border-color: transparent;}

That's it!  If you don't need toggle buttons, needing to specify the selected state, or disabled buttons, then you're done and good to go!

Colorizing Toggle Commands

Selected toggle icons basically flip-flop from the normal rest and pressed states, so the disc will be filled in at rest, and empty when pressed.  Labels are unchanged, but the disc change means that the image icon needs to be flipped as well:

Pink disc:

button.colorbutton[aria-checked=true] .win-commandring,button.colorbutton[aria-checked=true]:active .win-commandring { background-color: rgb(255, 204, 204); border-color: rgb(255, 204, 204);}

And a dark icon (appbar blue colored) to go on that disc:

button.colorbutton[aria-checked=true] .win-commandimage,button.colorbutton[aria-checked=true]:active .win-commandimage,button.colorbutton[aria-checked=true]:hover .win-commandimage { color: rgb(0, 0, 64);}

Hovering will need a little hint.  We use 87% alpha, but we have to be careful because the border ring will draw on top of the disc, so we'll see it twice.  I took a screenshot of the disc, then used mspaint's color picker to find the resulting color.  If we use the rgba alpha for both, then the ring will have slightly more color than it's supposed to:

button.colorbutton[aria-checked=true]:hover .win-commandring { background-color: rgba(255, 204, 204, 0.87); border-color: rgb(222, 178, 186);}

Lastly, when pressed, a selected toggle command will look like a normal rest command.  So we need to apply the ring and image colors again for the mouse/touch pressed and keyboard pressed states.  Mouse/touch use :hover:active, and keyboard uses :-ms-keyboard-active:

button.colorbutton[aria-checked=true]:hover:active .win-commandring,button.colorbutton[aria-checked=true]:-ms-keyboard-active .win-commandring { background-color: transparent; border-color: rgb(255, 204, 204);} button.colorbutton[aria-checked=true]:hover:active .win-commandimage,button.colorbutton[aria-checked=true]:-ms-keyboard-active .win-commandimage { color: rgb(255, 204, 204);}

That's it for toggles, unless you want to disable them, then read on...

Disabled Commands

The design guildlines suggest that HideCommands, etc be used to hide commands that aren't currently available, however that's not always possible.  If you need to disable a colored command, you'll need to update the disabled styles as well.

When a command is disabled, we use a "grayed out" effect for it's rest state.  Unselected toggles also use this.  Note that our "gray" value is typically 40% of the full pink value.  We don't have to worry about hover or pressed since it's disabled, but we do need to make sure that "active" buttons stay looking disabled:

button.colorbutton:disabled .win-label,button.colorbutton:disabled:active .win-label,``button.colorbutton:disabled .win-commandimage,button.colorbutton:disabled:active .win-commandimage {   color: rgba(255, 204, 204, 0.4);} button.colorbutton:disabled .win-commandring,button.colorbutton:disabled:active .win-commandring {    background-color: transparent;    border-color: rgba(255, 204, 204, 0.4);}

And that's it for disabled commands, unless you have toggles as well:

Disabled Toggles

In addition to the above disabled command CSS for the toggle's rest state, if you have disabled toggles you'll need CSS for the disabled selected state as well.  Again, disabled pink is 40% of our normal pink state, though we are explicit about the color for our ring so that when it's applied on top of the 40% disc it doesn't appear too intense.  Also, since the disk is pink we need to make sure that the icon image stays the appbar color, dark blue in our case.  Again I used a screenshot and mspaint's color picker to figure out what 40% pink on a blue appbar was:

button.colorbutton[aria-checked=true]:disabled .win-commandring, button.colorbutton[aria-checked=true]:disabled:active .win-commandring { background-color: rgba(255, 204, 204, 0.4); border-color: rgb(102, 82, 120);} button.colorbutton[aria-checked=true]:disabled .win-commandimage, button.colorbutton[aria-checked=true]:disabled:active .win-commandimage { color: rgb(0, 0, 65);}

And that's it for disabled toggles!  That's most of everything, unless you have a separator in your appbar.


Separators aren't very common in appbars, but if you do colorize your appbar and/or appbar commands, you might want to colorize your separator as well.  The normal separator is a "48% white" color, so I used 48% pink... {
    background-color: rgba(255, 204, 204, 0.48);

That's It!

That's it for the CSS needed to colorize the AppBar &/or AppBarCommands with colors specific to your app's needs.

The link to my example project is here.  The default.css file has more detailed comments about the various states:

You might also be interested in the sprite example for more involved appbar icon image customization: