Custom Theme with Structural Changes Across All Components

[Goutham]

I would like to create a custom theme that can make structural changes to components, similar to how switching from Material 3 to Fluent changes not just the colors, but also the overall layout, padding, margins, and other css properties. The goal is for these modifications to apply across all components, even when they are used within other components, like buttons inside grids or calendars.

Is there a recommended approach for achieving this level of theme customization in your component library? In the theme studio, I can only modify colors, but not other aspects. You might suggest adding classes to override styles, but that only affects the individual component. If this component is used within another, those changes won’t be applied I'm using the grid as an example. If I customize the button, the changes should also apply to the buttons used within the grid Fluent theme

Material3 theme:

[Mohamed Imran Thamin Ansari]

Hi goutham,

Thank you for reaching out to us.

 

We have evaluated your query and understand that you are looking to customize not only the colors but also the layout, padding, margins, and other CSS properties of our components and to ensure a consistent appearance across your application. Currently, the theme studio offers only color customization, and structural changes like layout adjustments are not supported directly.

 

However, you can override the styles of individual components using custom classes that we provide for each component. Each component has a unique class prefixed with e-, which can be found in the "Styles and Appearance" section of each of our component documentation. It’s important to note that overriding the layout of each component may affect the overall UI appearance and could lead to conflicts in styling. Therefore, we are not recommending overriding the layouts of our controls.

 

Please let us know if you have any further questions, and we’ll be happy to assist you.

 

Best regards,
Mohamed

[Goutham]

Thank you for the update.

I understand your point, but we would like to customize the theme in the same way you do when switching between themes. For example, when you change from Fabric to Material3, taking a text box as an example, you adjust the border radius and border styles.

material3:

Fabric

Similarly, you modify other properties like padding, length, and width of elements when necessary. When you change the text box inside a grid, it adjusts accordingly.

In the same way, for touch and mouse selection, you increase the size of all components at once. This type of customization is what I’d like to implement in my project.

In conclusion, I would like to know the steps you follow when changing from one theme to another so that I can apply my custom values across all components.

[Mohamed Imran Thamin Ansari]

Hi Goutham,

 

Thank you for getting back to us.

 

We understand that you would like to apply theme customizations similar to those we perform when switching between themes in our components. Regarding this, we would like to provide some insights into Syncfusion styling. Syncfusion offers its own set of themes (i.e., Bootstrap, Material, etc.) for styling components. For each theme, we have adopted the official native appearance and have incorporated the necessary theme differences using custom class groups (prefixed e-) and variables, as mentioned in our previous response.

 

Similarly, you can override the required styles through the custom classes provided for each component. Since we use consistent and unique class names across our components, customization will be uniform throughout the application.

 

Note: For touch mode, we add a unique class called e-bigger in the root; through that, we will adjust the appearance of components when switching between touch and mouse modes.

 

 

Regards,
Mohamed