DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExtreme v22.1正式版下載

在上文中（點(diǎn)擊這里回顧>>），我們?yōu)榇蠹医榻B了如何開始使用DevExtreme內(nèi)置的主題生成器，在本文中我們將繼續(xù)為大家介紹如何使用這個主題生成器來自定義應(yīng)用程序主題。

自定義主題

開發(fā)人員創(chuàng)建或?qū)胫黝}后，ThemeBuilder會導(dǎo)航到可以自定義主題的主視圖。

主視圖由以下元素組成：

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

延遲定制

若要稍后返回自定義，請?zhí)崆氨４嬷黝}的元數(shù)據(jù)。單擊工具欄上的Export來打開Theme Export彈出對話框，在這個對話框中，輸入配色方案名稱。

跳轉(zhuǎn)到Choose Format步驟，然后單擊Download Metadata File按鈕。

一個包含元數(shù)據(jù)的.json文件保存在計算機(jī)上，開發(fā)人員可以選擇復(fù)制元數(shù)據(jù)。

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

導(dǎo)出生成的主題

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

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

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

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

最后，注冊導(dǎo)出的主題，如果導(dǎo)出了一個顏色板，請按照顏色板中的描述應(yīng)用它。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論