需求：
因为iosapp 要求适配暗⿊模式，APP内嵌H5页⾯也需要相应的暗⿊适配，做到根据进⼊页⾯时app参数，或者页⾯内⼀键切换主题风格
解决⽅案
已⾸次进⼊H5时接收APP传参判断，主题风格 （暗⿊模式，正常模式，）为例
⼀、通过app传参 dark 字段判断是否为暗⿊模式（主题风格）
在app.vue onLaunch 中加⼊判断
if(this.user &&this.user.dark ==='1'){
Vue.prototype.datatheme ='dark'
window.document.documentElement.setAttribute('data-theme','dark')
}else{
Vue.prototype.datatheme ='light'
window.document.documentElement.setAttribute('data-theme','light')
}
在app.vue 底部引⼊base.scss
<style lang="scss">
@import"styles/base.scss";
</style>
⼆、创建_themes.scss⽂件
$themes:(
light:(
white: #fff,
black: #27292d,
// 主⾊调1
main-one: #00A54F,
// 主⾊调2
main-two: #1B88EE
),
dark:(
white: #27292d,
black: #fff,
// 主⾊调1
main-one: #00A54F,
/
/ 主⾊调2
main-two: #1B88EE
)
)
三、创建base.scss⽂件
@import"./_themes.scss";// 引⼊_themes.scss
//遍历主题map汽车方向盘打法
@mixin themeify {
@each $theme-name,
$theme-map in $themes {
//!global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
//这步是判断html的data-theme的属性值 #{}是sass的插值表达式
//& sass嵌套⾥的⽗容器标识 @content是混合器插槽，像vue的slot
[data-theme="#{$theme-name}"]&{悬疑片
@content;
@content;
}
}
}
//声明⼀个根据Key获取颜⾊的function
@function themed($key){
@return map-get($theme-map, $key);
}
//获取背景透明度
@mixin background($color){
@include themeify {
background:themed($color)
}
}
@mixin background_imp($color){
@include themeify {
background:themed($color)!important
}
}
//获取背景颜⾊
@mixin background_color($color){
@include themeify {
background-color:themed($color)
}
}
@mixin background_color_imp($color){
@include themeify {
background-color:themed($color)!important
}
}
//获取字体颜⾊
@mixin font_color($color){
@include themeify {
color:themed($color);
}
}王牌对王牌还珠格格剧组哪一期
@mixin font_color_imp($color){
@include themeify {
color:themed($color)!important
}
}
//获取边框颜⾊
@mixin border_color($color){
@include themeify {
border-color:themed($color)
}
}
@mixin border_color_imp($color){
@include themeify {
border-color:themed($color)!important
}
}
注； ⽅式创建了两种， 考虑到 !important，⾃⼰按需使⽤
四、scss中使⽤
// 字体颜⾊
.color-white {
@include font_color_imp("white")
}
.color-black {
@include font_color_imp("black")
}
/
/ 边框颜⾊
.line-color {
周一围老婆@include border_color("divider")
}
// 背景颜⾊
.bg-black {
@include background_color_imp("black")
}
.bg-white {
@include background_color_imp("white")
}
王珞丹和李光洁以上即为vue切换主题风格的实现原理
五、页⾯中判断是否暗⿊模式
在app.vue中已经全局定义了变量 datatheme （Vue.prototype.datatheme = ‘dark’）
页⾯中只需 使⽤ this.datatheme 即可取到风格参数
:background="datatheme === 'light' ? '#fff' : '#27292d'"
六，头部导航栏适配主题风格
定义全局⽅法，进⼊页⾯后设置头部导航栏字体颜⾊及背景颜⾊
function setNavigation(){
s.user.dark ==='0'){
uni.setNavigationBarColor({
frontColor:'#000000',
backgroundColor:'#ffffff'
})
世界名胜}else{
uni.setNavigationBarColor({
frontColor:'#ffffff',
backgroundColor:'#27292d'
})
}
}
OK。完成
学习中遇到问题写博客记录下过程，新⼿有不对的地⽅欢迎指教，QQ：1075606525 ，欢迎⼤家私聊，⼀起学习⼀起进步
发布评论