How to modify the brand colors?

I want to change some of the colors (especially the primary ones) and I was wondering what is the cleanest and / or easiest way to do so, as I myself am a CSS and Frontend noob ;D ? I guess just changing the values in the dist folder of the node module is not how it should be done, do I need to fork the project and make my personal node module, or is there an easier way?

TL;DR

To modify the brand colors in this project, you can follow these steps: 1. Open the colors.scss file in the GitHub repository. 2. All the colors variables are defined in this file. 3. The colors are defined using HSL values. 4. To modify the colors, you need to change the HSL values for the desired variables. 5. The project works with a main Hue that affects all colors of the same type. 6. If you want to learn more about how the colors are used in the project, you can read an article provided in the response. 7. You don't need to directly modify the values in

Hi there, thank you for your question, let me fetch the possibilities for you regarding this, and be right back!

Hi Lara,

All the colors variable are defined in colors.scss file. (https://github.com/appwrite/pink/blob/main/packages/ui/src/1-css-variables/_colors.scss)

The color are with HSL values.

The way we work with color we define for every group of colors the main Hue which affect all colors from the same type.

Further reading how we exactly working with colors, you can read my article: https://medium.com/p/ca5de26f2df7

Hope it will be more clear now🙂

Thank you @Elad Shechter

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more

Recommended threads

Need support?

Join our Discord

Get premium support