Changing the Theme
When using Paste, swapping to a different theme is simple and quick.
The <Theme.Provider> is a wrapper component that provides a theme object to any descendant. It is usually placed at or near the root of your app.
import {Theme} from '@twilio-paste/theme';
<Theme.Provider theme="default">
<App />
</Theme.Provider>;
To change the theme, simply change the value of the theme prop on the Theme.Provider. If you are using Paste components correctly and only using the tokens to style your app, the <Theme.Provider> handles (almost) everything for you.
For the default theme: the best way to load the fonts is to include the following snippet in the <head /> of your app.
<link rel="preconnect" href="https://assets.twilio.com" crossorigin />
<link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/1.5.2/fonts.css" />
Alternatively, Paste will automatically load the default theme's font via JavaScript. Note: this will result in slower download times than including the fonts in the <head />.
For other themes, see our manual installation page for more information.
There are a few places that can cause styling bugs:
- Check if there's more than one
<Theme.Provider>and update of all of them, or the remove extra ones if they are unnecessary. - Make sure you aren't overriding any Paste component styles with CSS classes or selectors. The
<Theme.Provider>cannot access these styles, so they do not get updated. - Also check that you are using Paste tokens when styling custom components. See our guidelines for theming custom components for more information.
If you are using a custom theme, you can update the base theme similarly to how you update a normal theme. Find the <Customization.Provider> that wraps your app and change the baseTheme prop. See the customization documentation for more information.
import {Customization} from '@twilio-paste/core/customization';
<Customization.Provider baseTheme="default">
<App />
</Customization.Provider>;
The main Paste Components Figma library includes variables in our most-used themes as modes. Check out Figma's documentation on switching modes to learn how to swap from the default "Twilio" theme mode to other modes.
As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless.
Switching modes won't work for detached components that use raw hex codes, for example, because Figma won't know what to swap them to and you are no longer using Paste.