There are different ways you can use Swatch to theme your React components. If you are using an other front-end framework than React, it is likely you can still find in this guide a pattern useful for you.
We invite you to adapt the below pattern to your own / your company coding style, i.e. :
- Whether you use separate CSS file for each component or CSS modules
- Whether you use CSS in JS (we don't judge you)
- You prefer style properties (you write your CSS Inline)
An example : making a colored button
First, write the component (S)CSS. We recommend you do it in a separate file.
Now, write the React Component, in its own file as well.
Then, to apply a color, simply provide a setter in the
className prop. Voila.
Now, try it yourself
You can find below a playground illustrating this pattern.
Please note that the styles are included in the Playground only for you to practice. We repeat, in real world, we would include the styles in a separate file (as in the previous example), and we recommend you do the same.
The color on the inside text is automatically inferred from the background.
On hover, this button takes a darker shade of the color
On active, this button takes a lighter shade of the color
This is a very simple example of the power of Swatch. As you can see, in only 10 lines of CSS, we manage complex coloring, compatible with all colors.
Once you get more familiar with the Setter/Getter pattern, you will only be limited by your imagination.
Try this !
In the above playground, make the button background transparent, and get both the color and a 1px border-color from the