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
How to reproduce
Go to theme manager. Click advanced. Select theme colors
options.
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.