Skip to content
Paste
UX Platform
Change the site theme
information:

Changing the Theme

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


Update the theme provider#

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.

Load the font#

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.

FAQs#

Some of my styles look broken!#

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?#

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.