DEV Community

Maik Michel
Maik Michel

Posted on • Originally published at micodify.de on

Use multiple variations of your primary color

Sometimes it happens that you want to apply a color to certain elements in your application. Now you could just take any color. But you can't, because the color has to match your application. It could also be that your application runs with different themes. So you can't just take any blue or any red. The whole thing has to be variable.

Fortunately CSS offers help here. There is a CSS function called color-mix. We can use this to mix one color to another color. The whole thing is best done with white or black, to stay with the main color of the theme. And so we manage to define different variations of our primary color.

After you have declared your color values, you can easily use them in different classes. For example, to color a row in a Classic Report.

You can take a look at the demo application.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay