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.