Extra Credit: Dark Mode (Toggle)

Dark Mode is often times the most requested feature in any product, despite being a totally "cosmetic" addition. It offers both offers no functionality, and am improved user experience beyond most other fixes. While the phrase dark mode has become a verbal shorthand to refer to a specific color palette and UI paradigm, it holds many other connotations. In this exercise you'll make a simple prototype of a toggle switch using Protopie, then experiment with your interpretation of what "Dark Mode" can mean.

Resources

Protopie
Protopie Player (iOS)
Protopie Player (Android)

Files

• Sample Figma file
• Protopie Sample Prototype (will update later)

Instructions

1. Sign up for Protopie. Install Protopie on your computer and log in.
2. Install the Protopie Plugin on your mobile device (iOS)
   (Android).
3. Using this sample Figma file as a base, import the prompt frame into Protopie.
4. Add a tap Trigger to the toggle object, to make the toggle switch turn on and off. To do this, you'll move the circle along the X axis based on a condition. (for a step-by-step explanation of how to do this, scroll to the bottom of this webpage, and reference the file from today's demo.
5. After adding your toggle, consider what a 'light' and 'dark' mode indicates beyond how we traditionally think about it. Does a light mode feel airy and breezy, where a dark mode feels sinister? In dark mode do the language prompts in your UI change to sound scary (are they read by a voice?)? Does light and dark mode control a representation of a light, or the position of the sun in the sky (in an illustration)?
6. Experiment with what dark mode can mean, and share a link to your prototype in the class Google doc.

References

• on and off .org
• iOS Dark Mode
• Mac OS Dark Mode
• Android Dark Theme

How to Create a Toggle

1. Select the toggle object and add Trigger to it by clicking the button in the righthand side of the UI

2. Choose tap from the menu. In the right most menu, make sure the toggle object is selected as it will be your tap target.

3. Add a Response by clicking the + sign under the tap Trigger, and select move.

4. Select the circle under the move response, and set its x value to 102. Now if you preview your prototype, you will see the toggle switch move!

5. However, you also want to set the Toggle to return to its original position. To do this, we'll set a condition as a Reponse to the tap. Underneath the same tap Trigger add another Response, this time selecting condition.

6. For your condition, make sure the circle is selected, and make the condition true if the value equals 11.

7. Drag your move action underneath the condition in the righthand panel. Now if the condition you set is true, the circle will move into the correct position (it will look the same!).

8. Now we'll want to make the toggle go back to its original position again. Copy and paste the entire tap trigger, and adjust the Response.

9. First, set your condition, with the circle selected, to true if the value equals 102.

10. Then, adjust the move Response to set the circle x value to 11. If everything was done correctly you should have a functioning toggle switch!