[New Plugin] Dark Mode With Persistent Selection

Showcase
1

Hi Everyone

I have a fair few private plugins that i have made for personal projects i’m going to start releasing them for use in the Bubble community. The majority will be on commercial licences as these plugins take time to develop. I welcome anyone support who purchase or subscribes to any of them. It allows me to dedicate more time to releasing more of them in the future.

My Dark Mode Plugin was created a while back and i have used it on many personal projects especially that utilise an admin / dashboard area.

‘Dark Mode’ - Toggle with Persistent Selection

Description:

The 'Dark Mode plugin enables your Bubble.io application users to seamlessly switch between light and dark themes, providing an enhanced and personalized browsing experience.

In addition to allowing for dynamic theme changes, this plugin remembers users’ preferred settings. Utilizing browser cookies, the plugin stores the user’s last theme selection. Consequently, when users revisit your application, their preferred theme awaits them, creating a consistent and user-friendly environment.

Features:

Dark Mode Toggle: An element that enables users to switch between a light and dark theme based on their preference. The element can be added to any page where you want the dark mode to be available.

Toggle Action: An action that can be connected to any Bubble element such as a button. This allows you to enable the dark mode toggle from various interface points.

Persistent Selection: Stores users’ theme preference in a browser cookie, offering a consistent browsing experience across different sessions.

Customizable Default Theme: Allows developers to set the default theme to either light or dark.

Exposed State for Conditionals: The plugin exposes the current theme selection as a state, providing developers the flexibility to construct conditional statements within their application.

Easy to Implement: Designed with Bubble’s visual development environment in mind, making it simple to integrate this plugin into your application.

DEMO - http://geek-labs-demos.bubbleapps.io/version-test/dark_mode_demo

Plugin Page - Dark Mode with Persistent Selection Plugin | Bubble

Hope you enjoy, find it useful and welcome any feedback or issues.

2

I’ve traditionally handled dark mode by using the condition ‘Current user’s dark mode is yes’ and integrating the conditions directly into the styles. However, the concept of storing a user’s preference in a cookie, as your plugin does, would be nice to use for logged out users.

3

That’s how i used to do it but one of the problems with it is doing a DB search on the user to see their preference and then doing another DB write if they change their selection. small i know but with large apps with a lo t of users those Workload Units soon add up.

4

That makes sense; with this plugin, are you able to see or track user preferences for theme selection?

5

If you wanted to you could do it in the workflow but would require a DB write.

The plugin saves the state as Boolean (yes / no) so would be when dark mode is yes - change colour for dark mode etc.

You could add a field in the user database called ‘dark mode enabled’ for example and save the state to the db each time. or with a bit of extra logic you could format as text and do something like when yes = ‘dark’ when no = ‘light’ etc.

But basically yes you could do what your asking, the best approach is what suits you or your app.

If you need any help implementing just let me know.

6

Quick question. I have a header with a dropdown menu. I add this header to a page but as it’s resuseable it doesn’t bring the dropdown with it, its’s fixed in automatically.

Everything else on the site works with the switch, Dark modes dark mode etc but not the dropdown. It stays the same colour until I refresh the page.

Any tips on how to get this to change too?

7

I would need to take a look really. or at the very least some screen shots.

1 Like
8

Will get to it.