fix: tabBar 跟随主题切换
pages.json 默认配色改为亮色(白底紫字) App.vue + settings.vue 用 uni.setTabBarStyle() 动态切换 暗色模式:黑底紫字(rgba(255,255,255,0.25) / #b388ff / #08080f) 亮色模式:白底紫字(rgba(0,0,0,0.35) / #7c4dff / #ffffff)
This commit is contained in:
@@ -27,7 +27,7 @@ function initTheme() {
|
||||
|
||||
function applyTheme(theme) {
|
||||
try {
|
||||
// H5 环境直接操作 document
|
||||
// H5 环境:操作 document class
|
||||
const root = document.documentElement
|
||||
if (theme === 'dark') {
|
||||
root.classList.add('theme-dark')
|
||||
@@ -37,7 +37,31 @@ function applyTheme(theme) {
|
||||
root.classList.add('theme-light')
|
||||
}
|
||||
} catch (e) {
|
||||
// 小程序环境:document 不存在,直接忽略
|
||||
// 小程序环境:document 不存在
|
||||
}
|
||||
// 小程序 tabBar 原生组件同步切换
|
||||
applyTabBarTheme(theme)
|
||||
}
|
||||
|
||||
function applyTabBarTheme(theme) {
|
||||
try {
|
||||
if (theme === 'dark') {
|
||||
uni.setTabBarStyle({
|
||||
color: 'rgba(255,255,255,0.25)',
|
||||
selectedColor: '#b388ff',
|
||||
backgroundColor: '#08080f',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
} else {
|
||||
uni.setTabBarStyle({
|
||||
color: 'rgba(0,0,0,0.35)',
|
||||
selectedColor: '#7c4dff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
// H5 环境 setTabBarStyle 可能不支持
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -18,21 +18,21 @@
|
||||
{"path": "pages/profile/profile", "style": {"navigationBarTitleText": "我的", "navigationStyle": "custom"}}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "宇之然AI维度",
|
||||
"navigationBarBackgroundColor": "#050508",
|
||||
"backgroundColor": "#050508",
|
||||
"backgroundColorTop": "#050508",
|
||||
"backgroundColorBottom": "#050508",
|
||||
"navigationBarBackgroundColor": "#f5f5f7",
|
||||
"backgroundColor": "#f5f5f7",
|
||||
"backgroundColorTop": "#f5f5f7",
|
||||
"backgroundColorBottom": "#f5f5f7",
|
||||
"app-plus": {
|
||||
"background": "#050508"
|
||||
"background": "#f5f5f7"
|
||||
}
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "rgba(255,255,255,0.25)",
|
||||
"selectedColor": "#b388ff",
|
||||
"backgroundColor": "#08080f",
|
||||
"borderStyle": "black",
|
||||
"color": "rgba(0,0,0,0.35)",
|
||||
"selectedColor": "#7c4dff",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "white",
|
||||
"list": [
|
||||
{"pagePath": "pages/index/index", "text": "探索"},
|
||||
{"pagePath": "pages/chat/chat", "text": "问答"},
|
||||
@@ -40,4 +40,4 @@
|
||||
{"pagePath": "pages/profile/profile", "text": "我的"}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -99,9 +99,19 @@ function applyTheme(theme) {
|
||||
root.classList.remove('theme-dark')
|
||||
root.classList.add('theme-light')
|
||||
}
|
||||
} catch (e) {
|
||||
// mini-program 忽略
|
||||
}
|
||||
} catch (e) {}
|
||||
// tabBar 同步
|
||||
applyTabBarTheme(theme)
|
||||
}
|
||||
|
||||
function applyTabBarTheme(theme) {
|
||||
try {
|
||||
if (theme === 'dark') {
|
||||
uni.setTabBarStyle({ color: 'rgba(255,255,255,0.25)', selectedColor: '#b388ff', backgroundColor: '#08080f', borderStyle: 'black' })
|
||||
} else {
|
||||
uni.setTabBarStyle({ color: 'rgba(0,0,0,0.35)', selectedColor: '#7c4dff', backgroundColor: '#ffffff', borderStyle: 'white' })
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function showAbout() {
|
||||
|
||||
Reference in New Issue
Block a user