Telerik DevCraft包含一個完整的產品棧來構建您下一個Web、移動和桌面應用程序。它使用HTML和每個.NET平臺的UI庫，加快開發速度。Telerik DevCraft提供最完整的工具箱，用于構建現代和面向未來的業務應用程序。

ThemeBuilder是一個web應用程序，它作為所有組件的一個完整的所見即所得編輯器，允許開發人員或設計人員深入并自定義每個組件的細節——而不涉及任何CSS或Sass。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

Step 1：設置一個新的ThemeBuilder項目

開發者首先需要創建一個新的ThemeBuilder項目，跳轉到ThemeBuilder儀表板，登錄或設置一個Telerik 帳戶，然后選擇“Create New Project”：

在下一頁中，開發者需要為項目提供一個名稱，并選擇一個主題作為它的基礎。可以從以下這些常用的設計系統——Bootstrap、Material或fluent，如果開發者想創建一些全新的東西，建議從Kendo UI主題開始，并從那里進行自定義。

Step 2：設計

這一步取決于研發團隊是否有專業的設計師，并且作為交接的一部分從他們哪里接收設計更改，還是開發者自己處理設計。

如果團隊中有設計師，從Figma UI套件開始是最有益的，這些套件在Figma文件中為設計師提供了每個組件的完整分解，原生設計風格。Figma套件也有各種主題(Kendo Default, Bootstrap, Material和Fluent)，所以如果開發者正在使用其中的一個設計系統，可以從這一步開始同步。

 在這種情況下，開發人員可能會被邀請查看包含其設計更新的Figma Kit文件，并且開發人員可以使用ThemeBuilder Pro更容易地將這些轉換為代碼。

如果開發人員自己處理設計，可以直接跳轉到ThemeBuilder！因為ThemeBuilder使用WYSIWYG方法進行編輯，開發者對組件所做的任何更改都將立即反映在實時預覽面板中。

Step 3：創建自定義主題

建議從對主題進行高級更新開始，使用左側“Theme Styles”側欄中的變量，這些更改將立即應用于整個組件庫，所以開發者可以快速更改顏色，排版和邊界半徑值。

要添加一個新變量，只需點擊“Colors”標題右側的“+”按鈕，然后系統會提示開發者為變量命名并設置基本值（稍后可以更改），開發者創建的任何新變量都會添加到Theme Styles邊欄底部的“Other”標題下。

Step 4：預覽和編輯組件

一旦開發者設置了這些值，可以開始探索這些設置在所有組件中的外觀，使用實時預覽。確保與所有組件交互，這樣開發者就可以檢查樣式在各種交互狀態下是如何工作的。

如果開發者看到任何看起來不太對的，或者只是一些想調整的高級列表中不包括的東西(如填充或空白，更細粒度的文本設置，對齊和對齊，輪廓，效果等)，那么新的高級編輯面板將引導你完成這些選項。由于采用原子設計方法，您對按鈕所做的更改(例如)將自動反映在使用或包含按鈕工具欄、按鈕組、輸入、下拉列表等的每個組件中。

Step 5：分享

通過實時編輯組件進行協作，或輕松地將您的工作發送給批準。若要共享ThemeBuilder項目，請單擊導航欄右上方的Share按鈕。這將打開一個模型，允許您通過電子郵件地址將其他隊友添加到項目中。如果需要，開發人員還可以從這里撤銷訪問權限。

此功能還將允許您跨產品團隊共享，這樣每個人都可以導出相同的CSS和Sass文件，從而在整個應用程序套件中實現真正一致的外觀和感覺。

Step 6：導出

說到導出，開發人員可以通過單擊導航欄右上角的“Export”按鈕來開始主題導出。

Step 7：集成到應用程序中

將新主題集成到現有應用程序中就像下載文件一樣簡單！

下載的zip文件有兩個主文件夾：“css”和“sass”，它們都嵌套在“dist”父文件夾中。根據您在應用程序中使用的內容，選擇需要的一個，這就像拖放文件一樣簡單！在不到30秒的時間內，您可以應用導出的ThemeBuilder樣式，并在應用程序中的每個Telerik 和Kendo UI組件中看到它們，而無需編寫一行Sass或CSS!