[New Plugin] DarkLight Switch - Seamless & Professional Theme Toggling (FOUC-Free)

Plugin builders
1

Hello Bubble community!

I’m excited to introduce the DarkLight Switch, a simple yet powerful plugin designed to do one thing perfectly: deliver a professional-grade dark/light theme experience for your apps.

Tired of that theme “flicker” (FOUC) that spoils the user experience? So were we. That’s why we built this plugin with a total focus on performance and flawless implementation.

EDIT: The plugin has been approved and is now available!

:last_quarter_moon_face: and :sun:

:sparkles: Key Features

  • “Flash”-Free Experience (FOUC-Free): Uses an initialization script to apply the theme before the page renders, ensuring instant transitions.
  • Total Design Control: The plugin manages the theme’s state. You define the colors and styles. Fully compatible with Bubble’s Design Styles system and conditionals.
  • Lightweight & Performant: Clean, optimized code that won’t weigh down your app.
  • Automatic Persistence: Remembers the user’s choice across sessions using localStorage.
  • Advanced Features: Exposes the currentTheme state and triggers a theme_changed event so you can build complex workflows on top of it.

:rocket: See it Live

Nothing beats trying it yourself. Explore the full demo page:

:wrench: Quick Setup Guide (Less than 5 minutes)

Follow these 3 steps to get your theme system working perfectly.

STEP 1: INITIALIZATION SCRIPT (ESSENTIAL)

To prevent the “flash” of the light theme on dark pages, you MUST add the following script to your app’s header.

Go to Settings > SEO / metatags.

Copy and paste the code below into the Script/meta tags in header field:

<script>
  (function() {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark') {
      document.documentElement.classList.add('dark-mode');
    } else {
      document.documentElement.classList.add('light-mode');
    }
  })();
</script>

STEP 2: CONFIGURE YOUR DESIGN (CSS or CONDITIONALS)

The plugin adds the dark-mode or light-mode class to your app. You decide what these classes do.

Option A (Recommended - CSS):

Add styles for dark mode in the same Script/meta tags in header field, inside <style> tags:

<style>
/* Exemplo de Estilos - Adapte com suas próprias cores! */
:root.dark-mode {
    --primary-bg-color: #1e1e1e;
    --primary-text-color: #ffffff;
}
body.dark-mode {
    background-color: var(--primary-bg-color) !important;
    color: var(--primary-text-color) !important;
}
.dark-mode .bubble-element.Button {
    background-color: #333333 !important;
    color: #ffffff !important;
}
</style>

Option B (Bubble Conditionals):
For any element, add a conditional:

When ToggleDarkLight A’s currentTheme is “dark” → Change Font color, Background color, etc.

STEP 3: USE THE PLUGIN!
Drag the DarkLight Switch element onto your page (e.g., in the header).

That’s it! The switch will control the classes, and you can use the currentTheme state and the theme_changed event for any additional logic you need.

:speech_balloon: Feedback and Support
This is the official support thread. If you have questions, find a bug, or have suggestions for new features, please reply here! We’re committed to evolving this plugin with the community’s help.

Thanks for your support!

:speech_balloon: Plugin Link on the Marketplace: Bubble: The full-stack no-code app builder
:construction_worker_woman: Here’s the App editor link: DarkLight Switch - App | Bubble Editor

1 Like