Adding a few requested icons changes:

* Add Night Version of Icons
* Add Solid Black Icons
* Add Solid White Icons

Fixes issue #2

README.md

@@ -5,7 +5,7 @@ Weather Underground Icons
 
 These icons were created by the Graphic Designer [Ashley Jager](http://www.ajager.com/#/weather-underground/).  She released these icons in a beautiful [Adobe Illustrator](https://dribbble.com/shots/1879422-Weather-Underground-Icons) file. This project simply breaks that AI file up into web friendly icons that can be used in your projects.
 
-![tstorms](dist/icons/black/png/256x256/tstorms.png "tstorms") 
+![tstorms](dist/icons/black/png/256x256/tstorms.png "tstorms")
 
 Demo Website
 ---
@@ -58,6 +58,24 @@ All CSS Icons will default to using SVG files.  However, you can use PNG sprites
 
 ![tstorms](dist/icons/white/png/32x32/tstorms.png "tstorms")
 
+### Icon Class Day & Night:
+
+* Default is to use Day Icons
+
+```html
+<i class="wu wu-black wu-32 wu-clear"></i>
+```
+
+![clear](dist/icons/black/png/32x32/clear.png "clear")
+
+* `wu-night` to use Night Icons
+
+```html
+<i class="wu wu-white wu-32 wu-clear wu-night"></i>
+```
+
+![clear](dist/icons/white/png/32x32/nt_clear.png "clear")
+
 ### Icon Class Sizes:
 
 * `wu-16` 16x16px icons
@@ -100,7 +118,7 @@ All CSS Icons will default to using SVG files.  However, you can use PNG sprites
 
 ![flurries](dist/icons/black/png/256x256/flurries.png "flurries")
 
-Icon Key
+Day Icon Key
 ---
 
 Here are the `icon` options for each weather option:
@@ -128,9 +146,55 @@ ICON | KEY | DESCRIPTION
 ![tstorms](dist/icons/black/png/32x32/tstorms.png "tstorms") | tstorms | Thunderstorms
 ![unknown](dist/icons/black/png/32x32/unknown.png "unknown") | unknown | Unknown
 
-Icon Preview
+
+Night Icon Key
 ---
 
-![White Icons](dist/icons/white/icon-preview.png "White Icons")
+Here are the `icon` options for each weather option:
+
+ICON | KEY | DESCRIPTION
+---- | --- | -----------
+![chanceflurries](dist/icons/black/png/32x32/nt_chanceflurries.png "chanceflurries") | chanceflurries | Chance of Flurries
+![chancerain](dist/icons/black/png/32x32/nt_chancerain.png "chancerain") | chancerain | Chance of Rain
+![chancesleet](dist/icons/black/png/32x32/nt_chancesleet.png "chancesleet") | chancesleet | Chance Freezing Rain
+![chancesnow](dist/icons/black/png/32x32/nt_chancesnow.png "chancesnow") | chancesnow | Chance of Snow
+![chancetstorms](dist/icons/black/png/32x32/nt_chancetstorms.png "chancetstorms") | chancetstorms | Chance of Thunderstorms
+![clear](dist/icons/black/png/32x32/nt_clear.png "clear") | clear | Clear
+![cloudy](dist/icons/black/png/32x32/nt_cloudy.png "cloudy") | cloudy | Cloudy
+![flurries](dist/icons/black/png/32x32/nt_flurries.png "flurries") | flurries | Flurries
+![fog](dist/icons/black/png/32x32/nt_fog.png "fog") | fog | Fog
+![hazy](dist/icons/black/png/32x32/nt_hazy.png "hazy") | hazy | Haze
+![mostlycloudy](dist/icons/black/png/32x32/nt_mostlycloudy.png "mostlycloudy") | mostlycloudy | Mostly Cloudy
+![mostlysunny](dist/icons/black/png/32x32/nt_mostlysunny.png "mostlysunny") | mostlysunny | Mostly Sunny
+![partlycloudy](dist/icons/black/png/32x32/nt_partlycloudy.png "partlycloudy") | partlycloudy | Partly Cloudy
+![partlysunny](dist/icons/black/png/32x32/nt_partlysunny.png "partlysunny") | partlysunny | Partly Sunny
+![rain](dist/icons/black/png/32x32/nt_rain.png "rain") | rain | Rain
+![sleet](dist/icons/black/png/32x32/nt_sleet.png "sleet") | sleet | Freezing Rain
+![snow](dist/icons/black/png/32x32/nt_snow.png "snow") | snow | Snow
+![sunny](dist/icons/black/png/32x32/nt_sunny.png "sunny") | sunny | Sunny
+![tstorms](dist/icons/black/png/32x32/nt_tstorms.png "tstorms") | tstorms | Thunderstorms
+![unknown](dist/icons/black/png/32x32/nt_unknown.png "unknown") | unknown | Unknown
+
+
+Day Icon Preview
+---
+
+![White Day Icons](dist/icons/white/icon-preview.png "White Icons")
+
+![Black Day Icons](dist/icons/black/icon-preview.png "Black Icons")
+
+![White Day Icons](dist/icons/solid-white/icon-preview.png "White Icons")
+
+![Black Day Icons](dist/icons/solid-black/icon-preview.png "Black Icons")
+
+
+Night Icon Preview
+---
+
+![White Night Icons](dist/icons/white/icon-preview-nt.png "White Icons")
+
+![Black Night Icons](dist/icons/black/icon-preview-nt.png "Black Icons")
+
+![White Day Icons](dist/icons/solid-white/icon-preview-nt.png "White Icons")
 
-![Black Icons](dist/icons/black/icon-preview.png "Black Icons")
+![Black Day Icons](dist/icons/solid-black/icon-preview-nt.png "Black Icons")

css/demo.css

@@ -55,27 +55,27 @@ body {
   font-family: 'Ubuntu', sans-serif;
 }
 
-body.demo-white {
+body.demo-white, body.demo-solid-white {
   color: #fff;
 }
 
-body.demo-black {
+body.demo-black, body.demo-solid-black {
   color: #000;
 }
 
-body.demo-white *::-moz-selection {
+body.demo-white *::-moz-selection, body.demo-solid-white *::-moz-selection {
   background:  rgba(0, 0, 0, 0.5);
 }
 
-body.demo-white *::selection {
+body.demo-white *::selection, body.demo-soli-white *::selection {
   background: rgba(0, 0, 0, 0.5);
 }
 
-body.demo-black *::-moz-selection {
+body.demo-black *::-moz-selection, body.demo-solid-black *::-moz-selection {
   background: rgba(0, 0, 0, 0.05);
 }
 
-body.demo-black *::selection {
+body.demo-black *::selection, body.demo-solid-black *::selection {
   background: #FFF;
 }
 
@@ -104,17 +104,17 @@ select:active, select:focus {
   text-decoration: none;
 }
 
-body.demo-white .author-info a {
+body.demo-white .author-info a, body.demo-solid-white .author-info a {
   color: rgba(255, 255, 255, 0.5);
 }
-body.demo-black .author-info a {
+body.demo-black .author-info a, body.demo-solid-black .author-info a {
   color: rgba(0, 0, 0, 0.5);
 }
 
-body.demo-white .author-info a:hover {
+body.demo-white .author-info a:hover, body.demo-solid-white .author-info a:hover {
   color: #FFF;
 }
-body.demo-black .author-info a:hover {
+body.demo-black .author-info a:hover, body.demo-solid-black .author-info a:hover {
   color: #000;
 }
 
@@ -124,11 +124,11 @@ body.demo-black .author-info a:hover {
   margin-bottom: 40px;
 }
 
-.demo-white {
+.demo-white, .demo-solid-white {
   background: #262a33;
 }
 
-.demo-black {
+.demo-black, .demo-solid-black {
   background: #f3f7f9;
 }
 
@@ -137,11 +137,11 @@ body.demo-black .author-info a:hover {
   transition: background-color 0.25s linear;
 }
 
-.demo-white i:hover, .demo-white i.active {
+.demo-white i:hover, .demo-white i.active, .demo-solid-white i:hover, .demo-solid-white i.active {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.demo-black i:hover, .demo-black i.active {
+.demo-black i:hover, .demo-black i.active, .demo-solid-black i:hover, .demo-solid-black i.active {
   background-color: #FFF;
 }
 
@@ -182,11 +182,11 @@ body.demo-black .author-info a:hover {
   font-weight: 300;
 }
 
-body.demo-white .header div.options span {
+body.demo-white .header div.options span, body.demo-solid-white .header div.options span {
   margin-right: 10px;
   color: rgba(255, 255, 255, 0.25);
 }
-body.demo-black .header div.options span {
+body.demo-black .header div.options span, body.demo-solid-black .header div.options span {
   margin-right: 10px;
   color: rgba(0, 0, 0, 0.25);
 }
@@ -217,11 +217,11 @@ body.demo-black .header div.options span {
   border: 0;
   right: 0;
 }
-body.demo-black .github-corner svg {
+body.demo-black .github-corner svg, body.demo-solid-black .github-corner svg {
   fill: #262a33;
   color: #f3f7f9;
 }
-body.demo-white .github-corner svg {
+body.demo-white .github-corner svg, body.demo-solid-white .github-corner svg {
   fill: #f3f7f9;
   color: #262a33;
 }