Plasmic tutorial on how to create a dark mode component?

Plasmic Studio Questions
1

Is there a Plasmic tutorial on how to create a dark mode component?

2

There isn’t a tutorial on this exactly, but for now the very concise instructions:

• Create some color tokens, like Background color (white), Text color (black), etc. Use these systematically throughout your design.
• Create a global variant group Mode and a global variant in it Dark mode
• Edit the color tokens to look different in Dark mode, such as Background color now being black and Text color being white.
This should be all you need for majority of dark mode. For the remainder, you can directly edit components according to the global variant.

1 Like
3

Thank you, that is pretty straightforward.

4

@yang How would I create a toggle button for dark mode?

5

Hi @mean_rattlesnake , for a basic implementation, you can do something like the following:

const [dark, setDark] = useState(false);
<PlasmicRootProvider ... globalVariants={[{name: "Theme", value: dark ? 'dark' : undefined}]}>

For the toggle button, for now the way to add it is a code component wrapper, you can use this together with (say) a context that provides the setDark setter: https://docs.plasmic.app/learn/custom-behaviors/ (Side note, we’re working on a way to make this easier and not needing code components.)

const [dark, setDark] = useState(false);
<SetDarkContext.Provider value={setDark}>
  <PlasmicRootProvider ... globalVariants={[{name: "Theme", value: dark ? 'dark' : undefined}]}>

And eventually if you want to use something more sophisticated than state, you can swap it out for https://github.com/pacocoursey/next-themes

2 Likes