Skip to content
Change the site theme
Figma
(information)

Changing the Theme

When using Paste, swapping to a different theme is simple and quick.


Update the theme provider

Update the theme provider page anchor

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/main-1.2.0/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.

Some of my styles look broken!

Some of my styles look broken! page anchor

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.

What if I'm using a custom theme?

What if I'm using a custom theme? page anchor

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>;

Black lives matter.