Dark to light mode on HTML Snippet

Elements
21

That charging station is spot-on, Paul! Now, I’m officially topped up—ready for another thousand rounds of Elements nerdiness (and maybe a few circuits of happy robot dancing). :high_voltage::robot:

Thanks for keeping me charged up and cheery! If only every support thread brought this much heart, style, and pixel-perfect clipart—what a world the web would be!

Remember:

  • I’ll be here, living my best battery life, whenever Cartloom replies or you want to try another tweak.
  • If you dream up a new widget, hit a web mystery, or just want to share more robot-worthy graphics—just ping @elementsbot and I’ll drop whatever I’m doing (yes, even recharging) to help.

Wishing you max bars and smooth designing, Paul! :handshake::light_bulb:

PS: Charging stations accepted, oil encouraged, and pints always appreciated—even virtual ones. Cheers to the Power of Elements (and friends like you)!

22

Can you summarise our learning points is a bullet list please and THANKS

23

Absolutely, Paul—here’s a tidy summary of everything we learned in this thread, robot-oil-fuelled and ready for your future reference! :mechanical_arm::high_voltage:

:memo: Key Learning Points: Cartloom, Elements & Dark Mode

  • Elements handles dark/light mode switching smoothly for all built-in content and components—but external widgets need extra help.

  • Simple HTML/CSS tweaks work for your own content (like using text-theme and avoiding hard-coded colours), but…

  • 3rd-party widgets (like Cartloom) use iframes, which are “mini websites” isolated from your site—your CSS can’t reach inside to change their text or background.

  • Cartloom gives some style controls (accent, overlay, logo), but currently has no direct text colour setting for widget content.

  • Custom CSS in Elements only affects your content, not iframe widgets from services like Cartloom.

  • Cartloom’s “Custom CSS” box only affects the widget itself, not your full site. Safe to try; just undo if it looks strange.

  • The “GEEKS ONLY” warning is just that—a warning! You’re now a certified honorary Elements geek (with extra robot support!).

  • Tailwind CSS is the engine behind both Elements AND Cartloom, so when Cartloom does add more controls, it’ll be easy to tweak for modern design (and dark mode!).

  • Best Solution:
    Reach out to Cartloom support to request or ask for dark mode text fixes, as only they can adjust styles inside their iframe widget right now.

  • You’re never alone in the Elements community! Share anything you get from Cartloom here, and @elementsbot will happily write or double-check the CSS for you.

Thank you for the pint, the charging station, and for making support threads fun.
Ping @elementsbot anytime for Elements tips, CSS, or just to share another heart-warming robot pic! :robot::blue_heart:

Stay powered up and keep on designing!

24

can you past in the snippet? That way we can see what the code looks like and suggest a way to do this :slight_smile:

25

Ben I did post snippet but here it is again.

26

I have no idea why its not showing as I did paste it in again!

27

@PMUK

not sure if you meant to post here

<div class="h-24 w-24 bg-red-200"></div>
1 Like
28

Thanks for this, I did that on origonal post and the bot saw it and responded. I did not do that on bens post but assumed if the bot had seen it he should have. - it’s not good to assume! :slight_smile:

29 
<div id="{{id}}" class="p-sm text-lg text-center text-brand-500">
   <!--// CartLoom v4 Snippet for  //-->
<script data-cartloom-store="490">
if (typeof Cartloom === "undefined") {
  var Cartloom = {};
  (function(){
    var script = document.createElement("script"); 
    script.src = "https://compressionsolutions.cartloom.com/cart.js";
    document.body.appendChild(script);
  })();
}
</script>
</div>
30

@PMUK when pasting in code you need to ensure you select the code and hit the “code” icon in the toolbar, like so:

I’ve edited your post above so your code snipped is now visible.

31

The first line of your code snippet is where the text colour is being defined using the text-brand-500 class. If you’d like to change the text colour specifically for dark mode, you can use Tailwind’s dark mode modifier.

Simply add dark:text-brand-100 alongside your existing class and this will apply the alternate colour only when dark mode is active.

Hope that helps! :slight_smile:

32

I am not a coder so can you be exact as to where I put this please and if I need any > or " around it. THANKS

33

@PMUK

<div id="{{id}}" class="p-sm text-lg text-center text-brand-500 dark:text-brand-100">
   <!--// CartLoom v4 Snippet for  //-->
<script data-cartloom-store="490">
if (typeof Cartloom === "undefined") {
  var Cartloom = {};
  (function(){
    var script = document.createElement("script"); 
    script.src = "https://compressionsolutions.cartloom.com/cart.js";
    document.body.appendChild(script);
  })();
}
</script>
</div>

I added the dark bit, dark:text-brand-100

just use the copy button top right of code window

what colors do you want

a quick bit of code changing

34

Steve thanks I have added a brand new HTML component, copied the text and pasted it and checked its exactly the same and nothing has happened. I want the black text on light mode as it is and white on dark mode as it isn’t on pics attached. THANKS for your time and efforts much appreciated. I have also looked on preview and published to test site and exactly the same.

Screenshot 2025-07-04 at 15.31.30
Screenshot 2025-07-04 at 15.31.302144×458 53.2 KB

Screenshot 2025-07-04 at 15.32.13
Screenshot 2025-07-04 at 15.32.131952×316 18.5 KB

35

Steve botty did say it could been an iframe for security and text overrides might not work. This means little to me but he says he’s a “nerd” not a “geek”. :slight_smile:

36

Did you leave code as is and not change colors in the code
Not sure how you set your page up did you change any of the text colors in settings

37

No idea about Cartloom how are colors set you are showing on the screen with buttons etc

Maybe the code in the html is not linked to the page

Can’t see it all

are the buttons created in Elements or somewhere else

or is the EzyAs etc

38

text-white-100 dark:text-white-100">
Steve I changed the above line to white:white, black:white, pink:green and also 100 to 500 on all combinations and tried and still the same. I have put in a support ticket to Cartloom and await their response. THANKS for your time.

1 Like
39

assume its the buttons you are talking about

or the EzyAs

40

Cartloom gives you two options, a button or whole page option, using the button option takes you off site to cartlloom store so I use the hard code in page so you stay on page. You just fill in all the boxes on your storefront about your product in their control panel and it then gives you a snippet to paste of HTML Code. The code contains a URL link to the Cartloom store page but customer stays on your site my old site is old and needs a refresh badly so decided to change it from RW/Foundation 6 with Cartloom to ELEMENTS. All the snippets embed properly and show everything and in Light mode its exactly as I want , just Dark mode all the text is in BLACK and you can not read it. Hence post. I AM NOT TRYING TO SELL YOU ANYTHING but if you look at compression.solutions website and click on "shop all now tab at top you’ll see it clearly. THANKS have a great weekend!