Darklight Switch: 5-Minute Professional Setup (Zero Flicker) Description:
Tired of that jarring "flash" that breaks user immersion every time a page loads? Give your app the professional Dark Mode experience your users expect.
Darklight Switch is the definitive, 100% client-side solution for implementing a one-click theme system, built with a total focus on performance and user experience.
Why is Darklight Switch the Right Choice?
✅ Eliminates Flicker (FOUC): Our initialization script executes before anything else, ensuring the user's preference is applied instantly. The result? A silky-smooth transition with no flash of unstyled content.
🧠 Remembers User Choice: Thanks to localStorage, the plugin remembers the user's preference. If they choose dark mode, they'll return to dark mode on their next visit. It's that simple.
🎨 Adapts Instantly: The plugin applies global CSS classes (dark-mode) to your app, allowing you to style everything at once with the performance and simplicity of CSS variables.
💬 Communicates with Bubble: It exposes essential states (current_theme) and triggers events (theme_changed) so you can create complex workflows and conditionals based on the current theme.
Installation Guide: The Magic in 3 Steps
STEP 1: The Anti-Flash Foundation ⚡ (Required)
This script is the maestro of your theme orchestra. It ensures the music starts in the right key from the very first note, eliminating the page "flicker".
In your Bubble editor, go to Settings > SEO / metatags.
Copy the code below and paste it into the "Script/meta tags in header" field.
code
Html
<script>
// Instantly checks for a saved theme or system preference
(function() {
   const savedTheme = localStorage.getItem('bubble_theme_preference'); // We use a unique key
   const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
   if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
       document.documentElement.classList.add('dark-mode');
   }
})();
</script>
STEP 2: The Art Direction 🎨 (Where the Visual Magic Happens)
The plugin sets the stage, but you are the art director. Here, you define how your app will look in light and dark modes.
The Master's Route (Recommended: CSS):
This is the most performant, scalable, and easy-to-maintain approach. It's like using a master brush to paint the entire scene at once.
In the same field (Settings > SEO / metatags), paste the CSS code below, right after the first script.
Customize the colors in the variables to match your app's brand identity.
code
Html
<style>
/* Your color palette for each theme */
:root {
 /* LIGHT MODE (Default) */
 --bg-color: #FFFFFF;
 --text-color: #333333;
 --button-bg: #EAEAEA;
 --border-color: #DDDDDD;
 --header-bg: #F0F0F0;
}

:root.dark-mode {
 /* DARK MODE */
 --bg-color: #1e1e1e;
 --text-color: #FFFFFF;
 --button-bg: #555555;
 --border-color: #777777;
 --header-bg: #2a2a2a;
}

/*
The Final Bridge: Connecting CSS to the Bubble Editor
Master Tip: For this to work, elements in the Bubble Editor need to "listen"
to these variables. In your app's Style Editor, set the background color of
elements (like the page itself) to 'None' or transparent. The CSS below
will then take control and apply your theme colors.
*/

body, .main-page {
 background-color: var(--bg-color) !important;
}

.bubble-element.Text {
   color: var(--text-color) !important;
}

.bubble-element.Button {
   background-color: var(--button-bg) !important;
   border-color: var(--border-color) !important;
   color: var(--text-color) !important;
}
</style>
The Alternative Route (Use with Care!):
This works, but it's like using a stamp for each element, one by one. Use sparingly for exceptions. In an element's "Conditional" tab, add: When DarklightSwitch A's current_theme is "dark" -> Change Font color, etc.
STEP 3: The Switch 💡 (The Final Touch)
Drag the "DarkLight Switch" element onto your page. Ideally, place it in a reusable element like a header.
Add an icon or button (e.g., 🌞/🌜) and create a workflow: When Button is clicked -> Element Actions -> Toggle Theme.
In the action's properties, select the DarkLight Switch element you placed on the page.
Done! You've just installed a robust, professional, and incredibly fast theme system.