Back

What's the best way to add my own custom theme using Pink Design?

  • 0
  • Web
claudionunezjr
10 Nov, 2023, 23:28

I started playing around with overriding some theming variables, like --color-pink-text, for example, but it didn't seem that doing that alone was updating any component or utility class colors.

Also, I started inspecting the pink stylesheet by searching for instances of .theme-dark to see how that was done, but there are way too many instances (over a hundred, I believe.) So, I stopped going down that path.

I really want to use Pink Design for more than hobby projects, but I just want to be able to customize/override colors, like borders, corners, spacing, typography, etc. to fit the branding style I'm going for. But, mostly colors, at the very least.

I searched for articles and videos to no avail, and here I am. I'm pretty much new to Discord, but this seems like a good place to get some direction on this, or at the very least find out that what I want to do isn't possible with an appropriate amount of effort.

Of course, any advise on this would be extremely appreciated. Thanks!

TL;DR
User wants to add a custom theme using Pink Design. They have tried overriding some theming variables but it didn't update any component or utility class colors. They also explored inspecting the Pink stylesheet but found too many instances to make changes. They are looking for advice on how to customize/override colors in Pink Design.
Drake
10 Nov, 2023, 23:41

There will be some big changes to pink since it's going to be updated for our new brand soon....maybe you might want to hold off?

Drake
10 Nov, 2023, 23:41

Otherwise, overriding some of the variables would be the way to go: https://pink.appwrite.io/foundations/colors

claudionunezjr
11 Nov, 2023, 04:09

Thanks Steven! Actually, this is making sense, now. I can do both, update the variables, and wait patiently for these enhancements.

This is definitely something to look forward to.

Reply

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