Dark mode for Billing Monkey

[PoojMenon]

Hello,

We're currently working on a project that involves a full revamp to the Monkey experience. This "new" Billing Monkey has been designed entirely in Paste. Here is a link to the Codesandbox prototype.

We would love to incorporate dark theme here and be early adopters.

A couple of questions:

1. Is there any guidance for us to be able to go ahead with this? Is there anything we should be aware of that could be a blocker to adopting dark mode?
2. Is there guidance on how to allow the user to switch between Light and Dark mode - something similar to the toggle on the documentation site?

cc @andoyle

[richbachman]

Hi @PoojMenon

Thanks for posting this and taking interest in dark mode, and super happy to hear that billing is entirely in Paste. Thats really exciting, and the prototype looks great.

To answer your first question, we have an RFC/FAQ here that should answer things. If there's something we're missing, feel free to reach back out.

For switching between light and dark, your team will need some way of toggling the Paste theme. So instead of theme="default" at the ThemeProvider level, that will need to switch to theme="dark" in order to enabled dark mode. We use context in order to store the theme value, and the toggle changes the value of that context. You can see code for our setup here.

Let us know if you have any other questions.

[PoojMenon]

Just did a quick switch of the theme here to see what dark mode would look like.

1. Any feedback on the colours we've used - especially for the masthead and navbar?
2. The icon in the date component is still black. Anything we can do to correct this?
   
3. We have a good few empty states on several pages that use illustrations. I see from the FAQ that illustrations haven't been catered for yet. Any alternate solutions in the interim?
   

[richbachman]

Hi @PoojMenon

Is there a component similar to the below on the doc site that we could reuse for Monkey?

There currently isn't a component. That one is using radio inputs styled to look like a toggle button group. Feel free to model your theme toggle switch after that one.

Any feedback on the colours we've used - especially for the masthead and navbar?

I've shared this request for feedback with the team. We'll be back in touch.

The icon in the date component is still black. Anything we can do to correct this?

Because that icon is controlled by the browser, unfortunately we don't have any control over the color.

We have a good few empty states on several pages that use illustrations. I see from the FAQ that illustrations haven't been catered for yet. Any alternate solutions in the interim?

Unfortunately not at this time. We'll need to figure out a way for illustrations to use token values so they colors will change depending on the theme. Once we have a plan, we'll let you know.

[PoojMenon]

Thanks for the response @richbachman. Super helpful.

Let me know if there's any feedback on the colour tokens we've used.

[nkrantz]

It looks great (from DSYS-PD), they just had a minor tweak: for the border colors on the masthead, we recommend copying the design tokens on paste.twilio.design. colorBorderInverseDarker on the masthead borderLeftColor should be colorBorderInverseWeaker, and the masthead container borderBottomColor should be the same. Also for that masthead borderLeftColor line, we recommend extending it down to border the entire left nav. Awesome prototype!

[PoojMenon]

Thanks for that feedback Nora - we've updated accordingly.