--- title: "Introducing Theme Studio for Essential JS 2" published_at: "2018-07-06T13:00:00+00:00" modified_at: "2024-11-21T12:54:46+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-theme-studio-for-syncfusion-essential-js-2-components" excerpt: "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..." taxonomy_category: - "ASP.NET MVC" - "Development" - "Essential JS 2" - "Essential Studio" - "Theme" - "UI" taxonomy_post_tag: - "2018 Volume 2" - "CSS" - "Essential JS 2" - "styles" - "Theme Studio" - "theming" - "UI" - "user interface" --- # Introducing Theme Studio for Essential JS 2 [Ajith R](https://www.syncfusion.com/blogs/author/ajith-r) ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2018/08/Tile_22bed502.png) 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. ![ThemeStudio preview](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-167.png) Figure 1: ThemeStudio preview ## Features and functionalities 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: - Customizing theme colors from the theme studio. - Filtering a specific list of components to style. - Download a customized theme. - Import previously changed settings into the theme studio. ### Customizing theme color from theme studio 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. - Navigate to the theme studio application at [https://ej2.syncfusion.com/themestudio/](https://ej2.syncfusion.com/themestudio/) - The theme studio application page can be divided into two sections: the components preview section on the left, and the theme customization section on the right. ![Components preview section and theme customization section](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-168.png) Figure 2: Components preview section and theme customization section - Click the color pickers in the theme customization section to select your desired colors. ![Color picker for changing the custom color](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-169.png) Figure 3: Color picker for changing the custom color - After selecting colors with the color pickers, the Essential JS 2 components will have the newly selected colors applied to them in the components preview section. ![Customized theme output](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-170.png) Figure 4: Customized theme output ### Filtering a specific list of components 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. - Click the **Filter** icon in the top right corner and select the components whose theme you want to customize. ![Filter option in the header](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-171.png) Figure 5: Filter option in the header - Click the **Apply** button in the Filter dialog. Now, only the selected components will be rendered in the components preview section. ![Filter dialog for selecting specific components](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-172.png) Figure 6: Filter dialog for selecting specific components - Now you can customize the colors in the theme customization section for the components you selected. ![Customized theme output for selected components](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-173.png) Figure 7: Customized theme output for selected components ### Download the customized theme You can download the custom styles after customizing the theme colors. Let’s look at the process of downloading styles in the theme studio. - Click the **Download** button in the top right corner. The Download dialog will open. ![Download button in the header](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-174.png) Figure 8: Download button in the header - Assign a theme name in the **File Name** field and click the **Download** button. If your application uses both Essential JS 1 and Essential JS 2 components, then select the ** Include compatibility CSS**check box before downloading the theme. This option will generate the custom theme for Essential JS 2 compatibility styles, which are compatible as Essential JS 1 styles. ![Download dialog for exporting customized theme](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-175.png) Figure 9: Download dialog for exporting customized theme - The downloaded styles will come as a zip file that contains SCSS and CSS files for the selected Essential JS 2 components. The current settings are stored in the settings.json file. ![Final output of customized theme files](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-176.png) Figure 10: Final output of customized theme files ### Import previously changed settings into 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. - Click the **Import** icon in the top right corner. ![Import option in the header](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-177.png) Figure 11: Import option in the header - The Import Theme dialog will open. Click the **Browse** button and select a ** settings.json** file you exported previously. ![Import dialog for importing settings.json file](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-178.png) Figure 12: Import dialog for importing settings.json file - Click the **Import** button. ![After importing settings.json file](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-179.png) Figure 13: After importing settings.json file - The stored data will be reflected in the theme studio application. Now you can change the theme colors based on your latest design and export the theme again. ![The previous customized settings restored](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-180.png) Figure 14: The previous customized settings restored - The exported file will contain your latest changes. You can just replace the older custom style with the newer one to refresh your application. ## Summary 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](https://ej2.syncfusion.com/themestudio/) any time, and refer to the [theming](https://ej2.syncfusion.com/documentation/appearance/theme/) and [themestudio](https://ej2.syncfusion.com/documentation/appearance/theme-studio/) 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](https://www.syncfusion.com/forums) or [Direct-Trac](https://www.syncfusion.com/support/directtrac/) . We are happy to assist you! *If you like this blog post, we think you’ll also like the following free e-books:* - *[JavaScript Succinctly](https://www.syncfusion.com/ebooks/javascript)* - *[W3.CSS Succinctly](https://www.syncfusion.com/ebooks/w3_css_succinctly)* - *[CSS3 Succinctly](https://www.syncfusion.com/ebooks/css3)*