Light to Dark 🌓

A lightweight extension to simplify your work in a single tap. We also help you to organise your shared styles in better order.

Download Extension Fork in github

How does it help you?

Create a dark mode in a single tap

You will get the organised shared styles for both Light and Dark mode

Easy to use and lightweight

We also help you to set up the project by Boilerplate option

Getting Started

To build the dark mode without any error, you need to follow the following guidelines.

Step 1:

Create a new document

Step 2:

Create a page named "Light" (case sensitive).

All the screens from the page Light will be generated to dark mode.

Step 3:

Create the shared style for both light and dark (note: shared style naming must be prefixed with dark/{your style} or light/{your style}). Check the example for shared style naming

💡

The shared style should need to follow below Light:

light/primary/border

Dark:

dark/primary/border

If you are creating a style for the light you also need to define dark mode otherwise it will throw an error:

light/{ YOUR - STYLE - GOES - HERE }
 dark/{ YOUR - STYLE - GOES - HERE }

Step 4:

Apply every layer with the shared style.

💡

On the page Light, you need to apply the style for the light/{YOUR STYLE} otherwise it will throw an error.

Step 5:

Run Plugins > Light to Dark 🌓 > Convert to Dark mode or

simply press ctrl + shift + c

Using Boilerplate

We made your work simpler by using boilerplate

We will create a page with the name Light

We will also create a few shared styles for both light and dark modes. You can customise any time

FAQ?

Error: You have applied Dark shared style in the light version
This alert will be thrown, if you are using any of the dark styles inside the page Light

Error: No Dark style found for this shared style
This alert will be thrown, when you have not created the dark style for the light
For example: if you have the layer style light/primary/background and not in the dark style