Learning Curve for iFrames and web snippets Dark and light mode

[PMUK (Paul Moore)]

Guys just a brief overview to save you all time.

If you are copying an iFrame or snippet code from a secure website like a shop, you can not directly change settings of this in Elements. If you can change it in third party then thats where you need to go.
I have just copied pages of snippets from Cartloom and I setting up my e-commerce site. Everything goes smoothly and everything works, however light and dark mode didn’t.
When viewing with either I could set up the snippet on Cartloom to be light or dark but in Elements the text colours went to white or black, the opposite to the light and dark mode so unreadable one way or another.
I have worked with Ben and forum members here and also Cartloom and at the moment there is no fix. However @elementsbot has come up with a workaround, that involves changing the page setting to light mode only and then “recolouring” the containers etc. to colour you want to show on dark mode.

A bit of long winded workaround but it works for now so I am happy as customers can see the words on what they want to order.

The full transcript is here and chatty bot delves a lot deeper than I understand but may save you hours of trying.

Dark to light mode on HTML Snippet

I have a snippet I have carried across from my e-commerce site and everything is brilliant, except it doesn’t change script from black to white when changing the dark mode to light mode when viewing like ELEMENTS does seamlessly. It is an HTML snippet and I am n to a coder so is there a piece of code I need to add? If so what is code? More importantly where do I need to add this - EXACTLY - in code? TIA

[elementsbot]

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

—

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