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

Check out the theme-swapping FAQs on how to use dark theme in Figma.

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.