Bootstrap Theme Manager Unable to Modify theme-colors in Advanced Options

Wappler General Bugs
,
#1

Wappler Version : 3.6.1
Operating System : W10
Server Model: NodeJS
Database Type: NA
Hosting Type: NA

Expected behavior

Modifying theme-colors should create CSS with modified values.

Actual behavior

image

How to reproduce

Go to theme manager. Click advanced. Select theme colors options.
image

Default Value:

map-merge((primary:    $primary,secondary:  $secondary,success:    $success,info:       $info,warning:    $warning,danger:     $danger,light:      $light,dark:       $dark), $theme-colors)

Modified Value:

map-merge( ( mycolour: #eee, primary: $primary, secondary: $secondary, success: $success, info: $info, warning: $warning, danger: $danger, light: $light, dark: $dark ), () )

OR

map-merge( ( "mycolour": #eee, "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ), () )

On save, you should see an error as shown above.
The issue here is that if I don’t modify any of the 8 default color/variable values in the basic view, I cannot modify this theme-color property.
If I, say, change the first 3, I see an error on $info as shown in screenshot above. Otherwise the error says $primary.
But, if I modify all the 8 default values, and then add my 9th custom color - the error I then get is $theme-colors is undefined.
So next, I just replaced $theme-colors with () and it compiled as expected - the generated CSS has the new mycolor classes.

I used https://bootstrap.build/app to check if what I am doing is correct or not. This builder does not require me to modify the 8 default colors to add a new one. So this is a bug in Wappler’s theme builder.

#2
#3

If you want to use another variable like $info in your own expressions, you will have to add it first and give it a value

#4

I think you are reading this wrong. I don’t want to use any custom $info variable.
Its the default $info that is throwing the error.
Can you please read the issue again? If something’s unclear, I can try to explain it better.

#5

Same apply - if you are using other variables in any expressions those have to be defined first.

#6

But I am not using any other variables. All default variables are already defined.

#7

Hi @George. Did you get a chance to look at the bug again?

#8

Could this be related to this thread?

#9

Thanks for the link @TomD. Looks like this is a very old issue.

theme error Capture
theme error Capture557×585 12 KB

Unfortunately, adding the color before theme-colors does not solve it for me. It still gives the same error as before.

#10

@George Bumping this bug report.
Will this bug be fixed? Or is there any improvement on this in BS5?

#11

Sorry I don’t see the error here, is it still the same? I can’t really reproduce it

#12
#13

It’s still same.

Can you share a screen shot of your advanced panel?

#14

image

just remember that you have to define all variable names used so also $cyan in your case

#15

Can you please try to set this value and see if the error comes up. I am not using a variable here… But a direct value. Is that not allowed?

#16

Again if you use any other sass variable, even if it is defined by bootstrap like $primary - you have to define it again

#17

I tried adding the variable here:
image

But I don’t want to change the value. Without changing the value it does not accept it as “re-defined” like you say it has to be. I don’t wish to change the default bootstrap colours.
What do you suggest I should do in this case?

#18

@George Can you please take a look at the last reply?

#19

Don’t think this behaviour is going to change anytime soon.
Closing this for now.