Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Light/Dark Mode

MyCondy

Last edited 87 days ago by MyCondy

Modern toggle for switching theme colours by selected mode.

How to design it in Power Apps

Preview

⁠

⁠

⁠

What does it consist of?

3x Horizontal Container

2x Label

2x Image

Procedure

Step 1 - create boolean variable on Screen

When you create a new screen(or use already created) you should create a variable on "OnVisible" property:

Set(_var_light_mode,true)

Step 2 - create light mode container

Add a new Horizontal Container PCF, call it "light_mode_frame" with this "Border radius" property:

Step 3 - create modes for parent container

Add a new Horizontal Container PCF, call it "light_mode" with this "Border radius" property:

And Label object under "light_mode", call it "light_mode_title" with Text property:

Light

And Image object under "light_mode", call it "light_mode_icon" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M35.4167 24.9999C35.4167 30.7528 30.7529 35.4166 25 35.4166C19.247 35.4166 14.5833 30.7528 14.5833 24.9999C14.5833 19.247 19.247 14.5833 25 14.5833C30.7529 14.5833 35.4167 19.247 35.4167 24.9999Z' fill='#1C274C'/> <path fill-rule='evenodd' clip-rule='evenodd' d='M25 2.60425C25.8629 2.60425 26.5625 3.30381 26.5625 4.16675V8.33341C26.5625 9.19635 25.8629 9.89591 25 9.89591C24.1371 9.89591 23.4375 9.19635 23.4375 8.33341V4.16675C23.4375 3.30381 24.1371 2.60425 25 2.60425ZM7.64303 7.74194C8.22532 7.10506 9.21365 7.06081 9.85053 7.6431L14.4797 11.8756C15.1166 12.4579 15.1608 13.4462 14.5785 14.0831C13.9963 14.7199 13.0079 14.7642 12.371 14.1819L7.74186 9.94944C7.10498 9.36714 7.06073 8.37881 7.64303 7.74194ZM42.3571 7.74194C42.9394 8.37881 42.895 9.36714 42.2581 9.94944L37.629 14.1819C36.9921 14.7642 36.0038 14.7199 35.4215 14.0831C34.8392 13.4462 34.8833 12.4579 35.5202 11.8756L40.1496 7.6431C40.7865 7.06081 41.7746 7.10506 42.3571 7.74194ZM2.60417 25.0001C2.60417 24.1372 3.30373 23.4376 4.16667 23.4376H8.33334C9.19628 23.4376 9.89584 24.1372 9.89584 25.0001C9.89584 25.863 9.19628 26.5626 8.33334 26.5626H4.16667C3.30373 26.5626 2.60417 25.863 2.60417 25.0001ZM40.1042 25.0001C40.1042 24.1372 40.8038 23.4376 41.6667 23.4376H45.8333C46.6963 23.4376 47.3958 24.1372 47.3958 25.0001C47.3958 25.863 46.6963 26.5626 45.8333 26.5626H41.6667C40.8038 26.5626 40.1042 25.863 40.1042 25.0001ZM35.4698 35.4692C36.08 34.859 37.0694 34.859 37.6796 35.4692L42.3088 40.099C42.919 40.7092 42.9188 41.6986 42.3085 42.3088C41.6983 42.919 40.709 42.9188 40.099 42.3086L35.4698 37.6788C34.8596 37.0686 34.8596 36.0795 35.4698 35.4692ZM14.5306 35.4695C15.1408 36.0797 15.1408 37.069 14.5306 37.6792L9.90092 42.3088C9.29073 42.919 8.30142 42.919 7.69121 42.3088C7.08103 41.6986 7.08103 40.7092 7.69121 40.0992L12.3209 35.4695C12.931 34.8592 13.9204 34.8592 14.5306 35.4695ZM25 40.1042C25.8629 40.1042 26.5625 40.8038 26.5625 41.6667V45.8334C26.5625 46.6963 25.8629 47.3959 25 47.3959C24.1371 47.3959 23.4375 46.6963 23.4375 45.8334V41.6667C23.4375 40.8038 24.1371 40.1042 25 40.1042Z' fill='#1C274C'/> </svg>")

