Using color variables to theme your apps

Hi everyone!

Here is a quick tip:

You can use color variables in Tulip to easily theme your apps. This is helpful for keeping the look and feel of your apps consistent and/or matching your company’s branding. To do this, create new variables in your app and label them Primary and Secondary

Then make sure you set the default values to match the colors of your theme.

Now all that is left to do is to assign these variables to common items in your app, e.g. buttons, text, headers, footers, etc…

Now that this is done you can easily adjust the colors by simply changing the variable defaults:

Please pick better colors than me, lol…

Bonus Tip
You can define custom colors for your company by going to your Profile>Settings and choosing Custom Colors:

Let me know if you find this useful or have other cool ways to use color variables!


Nice way to start to build a « first Design System »!