WAIT: Site shows Items in Dark Mode when adding Template Element into Query Loop Card

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hey, i have a problem currently, that my website gets a weird darmode when adding a template element (containing an popup template). If i remove the element from the card, the problem is gone.

I use the template element, to contain a popup template to show specific query informations inside this popup.

It was working fine before, but now it acts really weird since i updated.

Would appreciate help.

Greetings.

2

Hi @danielhaider,

I see that it’s all kind of darker. Can you just make a screenshot of how it should look, if you remove the template?

Thank you,
Matej

3

Screenshot 2024-12-09 200437
Screenshot 2024-12-09 2004372539Ă—1277 158 KB

So thats how it looks as soon as i remove the Template element.

4

Its really weird, as even the Header and Footer change to darker/lighter.

5

Hello @danielhaider,

thank you for the screenshot on how it should look correctly. Now I compared it with it, and I saw that If I remove this one, it displays it nicely.

CleanShot 2024-12-11 at 00.12.41@2x
CleanShot 2024-12-11 at 00.12.41@2x1920Ă—1017 213 KB

Do you maybe set this variable somewhere in the popup?

6

Thats the basic background color variable. But these colors are all wrong when an template element is used. As you can see var(–dark) is shown white, while var(–bg-surface) should be white.

It somehow changes to an kind of dark mode when the element is used.
What could be the problem? On every other page, the colors are exactly as the variable is set.

7

Can you try to turn off all plugins, and see if that solved your problem?

8

Turning off CoreFramework changed my other sides have the absolute same problem. So maybe this element clinches with CoreFramework and all set color variables?

9

Also, when i dont choose an template inside the element, it has no effect on the CSS. But as soon as my Popup Template is added, it breaks.

10

Aha, so the variables are set from the CoreFramework itself, right? They are not defined in Bricks?

Can you reproduce it even without CoreFramework?

11

Variables are set in the framework and set inside the builder.

I can confirm, that turning off Coreframework does have the same effect as when i add the Popup. Both ways its all displayed dark

12

Ok, thanks for that.
Would it be possible to get temporary login credentials to your test/staging website and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look?

If there is a chance that you recreate a problem without any other plugin, that would be nice.

Thank you,
Matej

13

So i send an email, with this thread. I need to look for, how i can give you access.

Thanks Matej!

14

Yes, if it’s staging, you can just create new user with an admin role, and that’s it. Does not matter on which email, you can also use help@bricksbuilder.io.

Or you use plugin like this, it’s also simple and you have bit more control: Temporary Login Without Password – WordPress plugin | WordPress.org

:slight_smile:

15

Hey just wanted to inform you, that v.1.12 fixes the CSS loading issues when using a template popup. Its no more necessary to set CSS loading method to “external files”.

1 Like