Syncfusion is excited to announce that the theme studio for Essential JS 2 components is available now!
Previously, you may have experienced some difficulty changing a specific theme-based color after integrating Essential JS 2 components in an application. Now, you no longer need additional custom CSS style integrations to customize the theme color. We have built a new tool that can customize the Essential JS 2 component styles and generate them as a CSS file for your application. You can just download the styles and use them directly in your application to apply custom themes.
Figure 1: ThemeStudio preview
Let’s take a deeper look into the theme studio functionalities and what they can really do with Essential JS 2 components. We’ll look at the following topics:
The Essential JS 2 style themes are developed under the SCSS environment. Each theme has a unique common variable list. When you change the common variable color code value, it will reflect in all the Essential JS 2 components. All the Essential JS 2 component styles are derived from these theme-based common variables.
This common variable list is handled inside the theme studio application for customizing theme-based colors. We have greatly simplified theming in Essential JS 2 by allowing only essential colors to be changed; for example, only accent and primary variables are integrated in the theme studio.
Let’s see the process of customizing a theme in the theme studio.
Using the theme studio, you can apply custom themes to a list of specific components. This option is useful when you have integrated a selective list of Essential JS 2 components in your application. The theme studio will filter the selected components and customize the final output for those components’ styles alone, reducing the final output file size. Let’s look at the filtering process in the theme studio.
You can download the custom styles after customizing the theme colors. Let’s look at the process of downloading styles in the theme studio.
When you want to change your application theme and UI design in the future, you won’t need to customize the Essential JS 2 components from scratch in the theme studio. Just import the old settings.json file to review and update your stored settings in the theme studio application.
Let’s check out the process of importing themes in the theme studio.
In this blog, we have learned how to customize the Essential JS 2 theme styles in the theme studio application and how to use its main functionalities. Feel free to use the theme studio application any time, and refer to the theming and themestudio documentation for more details about Essential JS 2 theming and its customization.
If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!
If you like this blog post, we think you’ll also like the following free e-books: