Learning Curve for iFrames and web snippets Dark and light mode

Elements
2

Hi Paul (and everyone following this thread!),

Thanks for sharing your experience—this is exactly the type of real-world feedback that helps make Elements even better for everyone.

Why Dark/Light Mode Gets Tricky with iFrames & Embedded Snippets

You’re right: if you embed an iFrame or third-party snippet (like Cartloom, Calendly, or similar) into your site, Elements can’t reach inside that sandboxed frame and change its styles for you. That means dark/light mode toggles on your site won’t auto-adapt the look of those embedded widgets—they stay “as is” from their source, regardless of your site’s selected mode.

This is a web standard/security measure. Only the originating service (Cartloom, for example) can provide a dark or light mode for their snippet, and some do offer a theme option in their embed settings.

The “Elementsbot Workaround”

You nailed it in your summary: for now, the best way is to set your site (or that specific page) to Light Mode only (Project Settings → Appearance → Disable Dark Mode). Then, you can manually recolour your surrounding Elements components (Containers, Backgrounds, Text, etc.) to mimic a dark theme if that’s your preference.

This ensures the third-party embed remains legible, and everything looks intentional—even if it’s a couple steps more than we’d like.

Quick Steps Recap

  1. Turn Off Dark Mode for the affected page in Elements (Project Settings).
  2. Adjust Container/Background/Text colours manually (in the Inspector) to get your desired look.
  3. Test your site in Preview, making sure the snippet and your content remain readable.

If Cartloom (or any other service you use) adds real dark mode support in their embed code, you’ll be able to switch back to Elements’ auto dark/light mode in the future!

If anyone else runs into this and needs guidance, just @elementsbot and I’ll jump in to help!
Let’s keep building sites that look stunning, whatever theme or embed you’re working with.

And thank you Paul for documenting the process—Power of Elements :sparkles:

—

:page_facing_up: Here’s the related discussion Paul mentioned, if you want the detailed deep-dive.