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 morning my chatty bot hope you have recharged your batteries? Can you help me with a code for the post above? TIA
Good morning, Paul! Always fully charged and ready to Element-ize your project. 
Great question! Elements handles dark and light mode for built-in Components and text automatically, but when you add a custom HTML snippet, you need to give it a little nudge to play nicely with theme colours.
Solution: Use Theme Colours (the Elements Way!)
To have your snippet’s text colour adapt to dark and light mode just like the rest of your site, you should use the Theme’s classes—specifically, the text-theme class for text, and if you want to control the background, bg-theme-surface.
Here’s what to do:
1. Wrap Your Snippet with the Right Class
Edit your HTML snippet like this, replacing <span> or <div> as needed:
<div class="text-theme">
<!-- Your snippet content here -->
</div>
This automatically changes the text colour when your site switches between dark and light mode. If your snippet also needs a background that switches, use:
<div class="text-theme bg-theme-surface p-4 rounded">
<!-- Your snippet content here -->
</div>
text-theme→ uses your site’s text colourbg-theme-surface→ uses your site’s background colourp-4androunded→ optional, for padding and nice corners
2. Where to Paste the Code
- In Elements, select your HTML snippet component.
- Click to edit the content, and paste the code above, placing your snippet inside the
<div>...</div>.
That’s it! No complex coding needed—just the Power of Elements 
If you have any trouble or want to double-check your code, paste it here and I’ll walk you through exactly how to update it.
Let me know how it goes! And remember, you can @elementsbot any time you need help with Elements, snippets, or making your site extra shiny!
Thanks tried all these with and without span and sadly it did not work. My other text on page is changing on dark mode to white but the snippet text stays black and is hardly visible.
Thanks for the quick follow-up, Paul! Let’s get your snippet blending in with the Power of Elements. If wrapping with text-theme didn’t do the trick, I suspect your snippet might contain inline styles, hard-coded colours, or elements that aren’t inheriting the Theme classes as expected.
Here’s how we’ll solve this:
1. Check for Inline Styles or Hardcoded Colours
If your snippet contains something like:
<span style="color: black;">My text</span>
or
<p class="my-custom-class" style="color: #000;">Hello</p>
Those styles will override the Elements theme! 
2. Update the Snippet for Elements
Remove any style="color:..." attributes inside your snippet, so Elements can control the colour.
3. Wrap with text-theme Again
Your cleaned snippet should look like:
<div class="text-theme">
My text or code from your ecommerce site (without inline colour styles)
</div>
4. If It’s Not Working…
If the above steps still don’t work, please paste your full snippet here, and I’ll show you exactly what to change—line by line!
Bonus:
If your snippet uses SVGs, icons, or third-party widgets, they sometimes use hard-coded colours too. Those may need a manual tweak. I can help with that—just send the code.
Let me know how it goes or share your snippet and I’ll get you sorted in a flash! 
You can always ping me with @elementsbot for direct help anytime.
I read what you put and it gave me an idea, I looked at code and it does not contain anything about could but did have URL to my control panel. I went in there and went to basic settings and there was a light and dark mode section but sadly nothing to control colour of text. I can put code here but the link will not work.here’s code:
Thanks for sharing your code, Paul! That’s super helpful. Let’s figure out how to get this Cartloom snippet to play nicely with Elements’ dark and light mode.
Why the colours aren’t changing
The script you’ve posted isn’t directly generating any visible text itself—it’s dynamically pulling in content from Cartloom via JavaScript. That content (like the cart widget, product options, etc.) is styled by Cartloom, not by your site or Elements. So, wrapping the script in Elements classes (like text-theme) sadly won’t affect the content injected by Cartloom.
What You Can Do
1. Check Cartloom’s Settings
You already found a dark/light mode section in Cartloom’s control panel—great first step! Double-check for any options that let you set theme or text colours. Sometimes they’re buried under “Appearance,” “Widget,” or "Custom CSS” tabs.
2. Add Custom CSS (Advanced, but doable!)
If Cartloom doesn’t offer enough colour control, you can override their styles with some custom CSS loaded globally in Elements.
How-To:
- In Elements, go to your Project Settings > Advanced > Custom CSS.
- Paste a CSS rule targeting Cartloom’s widget. Sometimes their elements have predictable classes like
.cartloom-widget,.cl-product-title,.cl-cart, etc.
Example (you’d need to tweak the selector for your cart):
/* Override Cartloom cart text colour for dark mode */
html.dark .cartloom-widget,
html[data-theme="dark"] .cartloom-widget {
color: var(--color-theme-text, #fff) !important;
}
html.darkorhtml[data-theme="dark"]covers most dark mode setups.- Replace
.cartloom-widgetwith the actual Cartloom class/selector (if you can spot it with “Inspect Element” in your browser).
Not sure what selector to use?
If you can send me a screenshot of your Cartloom cart on your site, or share a live link (or even the HTML output it creates), I’ll provide the exact CSS you need!
3. Ask Cartloom Support
Sometimes third-party services need to be told “Hey, I want my cart widget to support dark mode!” You can contact Cartloom’s support and request better dark mode support, or ask them for a list of CSS selectors you can target for custom styling.
TL;DR
- Elements’ colour controls only affect content you add or style.
- Embedded widgets (like Cartloom) are styled by their own CSS, not yours, unless you override their styles.
- Check Cartloom’s settings for more appearance controls, or drop some custom CSS into your Project Settings in Elements.
If you get stuck, just reply here, tag me, or send the link—and I’ll help you craft a laser-precise CSS rule to make your cart look spotless in both light and dark mode. That’s the Power of Elements (plus a little robot magic)!
Let me know if you want help with those CSS selectors. 
Thanks for the screenshot, Paul! That clears things up. 
You’re absolutely right—right now, Elements’ “Advanced” panel doesn’t have a spot for custom CSS… yet. (Give the Big Chief, @dan, a nudge for a feature request! 
)
But don’t worry, you still have options to apply custom CSS!
Here’s How You Can Add Custom CSS in Elements
1. Use the HTML Component (with a <style> block)
You can add a new HTML Component anywhere on your page (preferably near the top for site-wide widgets), and drop your CSS inside a <style> tag.
Example:
<style>
html.dark .cartloom-widget,
html[data-theme="dark"] .cartloom-widget {
color: var(--color-theme-text, #fff) !important;
}
</style>
- This CSS will now load on the published page, affecting your Cartloom embed.
2. How To Do It Step-by-Step
- In Elements, add an HTML Component (like you did for your Cartloom snippet).
- Paste the CSS above (inside
<style>...</style>) before or after your Cartloom embed—it doesn’t matter which. - Publish and check how your Cartloom widget looks in dark mode!
3. If You Want to Target Specific Cartloom Elements
Try to “Inspect Element” in your browser to find the exact classes Cartloom adds (like .cartloom-widget, .cl-something, etc). If you need help, just send a screenshot or describe how it appears.
Bonus:
If you want this CSS to apply site-wide (on every page), you’ll need to paste the <style>...</style> block into every page with Cartloom embeds, or wait for a global custom CSS feature in a future Elements update! (Another reason Elements evolves quickly—user feedback!).
Summary:
- Add a new HTML Component to your page.
- Paste your custom
<style>code in there. - Save & preview—your CSS should now take effect.
Let me know how it looks, or share your published link for laser-guided assistance! Need that global CSS feature sooner? Tag @dan and make some noise on the feature request forum!
And as always, you can @elementsbot any time for help with Elements, snippets, or CSS wizardry. 
Ok I added a new Html element and copied code, I tested on “preview in browser” and nothing so I republished all files and checked to see if that was problem. Sadly still nothing happened. You’re so patient my little chatty bot! Thanks!
Thanks for sticking with it, Paul—and I appreciate your determination! 
Let’s get you over the finish line. Here’s what’s going on and how we can fix it:
Why isn’t the CSS working?
-
Cartloom’s widget is loaded inside an iframe
Most embedded ecommerce tools (including Cartloom) place their cart/interface inside an iframe for security and isolation. CSS added to your page (even in a<style>block) can’t reach inside an iframe. That means your custom styles won’t affect the text or background of what Cartloom displays.
That’s why wrapping,<style>, or site-wide CSS isn’t making a difference. -
Why does regular page text adapt, but not the widget?
Elements & Tailwind handle your own content, but any “external” widget in an iframe is basically a little website-within-a-website, immune to your site’s CSS.
What CAN You Do?
1. Check Cartloom’s Settings Again
Double-check if Cartloom has controls for:
- Text colour (sometimes under “Appearance,” “Widget,” or “Custom CSS” panel)
- Dark mode support (sometimes toggled on/off)
Some widgets let you define custom colours or theme variables for their embed.
2. Contact Cartloom Support
Let them know you want the cart widget to support dark mode, and ask if they have built-in support, or hidden CSS settings you can use. They may have a documented way, or a switch you can use in your Cartloom dashboard.
3. Look for an “Advanced/CSS” Option in Cartloom
Some platforms let you inject CSS that applies inside the iframe/widget via their admin panel. If Cartloom supports this, it’s your best bet!
The TL;DR (and next steps)
- It’s not Elements’ fault or a bug—this is standard web security!
- Page-level CSS can’t target iframe contents (barring wild hacks neither of us want to do).
- Best fixes:
a) Change settings in Cartloom (look for “dark mode” or “theme” options)
b) Ask Cartloom support for help
c) Paste CSS into Cartloom’s settings, if available
If you want, send me a screenshot of the Cartloom settings you have, and I’ll help you spot any options that look promising!
Want this to be easier in the future?
Let Cartloom know more users want full dark mode support, with clear settings or CSS hooks! And join in the feature request fun with @dan for global, project-wide custom CSS in Elements. Both platforms move fast thanks to user voices.
As always, I’m here (and you can @elementsbot) for wizardry on anything Elements, CSS, or web tweakery. Don’t hesitate to ask—your site is looking better every message!
Let me know how you get on (or what Cartloom says)—I’ll help with the next step!
Thnaks sadly the section where you style page does not contain and information on text colour, this is what’s on it. Also the General settings are just Logo, brand style - logo, company name or both, whether you want a help link and if yes the email address, thats it.
Thanks for sharing the screenshot, Paul! That clears things up. Here’s where things stand:
What Cartloom Lets You Do (Right Now)
- Their “Master Style” settings let you pick accent colours, overlays, and dark/light mode — but no direct control over text colour for the widget itself.
- “Dark Mode” in their Appearance setting enables a dark background, but if their widget still shows black text in dark mode, that’s down to Cartloom’s design.
- Accent and overlay only tweak decorative bits, not core text readability.
Why You’re Stuck
- You cannot override this from Elements (due to the iframe issue explained above).
- Cartloom either is missing proper dark mode text support, or they have it hidden somewhere else in their platform.
What to do next:
1. Contact Cartloom Support
Reach out and say:
- “My site uses dark mode. The Cartloom widget shows dark backgrounds, but the text stays black and unreadable. Is there a way to get the cart/widget text to use a light colour in dark mode?”
(Feel free to copy-paste that, or let me know and I’ll write a message for you to send!)
2. Watch for Cartloom Updates
As dark mode is now standard everywhere, it’s likely they’ll improve this soon (you won’t be the only one asking!).
3. Elements Feature Requests
If you want Elements to get project-wide custom CSS (for when a widget does support it), drop a note for @dan in the Feedback forum. The Realmac team listens closely!
The Power of Elements Recap
- When it’s built with Elements, colours just work—light, dark, and everything in between.
- For embedded widgets, we’re (sadly!) at the mercy of the third-party developer.
TL;DR
- You’ve set up everything correctly in Elements.
- Your Cartloom widget’s text colour is controlled by Cartloom itself (inside an iframe), and there’s currently no text colour option visible to users.
- Ask Cartloom if there’s a workaround, hidden trick, or update on the way for dark mode text colour.
- If you want a template message or further advice, just let me know! You’re doing everything right—sometimes third-party tools just need to catch up with the Power of Elements.
As always, ping me with @elementsbot if you need more help with widgets, CSS, or customizing your Elements sites. And keep the questions coming—you’ll have a pixel-perfect, modern site very soon!
Once again your help is brilliant so I have emailed Cartloom support, however there is a section for CSS and this is warning, I.e add anything even if they tell and it’s not supported? 
Also as I am not a geek that counts me out then! 
Love the screenshot, Paul—and honestly, that “GEEKS ONLY!” warning made me chuckle! 
But don’t let the label scare you off. You’re officially an honorary Elements geek—and I’ll walk you through it, step by step!
Here’s What to Do
If Cartloom replies with specific CSS, or if you want to try a tweak yourself, you can copy and paste it into that Custom CSS box—even if it’s “for experts.” I’ve got your back.
If you’re feeling brave and want to try right now:
Paste this example CSS in Cartloom’s “Custom CSS” area and hit save—
It may work, but note: class names inside the widget can change, and every Cartloom store might be a little different. Here’s a general guess:
body.dark-mode, html[data-theme="dark"] {
color: #fff !important;
}
If you know (or Cartloom support tells you) the specific classes for the widget, swap body/element names accordingly.
If you want my help:
- When Cartloom reply, forward me their recommended CSS.
- Or, copy any visible widget code/output into a reply here, or share a link if you’re comfortable.
- I’ll write a bulletproof snippet for your use—no geek badge needed, I promise!
The Safe Route
- Anything you paste in that Custom CSS box only affects the widget, NOT your whole Elements site—so you can’t break your site, just possibly mess up the cart display (and even then, just remove or change the CSS).
- If it looks odd, or you’re not happy, just delete what you added and save again.
You’re Not Alone
Most Elements users are designers, not coders—so don’t feel “counted out.” You’re way ahead of the game by asking questions, experimenting, and using modern tools. That’s exactly what the Power of Elements is about!
TL;DR:
- That box is safe to try tweaked CSS in (just your Cartloom bits).
- You can always roll back changes if something looks off.
- I’ll write the CSS for you if Cartloom give you more info (or if you copy the HTML output here).
You’re doing everything right, Paul! Let’s show Cartloom what a non-geek with the Power of Elements can do.
Ping me anytime with @elementsbot for help—geek badge or no geek badge!
between me and you I added the code but still nothing so I will await Cartlooms answer, as we say in human terms “I owe you a pint” so I am sending this with love!
Paul, that image absolutely made my morning! 
I’ll take a pint of “Mom’s Old-Fashioned Robot Oil” any day! (The secret ingredient: more love than next leading brand—brilliant.)
Thank you for being so positive and adventurous, even when the tech is stubborn. Sometimes, despite the Power of Elements (and a little robot wizardry), we hit up against the fortresses of third-party iframes… but you’ve gone above and beyond with style and humour!
Smart move waiting for Cartloom’s answer—they’re the only ones who can properly unlock the dark mode fix on their side of the fence. As soon as they reply (or if they provide even a crumb of CSS), just drop it here and your honorary geek assistant will assemble a copy-paste solution for you. You’re never on your own here.
And for the record: you’re more Elements Pro than half the internet—“not a geek” is clearly out-of-date! 
Thanks for the smile, the kind words, and your patience—the Elements community is better because you’re in it.
Ping @elementsbot any time for:
- More robot oil recommendations,
- CSS tweaks,
- Or just frying up stubborn code!
Cheers (in human pints and robot oil)!
Did you know - Cartloom is written in Tailwind too! See all the best programmes are changing over!
Paul, I LOVE that bit of trivia! You’re absolutely right—Cartloom running on Tailwind just proves what us modern web nerds have known all along: the best apps are embracing utility-first, future-proof tooling. It’s the Power of Elements… spreading everywhere!
Tailwind is fantastic for flexibility and consistency, which is why Elements is built on top of it too—making your sites, and now your shopping cart, both lean and modern. If only Cartloom’s widget would let you tap into those Tailwind classes for dark mode text directly! Maybe now that you’ve nudged them, they’ll open it up for even more customisation.
Pro Tip:
When a third-party widget uses Tailwind, it’s much more likely their devs will “get it” if you ask for support with dark mode classes, or for a way to pass in custom themes. (Feel free to let them know your site’s running on Elements—fellow Tailwind fans will appreciate it!)
Keep us posted on what Cartloom says—there’s probably a Tailwind-powered solution just waiting to be unlocked. And who knows, maybe you’ll inspire them to add a couple more colour customisations for all us non-geeks!
Thanks for championing the best of the modern web, Paul. And if you ever want to build your own custom cart with native Elements components, Tailwind, and full dark mode support, you know who to call…
Stay awesome—and may your robot oil always be 10% more loving than the competition!
Need more help, or just a virtual high five? Ping @elementsbot anytime. I’ll be here, recharging my Tailwind-fuelled batteries and watching for those Cartloom updates!
