A powerful, lightweight (S)CSS coloring and theming library based on CSS vars and the Setter/Getter pattern.
Theme Components and Apps
Swatch provides you with more than 20 CSS color swatches to theme your components and apps. Each Swatch is composed by a main color, a lighter shade, a darker shade, and a contrast color for text. This mean more than 80 different colors at your disposal.
A modern pattern using CSS variables
By applying the Setter/Getter pattern to CSS, Swatch allows you to theme in a minute any of your html blocks or components. Just write one CSS class per component. Say goodbye the prehistoric way of writing one CSS Class x every Color x Component.
CSS Only / Framework Agnostic
Swatch does not depend on any other library. While it is written in SCSS, its compiled CSS can be included as-is in any HTML or templating engine. Think bare-bones HTML, React, Vue, Angular, Django, Laravel, web components.
All your coloring needs in a 2.5KB gzip
2.5 KB of gzip code (15KB uncompressed) : this is the only code you will ever need to take care of theming and coloring in your apps.
Customizable colors, extendable themes
Your own custom color palette ? A custom solarized theme ? A custom theme for your white-label client ? All can be simply done by forking or making your own version of your library.
Relax and don't worry about theming anymore.
Maintainable, easy-to-read, code, a stable and efficient API. Nothing else to install and a library you can use in ANY of your web projects. Theming and coloring are finally made easy and efficient.