Windows Phone Theme colors

Phone theme colorsWhen 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.aspx#BKMK_Implementation “Theme for Windows Phone”).

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.

1
2
3
4
5
6
7
8
9
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 caches the colors for us on their first use. The Color properties looks like this.

1
2
3
4
5
6
7
8
9
10
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.

PhoneThemeColors.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
//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 a 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 past the file in your own project and share it with your friends.

Share