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!