Skip to content
Change the site theme
Figma

Dark Theme

Dark theme is a base theme for dark mode in any UI fully using Paste.


Guidelines

Guidelines page anchor

About Dark theme

About Dark theme page anchor

Dark theme is a base theme in Paste built in partnership with Flex(link takes you to an external page). Dark theme unlocks dark mode for our UIs, and dark mode is cool! Additionally, dark mode reduces eye strain and improves readability for many people. Giving our users the ability to use Twilio products in dark mode is key to building lovable products that support each of our users.

Paste uses a Theme object to create and change themes. With Dark theme, it’s simple to enable dark mode in your products if your UIs are built completely with Paste.

Dark theme vs. dark mode

Dark theme vs. dark mode page anchor

Light/dark mode is a user preference that can be set at the operating system, browser, or application level, and which we can honor in our UIs. In both light and dark mode, you get to choose what Paste theme is used for the UI. Paste’s Dark theme allows you, our consumers, to enable light/dark mode in your products with ease.

Dark theme lives up to our inclusive design benchmarks and is fully accessible, meeting the Web Content Accessibility Guidelines 2.1(link takes you to an external page) (WCAG) AA standard contrast ratios of conformance. You can learn more about the accessibility of our color palette in Color Foundations.

Do

Use Dark theme if your UI is built fully with Paste.

Don't

Don’t use Dark theme if there are any surface areas within your product that aren’t using Paste.

If you’re building a Twilio product, using Dark theme should be a one-line update to the Theme Provider. Simply change it from default to dark.

Installation

Installation page anchor
yarn add @twilio-paste/theme - or - yarn add @twilio-paste/core
import {Theme} from '@twilio-paste/core/theme';

const ThemedApp = () => (
  <Theme.Provider theme="dark">
    <App />
  </Theme.Provider>
);

If you’re customizing Paste for a product outside of Twilio or for a Twilio programmable app, use the Customization Provider to select Dark theme as the base theme.

yarn add @twilio-paste/customization - or - yarn add @twilio-paste/core
import {CustomizationProvider} from '@twilio-paste/core/customization';

const ThemedApp = () => (
  <CustomizationProvider baseTheme="dark">
    <App />
  </CustomizationProvider>
);

We have a Dark theme(link takes you to an external page) library in Figma that you can turn on in your projects, which will give you access to all layer styles, text styles, and effects in the Dark theme.

In Figma, swap your screens from the "Paste Default Theme" to the "Paste Dark Theme" by using Figma's library swap feature. You can also check out Figma's documentation of library swapping(link takes you to an external page).

We've tested it out a bit on our side, and it works great as long as every part of your UI (even the white background fill on your frames) is referencing tokens from the "Paste Default Theme" library in Figma. The library swap won't work for raw hex codes, because Figma won't know what to swap them to.

Paste’s dark theme is open-sourced and available for use in Figma Community. Duplicate the file(link takes you to an external page) to view the theme in detail, or duplicate our Paste Components file(link takes you to an external page) to play around with components and the Dark theme together.

Dark theme is still new and while we still have some work to do to see this widely across Twilio, we thought you might have some questions. You can leave thoughts, questions, and feedback in our GitHub discussion(link takes you to an external page).