devexpress customs theme 적용하기

https://js.devexpress.com/Documentation/20_1/Guide/Vue_Components/Create_a_DevExtreme_Application/

Create a DevExtreme Application: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress 20.1

Configure Themes

Switch the Theme

 

The DevExtreme Vue Template uses a main theme for the view content and an additional theme (color swatch) for the navigation menu. To switch to another theme, open the src\themes\metadata.base.json or src\themes\metadata.additional.json file and assign a theme name to the baseTheme field:

metadata.base.json

• {
• // ...
• "baseTheme": "material.blue.light",
• // ...
• }

You can find all theme names in the Predefined Themes help topic.

Run the following command to rebuild themes:

• npm run build-themes

Create a Custom Theme

 

You can use the DevExtreme ThemeBuilder to create custom themes based on predefined themes. Follow the steps below:

1. Import src\themes\metadata.base.json or src\themes\metadata.additional.json to the ThemeBuilder.
2. Customize the theme.
3. Export theme metadata to the initial file (see Postpone Customization).

Run the following command to rebuild themes:

• npm run build-themes