Dark Theme

Dark theme is a base theme in Paste built in partnership with Flex. 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.

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 (WCAG) AA standard contrast ratios of conformance. You can learn more about the accessibility of our color palette in Color Foundations.

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.

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

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 to view the theme in detail, or duplicate our Paste Components file 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.