Skip to contentSkip to navigationSkip to topbar
Figma
Star

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

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(link takes you to an external page).