DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExtreme v22.1正式版下載

在上文中（點擊這里回顧>>），我們為大家介紹了如何開始使用DevExtreme內置的主題生成器，在本文中我們將繼續為大家介紹如何使用這個主題生成器來自定義應用程序主題。

自定義主題

開發人員創建或導入主題后，ThemeBuilder會導航到可以自定義主題的主視圖。

主視圖由以下元素組成：

• Settings list（左側菜單）
  包含所有的自定義設置，分為組：
  • Basic Settings - 多個UI組件使用的設置
  • Typography Settings - 配置字體的設置
  • 特定的UI組件或UI組件組 - 單個UI組件或UI組件組使用的設置
    設置列表還包含一個搜索框，用于搜索UI組件或UI組件組。
• 工具欄(上面板)
  包含主題切換器和 Import、Export按鈕。
• 預覽區
  在自定義主題中顯示DevExtreme內組件，當開發人員更改設置或切換主題時，會自動更新。

延遲定制

 若要稍后返回自定義，請提前保存主題的元數據。單擊工具欄上的Export來打開Theme Export彈出對話框，在這個對話框中，輸入配色方案名稱。

跳轉到Choose Format步驟，然后單擊Download Metadata File按鈕。

一個包含元數據的.json文件保存在計算機上，開發人員可以選擇復制元數據。

要繼續自定義，請單擊工具欄上的Import，在調用的Theme Import對話框中，單擊Upload File并選擇前面導出的.json文件。如果開發人員復制了元數據，而不是將其導出為.json文件，請將其粘貼到文本區，然后單擊上傳元數據：

導出生成的主題

單擊Export來打開Theme Export彈出對話框，在這個對話框中，輸入配色方案的名稱。如果要將主題導出為顏色樣本，請選中復選框，開發人員還可以刪除到外部資源的鏈接，例如字體。

在下一步中，選擇要支持的主題的組件。

單擊 Download CSS File來將文件命名為dx.[base-theme-name].[color-scheme-name].css （例如dx.material.brown.css）保存到計算機上。或者開發人員可以下載帶有CSS文件和圖標的存檔，或者復制CSS。

開發人員自定義主題使用的圖標和字體應放置在主題旁邊，當使用npm時，可以在node_modules/devextreme/dist/css中找到圖標和字體文件夾。在其他情況下，這些文件夾位于具有預定義主題的目錄中，將它們復制到包含主題的目錄中。

最后，注冊導出的主題，如果導出了一個顏色板，請按照顏色板中的描述應用它。

DevExpress技術交流群6：600715373      歡迎一起進群討論