diff --git a/spectrum.css b/spectrum.css index 6e1f4d03..a12e0a42 100644 --- a/spectrum.css +++ b/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; diff --git a/themes/index.html b/themes/index.html index 4e402a85..ff202ad8 100644 --- a/themes/index.html +++ b/themes/index.html @@ -58,6 +58,31 @@

sp-dark

Instructions for building themes

+

+ 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. +

+

Playing friendly with other themes

+

+ Please prefix all of your rules with .theme-name. The exception is for changes to .sp-container and .sp-replacer, which will have your theme name applied. +

+

+ See a basic scaffold for a super simple theme. See sp-dark.css for a slightly more advanced example. +

+
+.theme-name.sp-container {
+
+}
+.theme-name.sp-replacer {
+
+}
+.theme-name .sp-preview {
+
+}
+        
+

Submitting a theme

+

+ If you have made some customizations that you would like to share, please open a pull request with the theme file inside of this themes/ directory in the project. Or open an issue with a link to the theme. +

diff --git a/themes/sp-dark.css b/themes/sp-dark.css index d4188b19..bdd68c24 100644 --- a/themes/sp-dark.css +++ b/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; } \ No newline at end of file