We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi,
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.
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:
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.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sassCompiler2090507190
Please let us know if you have any concerns.
Regards,
Bharat Ram H
