Cannot pass bootstrap variables to customize css

I'm using syncfusion with a theme that has two styles: dark and light, it switches on clientside, so I'm trying to assign the bootstrap variables given in syncfusion to css vars like this:

// default
:root {
    --sanad-blue: #20c997;
}
// pass to syncfusion
$blue: var(--sanad-blue);

.theme-dark {
    --sanad-blue: red;
}

but the minute I run the sass command, I get this error:

 $color2: var(--sanad-blue) is not a color.
 @return mix($white, $color, $percentage);

...

So the question is, do I have to produce multiple syncfusion css file?


3 Replies

MI Mohamed Imran Thamin Ansari Syncfusion Team March 5, 2024 06:20 AM UTC

Hi Amal,


Thank you reach out to us. We sincerely apologize for the delay caused.

We've validated the scenario you have reported regarding assigning the Bootstrap variables given in Syncfusion to CSS variables. We would like to convey that the Bootstrap theme we are providing in our system does not currently incorporate CSS variable support for color customization. Also we would like to inform you that currently we are providing this support only for our material3 theme. For more information kindly refer to our documentation on material3 Theme.

Regarding the theme switching between light and dark modes, we recommend utilizing our Bootstrap dark theme for dark mode, as it is specifically designed to support this functionality.

To assist you further, we have created a sample that demonstrates this approach. In the sample, the <link> tag containing id theme is placed in the <head> section, with the light theme initially applied. Upon a change event, such as switching to a dark theme, rel='nofollow' href attribute of the <link> tag is manipulated, ensuring theme switching dynamically to dark without any overriding.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Themeswitch507244880

 

Additionally, we have also considered this feature (Need to provide CSS variable support for bootstrap theme) at our end, and it's available in our queue. Usually, Syncfusion will plan and implement the feature based on feature rank, customer request count, and volume Wishlist. We will implement and include this feature in any one of our upcoming releases.

 

You can track this feature status in the below feedback.

 

Feedback:https://www.syncfusion.com/feedback/51466/need-to-provide-css-variable-support-for-bootstrap-theme

If you require further assistance or have any additional questions, please feel free to reach out to us. We're here to help.


Regards,
Mohamed Imran T



DE Dev April 22, 2024 08:21 AM UTC

Hello,

I have the same issue and i don't have access in the feedback  https://www.syncfusion.com/feedback/51466/need-to-provide-css-variable-support-for-bootstrap-theme.

So i can't track the feature status.



MI Mohamed Imran Thamin Ansari Syncfusion Team April 22, 2024 12:17 PM UTC

Hi Dev,

Thank you for bringing this to our attention.

 

We have made necessary changes to the feedback so that it is publicly accessible, so you should now be able to access it and track the feature status without any issues.

 

If you have any further questions or need assistance, feel free to reach out to us.

 

Best regards,

Mohamed


Loader.
Up arrow icon