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. Image for the cookie policy date

Change default text color for all elements that uses black text


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.

1 Reply

BH BharatRam 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:

  1. Download the theme files from theme studio application.
  2. Then make the needed changes in the scss (bootstrap5.scss) file.
  3. Then compile the scss file and then you can use the compiled css in your application.

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.


Bharat Ram H

Live Chat Icon For mobile
Up arrow icon