NO BUG: Dynamic variables can't be imported

Bugs
1

Hello,

I was trying to use a custom code I found from repository and I discovered that I can’t import variables that has values for light & darkmode.

for example,
:root{
–base-color: white;
–base-variant: #e8e9ed;
–text-color: #111528;
–secondary-text: #232738;
–primary-color: #3a435d;
–accent-color: #0071ff;
}

.darkmode{
–base-color: #070b1d;
–base-variant: #101425;
–text-color: #ffffff;
–secondary-text: #a4a5b8;
–primary-color: #3a435d;
–accent-color: #0071ff;
}

how do I import these variables while storing the values of the darkmode class?

I feel it’s either a missing feature/bug when I pasted in the variable import screen to import the codes

2

Hi,

you can only have one variable with the same name.

So, what you probably need to do is import just :root variables, and for dark mode, include that class that you have, that will override the variables if the user switches to dark mode.

If you also want “dark mode” variables inside the variable manager, then you will need to name it differently.

I hope it’s understandable.
Matej

3

You mean I should include .darkmode{
–base-color: #070b1d;
–base-variant: #101425;
–text-color: #ffffff;
–secondary-text: #a4a5b8;
–primary-color: #3a435d;
–accent-color: #0071ff;
}

in the Bricks Settings > Custom Code?

4

You can put them in the CSS of the class, as well. Then they override the others when .darkmode is added.

5

Importing classes can only be in json. I exported classes from bricks to see the json format, but i can’t see the values for the class.

6

That’s right. Include this in Settings → Custom code, or under a “.darkmode” class in builder, like @Maexxx suggested.

Then, once you apply this class, all elements below it, will have those new variables.