I'm trying to figure out how to change the default text color on all Syncfusion components that typically use black as text color, into something else. My client has a particular style guide that doesn't use black at all, and it's cumbersome to override each and every element with css targeting that differs between each component.
Is there a way to achieve this, or some idea I might have overlooked that could make this easier?
I thought the theme studio would support this, but it seems it only supports changing colors for text inside certain elements that use the primary/secondary theming, not most text content itself.
E.g. I would like every element in this picture (text, icons etc.), except for the primary/secondary elements, to all change from black to a different particular color.
BHBharatRam Harikrishnan Syncfusion Team January 14, 2023 10:36 AM UTC
Hi Sigurd Christensen,
The advanced mode support for the Bootstrap 5 theme is
not currently available in our Theme Studio application. To customize the text
color for content in the Bootstrap 5 theme, you can change the value in the
scss file. The Bootstrap 5 theme file contains all variables used in controls,
and we have separated the category for content-text color. This allows you to
easily change the color of text in your content by modifying the corresponding
variable. Please find the image below and the steps to compile the scss files.
Steps to compile the scss files:
the theme files from theme studio application.
make the needed changes in the scss (bootstrap5.scss) file.
compile the scss file and then you can use the compiled css in your
For your reference, we have created a simple example and
changed the content color to red and compiled the sample. Please find the image
and sample attached.