Skip to content
Change the site theme
Figma
(information)

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.

Do

Use Dark theme as an option alongside Default theme.

Don't

Don’t use Dark theme as the only theme within your product.

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.

Information icon
Support for Figma theme switching coming soon

The Paste team is exploring how to offer guidance on theme switching in Figma. We'll update this section with more documentation soon. Thanks for being patient!

We are planning to provide documentation around the best way to use the Dark theme library in your work very soon, but in the meantime, feel free to test out Figma’s library swap feature(link takes you to an external page), and swap your screens from the “Paste Default Theme” to the “Paste Dark Theme”.

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

Black lives matter.