Windows Phone Theme Colors

When developing Windows Phone apps, I love to use the theme accent colors in my apps. Since there are some new theme colors in Windows Phone 8, I started searching for their color codes. Lucky me, I found them on MSDN.

Now you may be thinking how to use the colors in your own Windows Phone apps. The Color object doesn’t contain a color called Emerald. So I created a small class to help me out with this issue. First of all, I created a small static helper method to convert the hexa colors to a color object. So we are able to put in the hexa color string and the function returns a color for us.

public static Color FromHexa(string hexaColor)
{
    return Color.FromArgb(
    Convert.ToByte(hexaColor.Substring(1, 2), 16),
    Convert.ToByte(hexaColor.Substring(3, 2), 16),
    Convert.ToByte(hexaColor.Substring(5, 2), 16),
    Convert.ToByte(hexaColor.Substring(7, 2), 16)
    );
}

Then, I made some properties that cache the colors for us on their first use. The Color properties look like this:

private static Color _lime;
public static Color Lime
{
    get
    {
        if (_lime == null)
            _lime = FromHexa("#FFA4CC00");
        return _lime;
    }
}

So this is the complete class I came up with.

//Copyright (c) 2012 Marco Franssen
//Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
//and associated documentation files (the "Software"), to deal in the Software without restriction, 
//including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 
//and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 
//subject to the following conditions:
//The above copyright notice and this permission notice shall be included in all copies or 
//substantial portions of the Software.
//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING 
//BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
//IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
//DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
//ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
//OR OTHER DEALINGS IN THE SOFTWARE.
using System;
using System.Windows.Media;

namespace MarcoFranssen.Phone.Core
{
public static class PhoneThemeColors
{
    private static Color _lime;
    public static Color Lime
    {
        get
        {
        if (_lime == null)
            _lime = FromHexa("#FFA4CC00");
        return _lime;
        }
    }

    private static Color _green;
    public static Color Green
    {
        get
        {
        if (_green == null)
            _green = FromHexa("#FF60A917");
        return _green;
        }
    }

    private static Color _emerald;
    public static Color Emerald
    {
        get
        {
        if (_emerald == null)
            _emerald = FromHexa("#FF008A00");
        return _emerald;
        }
    }

    private static Color _teal;
    public static Color Teal
    {
        get
        {
        if (_teal == null)
            _teal = FromHexa("#FF00ABA9");
        return _teal;
        }
    }

    private static Color _cyan;
    public static Color Cyan
    {
        get
        {
            if (_cyan == null)
                _cyan = FromHexa("#FF1BA1E2");
            return _cyan;
        }
    }

    private static Color _cobalt;
    public static Color Cobalt
    {
        get
        {
            if (_cobalt == null)
                _cobalt = FromHexa("#FF0050EF");
            return _cobalt;
        }
    }

    private static Color _indigo;
    public static Color Indigo
    {
        get
        {
            if (_indigo == null)
                _indigo = FromHexa("#FF6A00FF");
            return _indigo;
        }
    }

    private static Color _violet;
    public static Color Violet
    {
        get
        {
            if (_violet == null)
                _violet = FromHexa("#FFAA00FF");
            return _violet;
        }
    }

    private static Color _pink;
    public static Color Pink
    {
        get
        {
            if (_pink == null)
                _pink = FromHexa("#FFF47D02");
            return _pink;
        }
    }

    private static Color _magenta;
    public static Color Magenta
    {
        get
        {
            if (_magenta == null)
                _magenta = FromHexa("#FFD80073");
            return _magenta;
        }
    }

    private static Color _crimson;
    public static Color Crimson
    {
        get
        {
            if (_crimson == null)
                _crimson = FromHexa("#FFA20025");
            return _crimson;
        }
    }

    private static Color _red;
    public static Color Red
    {
        get
        {
            if (_red == null)
                _red = FromHexa("#FFE51400");
            return _red;
        }
    }

    private static Color _orange;
    public static Color Orange
    {
        get
        {
            if (_orange == null)
                _orange = FromHexa("#FFFA6800");
            return _orange;
        }
    }

    private static Color _amber;
    public static Color Amber
    {
        get
        {
            if (_amber == null)
                _amber = FromHexa("#FFF0A30A");
            return _amber;
        }
    }

    private static Color _yellow;
    public static Color Yellow
    {
        get
        {
            if (_yellow == null)
                _yellow = FromHexa("#FFD8C100");
            return _yellow;
        }
    }

    private static Color _brown;
    public static Color Brown
    {
        get
        {
            if (_brown == null)
                _brown = FromHexa("#FF825A2C");
            return _brown;
        }
    }

    private static Color _olive;
    public static Color Olive
    {
        get
        {
            if (_olive == null)
                _olive = FromHexa("#FF6D8764");
            return _olive;
        }
    }

    private static Color _steel;
    public static Color Steel
    {
        get
        {
            if (_steel == null)
                _steel = FromHexa("#FF647687");
            return _steel;
        }
    }

    private static Color _mauve;
    public static Color Mauve
    {
        get
        {
            if (_mauve == null)
                _mauve = FromHexa("#FF76608A");
            return _mauve;
        }
    }

    private static Color _sienna;
    public static Color Sienna
    {
        get
        {
            if (_sienna == null)
                _sienna = FromHexa("#FF7A3B3F");
            return _sienna;
        }
    }

    public static Color FromHexa(string hexaColor)
    {
        return Color.FromArgb(
            Convert.ToByte(hexaColor.Substring(1, 2), 16),
            Convert.ToByte(hexaColor.Substring(3, 2), 16),
            Convert.ToByte(hexaColor.Substring(5, 2), 16),
            Convert.ToByte(hexaColor.Substring(7, 2), 16)
            );
    }
}
}

When you want to use it in an MVVM solution, you probably want to create a SolidColorBrush to bind your control to. You could use my class like this to make a bindable property for your ViewModel.

public class MyViewModel : INotifyPropertyChanged
{
    private SolidColorBrush _myTextColor = new SolidColorBrush(PhoneThemeColors.Crimson);
    public SolidColorBrush MyTextColor
    {
        get { return _myTextColor; }
        set
        {
            if (_myTextColor != value)
            {
                _myTextColor = value;
                OnPropertyChanged("MyTextColor");
            }
        }
    }

#region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler == null) return;
            handler (this, new PropertyChangedEventArgs(propertyName));
    }

#endregion
}

I hope you found this article useful. Please fork my gist on Github or pass the file in your own project and share it with your friends.