Themes

This page is in development.

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.