Add Support for Dark Mode in Your Live App

Quip supports dark mode, and for an optimal experience, so should your live app!

Adding support for dark mode in your live app is easy. We added a number of CSS (Cascading Style Sheets) variables you can access within the live app environment: --quipBackground, --quipSecondaryBackground, --quipBackgroundInverse, --quipUserText(Primary/Secondary), -quipUiText(Primary/Secondary), and --quip(Red/Blue/Orange/Violet/Green/Yellow).

These CSS variables represent an RGB (red, green, blue) triplet and adapt to light and dark mode.

To use the CSS variables, simply add them to a CSS rgb function. For example: rgb(var(--quipBackground)).

Your users will thank you!