Theme page updates. Issue bgrins#105

spectrum.css

@@ -211,7 +211,12 @@ License: MIT
     opacity: .8;
 }
 
-/* Basic themeable display options (colors, fonts, global widths) */
+/*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+
 .sp-container {
     border-radius: 0;
     background-color: #ECECEC;

themes/index.html

@@ -58,6 +58,31 @@ <h4>sp-dark</h4>
 
     <div id="theme-instructions">
         <h3>Instructions for building themes</h3>
+        <p>
+            You can change most any property on spectrum using CSS.  Anything from  borders and colors, to the size of the draggable areas, to the layout of the colorpicker can be changed with plain CSS.
+        </p>
+        <h4>Playing friendly with other themes</h4>
+        <p>
+            Please prefix all of your rules with <code>.theme-name</code>.  The exception is for changes to <code>.sp-container</code> and <code>.sp-replacer</code>, which will have your theme name applied.
+        </p>
+        <p>
+            See a basic scaffold for a super simple theme.  See <a href='sp-dark.css'>sp-dark.css</a> for a slightly more advanced example.
+        </p>
+        <pre>
+.theme-name.sp-container {
+
+}
+.theme-name.sp-replacer {
+
+}
+.theme-name .sp-preview {
+
+}
+        </pre>
+        <h3>Submitting a theme</h3>
+        <p>
+            If you have made some customizations that you would like to share, please open a <a href="http://bgrins.github.com/spectrum/pulls">pull request</a> with the theme file inside of this themes/ directory in the project.  Or <a href="http://bgrins.github.com/spectrum/issues">open an issue</a> with a link to the theme.
+        </p>
     </div>
 </div>
 

themes/sp-dark.css

@@ -20,5 +20,8 @@
     color: silver;
 }
 .sp-dark .sp-preview {
-    border: solid 1px #eee;
+    border: solid 1px #999;
+}
+.sp-dark .sp-cancel {
+    color: #f99f9f !important;
 }