Add a new Horizontal Container PCF, call it "dark_light_mode" with this "Border radius" property:

And Image object under "dark_light_mode", call it "dark_light_mode_icon" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M44.8326 25.1744C44.739 36.0477 35.8954 44.8334 25 44.8334C14.0463 44.8334 5.16666 35.9536 5.16666 25.0001C5.16666 14.1046 13.9523 5.26111 24.8257 5.1675C24.8226 5.18243 24.8183 5.19687 24.8128 5.21003C24.7993 5.24224 24.7862 5.25104 24.7812 5.25411C20.5694 7.79909 17.75 12.424 17.75 17.7084C17.75 25.7397 24.2604 32.2501 32.2917 32.2501C37.576 32.2501 42.2009 29.4307 44.7459 25.2189C44.7489 25.2138 44.7577 25.2007 44.79 25.1873C44.8032 25.1817 44.8176 25.1774 44.8326 25.1744ZM24.823 5.05894C24.823 5.05892 24.8233 5.05952 24.8237 5.06079L24.823 5.05894ZM44.9393 25.1763C44.9405 25.1768 44.9411 25.1771 44.9411 25.1771L44.9393 25.1763Z' stroke='#1C274C' stroke-width='2'/> </svg>")

and "OnSelect" property:

Set(_var_light_mode,false)

And Label object under "dark_light_mode", call it "dark_light_mode_title" with Text property:

Dark

and "OnSelect" property:

Set(_var_light_mode,false)

Step 4 - create dark mode container

Add a new Horizontal Container PCF, call it "dark_mode_frame" with this "Border radius" property:

Step 5 - create modes for parent container

Add a new Horizontal Container PCF, call it "light_dark_mode" with this "Border radius" property:

And Label object under "light_dark_mode", call it "light_mode_title" with Text property:

Light

and "OnSelect" property:

Set(_var_light_mode,true)

And Image object under "light_dark_mode", call it "light_mode_icon" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M35.4167 24.9999C35.4167 30.7528 30.7529 35.4166 25 35.4166C19.247 35.4166 14.5833 30.7528 14.5833 24.9999C14.5833 19.247 19.247 14.5833 25 14.5833C30.7529 14.5833 35.4167 19.247 35.4167 24.9999Z' fill='#5C6169'/> <path fill-rule='evenodd' clip-rule='evenodd' d='M25 2.60425C25.8629 2.60425 26.5625 3.30381 26.5625 4.16675V8.33341C26.5625 9.19635 25.8629 9.89591 25 9.89591C24.1371 9.89591 23.4375 9.19635 23.4375 8.33341V4.16675C23.4375 3.30381 24.1371 2.60425 25 2.60425ZM7.64303 7.74194C8.22532 7.10506 9.21365 7.06081 9.85053 7.6431L14.4797 11.8756C15.1166 12.4579 15.1608 13.4462 14.5785 14.0831C13.9963 14.7199 13.0079 14.7642 12.371 14.1819L7.74186 9.94944C7.10498 9.36714 7.06073 8.37881 7.64303 7.74194ZM42.3571 7.74194C42.9394 8.37881 42.895 9.36714 42.2581 9.94944L37.629 14.1819C36.9921 14.7642 36.0038 14.7199 35.4215 14.0831C34.8392 13.4462 34.8833 12.4579 35.5202 11.8756L40.1496 7.6431C40.7865 7.06081 41.7746 7.10506 42.3571 7.74194ZM2.60417 25.0001C2.60417 24.1372 3.30373 23.4376 4.16667 23.4376H8.33334C9.19628 23.4376 9.89584 24.1372 9.89584 25.0001C9.89584 25.863 9.19628 26.5626 8.33334 26.5626H4.16667C3.30373 26.5626 2.60417 25.863 2.60417 25.0001ZM40.1042 25.0001C40.1042 24.1372 40.8038 23.4376 41.6667 23.4376H45.8333C46.6963 23.4376 47.3958 24.1372 47.3958 25.0001C47.3958 25.863 46.6963 26.5626 45.8333 26.5626H41.6667C40.8038 26.5626 40.1042 25.863 40.1042 25.0001ZM35.4698 35.4692C36.08 34.859 37.0694 34.859 37.6796 35.4692L42.3088 40.099C42.919 40.7092 42.9188 41.6986 42.3085 42.3088C41.6983 42.919 40.709 42.9188 40.099 42.3086L35.4698 37.6788C34.8596 37.0686 34.8596 36.0795 35.4698 35.4692ZM14.5306 35.4695C15.1408 36.0797 15.1408 37.069 14.5306 37.6792L9.90092 42.3088C9.29073 42.919 8.30142 42.919 7.69121 42.3088C7.08103 41.6986 7.08103 40.7092 7.69121 40.0992L12.3209 35.4695C12.931 34.8592 13.9204 34.8592 14.5306 35.4695ZM25 40.1042C25.8629 40.1042 26.5625 40.8038 26.5625 41.6667V45.8334C26.5625 46.6963 25.8629 47.3959 25 47.3959C24.1371 47.3959 23.4375 46.6963 23.4375 45.8334V41.6667C23.4375 40.8038 24.1371 40.1042 25 40.1042Z' fill='#5C6169'/> </svg>")

