8e02088799
V22.1.34 Source Updated |
||
---|---|---|
ThemeStudio | ||
README.md |
README.md
Theme studio
Theme Studio for Syncfusion EJ2 and Blazor Components, can be used to customize a new theme from an existing theme. It does not support data visualization controls such as Chart, Diagram, Gauge, Range Navigator, and Maps.
The Syncfusion EJ2 and Blazor 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 Syncfusion EJ2 and Blazor components. The common variable list is handled inside the Theme Studio application for customizing theme-based colors.
Steps to run the Theme Studio application
- Clone this theme studio repository.
- Open the command prompt and navigate to the cloned theme studio folder location.
- Then navigate to the
NodeJs
folder, and run thenpm install
command for install the node_modules. - Then run the
npm start
command to run the nodejs application, now localhost server will be started. - After that, open the
ThemeStudio.csproj
file in Visual Studio and run the application (or) you can open the command prompt and run thedotnet run
command. - Now, the Theme Studio application will be opened in the browser.
Steps to download the themes
- Open the Theme Studio site.
- Select the needed components, themes, custom color & font and click the download option.
- By clicking the download option, the popup will opens and it asks the
Include compatibility css
option. If you need the EJ1 and EJ2 themes compatibility, select theInclude compatibility css
option checkbox and download the themes.
Downloaded themes folder structure
If you're downloaded the Fluent theme in Theme Studio with compatibility css, the downloaded file will be in the below structure.
Fluent Theme
| fluent.scss
│ fluent.css
│ fluent.min.css
| settings.json
|
│__ compatibility
│ │ fluent.scss
│ │ fluent.css
│ │ fluent.min.css
│ │
│ │__ individual-scss
│ (Component wise individual SCSS files)
|
|__ individual-scss
(Component wise individual SCSS files)
The individual-scss
folder contains the selected component wise scss files separately. You can use the individual theme SCSS file also by compiling it to CSS and referring it to your application.
The settings.json
file contains the selected component, theme and custom font & color details. You can also have option to import the settings.json
file in Theme Studio to download the themes with previously customized themes.