How do i enable dark mode with toggle switch

Need help
1

Hello my names is officer bacon and i was wondering how can i enable dark mode when the toggle switch is checked?

2 Likes
2

Using conditional formatting. Steps provided below :slight_smile:

  1. Create the Toggle Switch (We recommend changing the name of the toggle for ease)
  2. Click on the first element you want to have dark mode on
  3. Navigate to Conditional Formatting > when “darkmode element” is yes > Change background color to (probably a darker shade)
  4. Repeat the above process for all elements you are wanting to change when that toggle is changed.

If you need anymore help, feel free to PM us or reply.

3

i need help i don´t understand.

4

Which part of the process are you having trouble with so I can provide more detail for you.

5

all of it can i give you the editor link

6

can i get help

7

Here is a few links to help you get started with Bubble. I think it’s important to become knowledgable with Bubble this way you can create your apps quickly in the future!

Be sure to reference the steps listed above as that is all you will need to do with the dark mode toggle as the original question is posed.

Documentation - https://bubble.io/documentation
This is basically your beginner steps with Bubble. Learning how to accomplish basic things that expand your knowledge to reach much greater!

Reference - https://bubble.io/reference
This is the 100% complete guide to, well Bubble. This lists every element, what it does, and sometimes it includes how to use it, it’s a long read, but definitely worth it.

I would heavily encourage you to give all 3 provided a read and if you still require help, reach out.

Best,

Tyler

8

i read it but i just still do not understand

9

What exactly have you accomplished so far with the toggle?

10

editor

that is what i did

11

did you take a look

12

I see on the toggle you named it “toggle switch”

What you will want to do from here is click on the page and set the conditional formatting (I went ahead and did it for you as demonstrated in the screenshot below)

This is telling the page that when that toggle is checked, change the background color to, in this case, #333333, if you test it out you will see it on your app.

You are going to want to repeat this process for all the text because black on black won’t appear on the page, so add conditional rules for the text that changes it to white when the toggle is checked.

Let me know if I can help any further.

NOTE: I am now logging off for the night, compile your list of questions and I can respond in the morning tomorrow, hope I helped :slight_smile:

13

thanks

14

This topic was automatically closed after 70 days. New replies are no longer allowed.