【extjs6學習筆記】1.16 初始: 關於主題
打開app.json，裏面有主題設置
主題說明
|
theme-base |
這個包是所有其他主題的基礎主題，是唯一沒有父主題的主題。 它包含Ext JS組件和布局正常工作絕對必需的最低限度的一組CSS規則。 "theme-base"中的樣式規則在派生主題中不可配置。 您應該避免覆蓋由此主題創建的任何樣式規則。 |
|
theme-neutral |
theme-neutral擴展了"theme-base"，並且包含絕大多數可配置的風格規則。 可用於配置Ext JS組件外觀的大多數變量都在"theme-neutral"中定義。 這些是您的自定義主題可以覆蓋的變量。 |
|
theme-neptune |
現代(Modern)的沒有邊框(border)的主題，擴展"theme-neutral" |
|
theme-neptune-touch |
theme-neptune-touch是用於觸摸的主題. 繼承自 "theme-neptune"，這個主題包括在平板電腦上使用的"touch-sizing"包 |
|
theme-triton |
使用字體圖標的(font-icons)現代(Modern)主題. 繼承自 "theme-neptune" |
|
theme-crisp |
簡約主題。擴展"theme-neptune". |
|
theme-crisp-touch |
基於theme-crisp的觸摸主題。 擴展"theme-crisp"。 這個主題包括在平板電腦上使用的"touch-sizing"軟件包 |
|
theme-classic |
經典的藍色Ext JS主題。 擴展"theme-neutral" |
|
theme-gray |
灰色主題。擴展 "theme-classic". |
|
theme-aria |
輔助功能主題。 擴展"theme-neptune"。 這個主題包括"aria"包 |
來自 <http://docs.sencha.com/extjs/6.0.2/guides/core_concepts/theming.html>
創建自己的主題
在工作空間目錄下執行
sencha -sdk ext generate theme --extend theme-triton theme-cmcc
生成文件在工作空間目錄的ext/packages/theme-cmcc目錄下
應用
修改app.json文件
更改主題內容，只需運行sencha app watch並在URL中添加以下參數
?platformTags=fashion:true
修改
$base-color:dynamic(#122b3f);
$body-background-color:dynamic(#10364d);
效果：
說明：
背景看著沒起作用，其實是讓上層元素擋住了【修改panel.scss-->$panel-body-background-color:dynamic(transparent);可以解決】
參考：
http://docs.sencha.com/extjs/6.5.0/classic/Global_CSS.html
http://extjs.org.cn/node/762
【extjs6學習筆記】1.16 初始: 關於主題