提交 8233ce6f 编写于 作者: KK's avatar KK

更新多主题实现方式

上级 078624a5
......@@ -126,3 +126,30 @@
@startview-btn-offset-y: 82%;
@startview-btn-offset-x: 5%;
// 主题颜色
@default-active-color: @color-primary;
@default-text-color: #fff;
.theme(@default-active-color,@default-text-color);
// 主题公共函数
.theme(@theme-color,@text-color){
ion-tab-bar{
ion-tab-button{
--color-selected: @theme-color;
}
}
ion-button{
--background: @theme-color;
--color: @text-color;
}
.view-container {
ion-title{
--color: @text-color;
background-color: @theme-color;
}
}
}
.app-blue-theme{
.view-container {
// 标题样式
ion-title{
--color: @color-primary-contrast;
background-color: @color-primary;
}
}
// 底部菜单样式
ion-tab-bar{
ion-tab-button{
--color-selected: @color-primary;
}
}
ion-button{
--background: @color-primary;
--color:#fff;
}
@theme-color: @color-secondary;
@text-color: #fff;
.theme(@theme-color,@text-color);
}
\ No newline at end of file
.app-dark-blue-theme{
.view-container {
// 标题样式
ion-title{
--color: @color-primary-contrast;
background-color: #5475ab;
}
}
// 底部菜单样式
ion-tab-bar{
ion-tab-button{
--color-selected: #5475ab;
}
}
ion-button{
--background:#5475ab;
--color:#fff;
}
@theme-color:#5475ab;
@text-color: #fff;
.theme(@theme-color,@text-color);
}
\ No newline at end of file
.app-default-theme{
.view-container {
// 标题样式
ion-title{
--color: @color-primary-contrast;
background-color: @color-primary;
}
}
// 底部菜单样式
ion-tab-bar{
ion-tab-button{
--color-selected: @color-primary;
}
}
ion-button{
--background: @color-primary;
--color:#fff;
}
@theme-color: @color-primary;
@text-color: #fff;
.theme(@theme-color,@text-color);
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册