and "OnSelect" property:

Set(_var_light_mode,true)

Add a new Horizontal Container PCF, call it "dark_mode" with this "Border radius" property:

And Label object under "dark_mode", call it "dark_title" with Text property:

Dark

And Image object under "dark_mode", call it "dark_icon" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M25 45.8334C36.5058 45.8334 45.8333 36.5059 45.8333 25.0001C45.8333 24.0361 44.3885 23.8767 43.89 24.7017C41.5185 28.6263 37.2114 31.2501 32.2917 31.2501C24.8127 31.2501 18.75 25.1874 18.75 17.7084C18.75 12.7885 21.3737 8.48144 25.2983 6.11C26.1233 5.61148 25.9639 4.16675 25 4.16675C13.4941 4.16675 4.16666 13.4941 4.16666 25.0001C4.16666 36.5059 13.4941 45.8334 25 45.8334Z' fill='white'/> </svg>")

Step 6 - add dynamic colour for screen background

Go to "Fill" property in your screen(s) and put this value:

If(IsBlank(_var_light_mode) || _var_light_mode,RGBA(244,244,244,1), RGBA(17, 19, 21, 1))

This is an output:

Light

⁠

⁠

Dark

⁠

⁠

How to design it in Figma

Preview

⁠

What does it consist of?

5x Frame

2x Text

3x Vector

Procedure

Step 1 - create a horizontal frame with auto layout

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_light_mode_frame" with these properties:

⁠

⁠

Step 2 - create light and dark horizontal frame with auto layout

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_light_mode" with these properties:

⁠

⁠

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_dark_light_mode" with these properties:

⁠

⁠

Step 3 - insert icons and texts under parent frames

Import a new SVG file under a "horcont_light_mode" frame, call it "svg_light_mode_icon" with this XML code:

</svg>

Add a new Text (T command) object under a "horcont_light_mode" frame, call it "lbl_light_mode_title" with these properties:

⁠

⁠

Import a new SVG file under a "horcont_dark_light_mode" frame, call it "svg_dark_light_mode_icon" with this XML code:

</svg>

Add a new Text (T command) object under a "horcont_dark_light_mode" frame, call it "lbl_dark_light_mode_title" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

horcont_light_mode_frame, horcont_light_mode, horcont_dark_light_mode = Horizontal Container

svg_light_mode_icon , svg_dark_light_mode_icon = Image

lbl_light_mode_title, lbl_dark_light_mode_title = Label

YAML Output

LightMode

⁠

Dark Mode

⁠

Used Colours

Parent Light Container Background - #F4F4F4

Light Frame Background - #FFFFFF

Light Font Colour - #000000

Parent Dark Container Background - #111315

Dark Frame Background - #272B2F

Dark Font Colour - #FFFFFF

⁠

← Language Bar⁠

⁠

Loading Popup →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.