Request for comment: Dark Theme

[SiTaggart]

Request for comment and FAQs

We’re excited to release Dark theme in Paste! We’ve done this work in partnership with Flex. While we still have some work to do to see this widely across Twilio, we thought you might have some questions and hope this FAQ helps! Have more questions, post 'em below.

Why did we make a Dark theme?

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

And with Paste’s Dark theme, it’s simple to enable dark mode in your products if your UIs are built completely with Paste.

But wait, what’s the difference between “dark mode” and the “Dark theme” in Paste?

We’re so glad you asked! 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.

When can I start using Dark theme?

You can start using the Dark theme today, as long as your UIs are built fully with Paste and the Default theme. You should not use the Dark theme if there are any surface areas within your product that aren’t using Paste.

As an example, if you have built a form but are using a multi-select dropdown from another library, when you switch into dark mode, that one component will remain light and look very much out of place.

How can I start using Dark theme?

Using the Dark theme should be a one-line update to the <Theme.Provider>. Simply change it from “default” to “dark”.

How can I start using Dark theme in Figma?

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.

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

Where can I see the Dark theme in action?

Currently, you can see Dark theme in the Paste documentation site, Flex UI 2.0, and the new Billing interface, Billio.

When do we get to see Dark theme in Twilio Console?

Once all Twilio Console UIs are migrated to the new Console repo. Only then will we be able to unlock dark mode in Console via Paste’s Dark theme. Get migrating, Twilions!

Does it pass our accessibility standards?

Dark theme now lives up to our inclusive design benchmarks and is fully accessible.

[thomaschaaf]

How am I able to disable dark mode? I can not find anything in the documentation.

[loreina]

Hi @thomaschaaf, checking in to see if Katie's response above answered your question or if you'd be able to share more about your use case so we can help.

[thomaschaaf]

@loreina I tried creating a demo. This for some reason still causes darkmode to be respected but we would like to not handle dark mode right now.

https://codesandbox.io/s/peaceful-rumple-xkbkc?file=/src/App.js

[SiTaggart]

Hi @thomaschaaf, just to clarify, which area of the screenshots are you referring to as not disabling dark mode?

Regardless of that, switching between the default and dark theme in Paste in actually a manual step right now. You have to specifically set theme="default" or theme="dark" on the <Theme.Provider /> in your React app. It is not automatic.

[thomaschaaf]

The background is black and the font white in dark mode so the whole thing seems to somehow use the dark mode automatically.

[TheSisb]

Hi @thomaschaaf,

I believe that particular Chrome setting is a custom automatic theme changer that works on any website by injecting their own styles. There's no way to prevent custom CSS through browser extensions or that feature in Chrome's dev tools. You can tell it isn't activating our dark theme in two ways:

1- You may notice the colors look different if you set our theme to dark in the codesandbox vs this dark setting
2- The inspected CSS still shows the background color as rgb(255, 255, 255) (white) on the body element even though it is rendering as black.

Hope this helps!