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:
Yuzhiran Dev
2026-07-11 01:39:20 +08:00
parent b3d68841db
commit 66ac576082
3 changed files with 50 additions and 16 deletions
+26 -2
View File
@@ -27,7 +27,7 @@ function initTheme() {
function applyTheme(theme) { function applyTheme(theme) {
try { try {
// H5 环境直接操作 document // H5 环境操作 document class
const root = document.documentElement const root = document.documentElement
if (theme === 'dark') { if (theme === 'dark') {
root.classList.add('theme-dark') root.classList.add('theme-dark')
@@ -37,7 +37,31 @@ function applyTheme(theme) {
root.classList.add('theme-light') root.classList.add('theme-light')
} }
} catch (e) { } 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> </script>
+10 -10
View File
@@ -18,21 +18,21 @@
{"path": "pages/profile/profile", "style": {"navigationBarTitleText": "我的", "navigationStyle": "custom"}} {"path": "pages/profile/profile", "style": {"navigationBarTitleText": "我的", "navigationStyle": "custom"}}
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "black",
"navigationBarTitleText": "宇之然AI维度", "navigationBarTitleText": "宇之然AI维度",
"navigationBarBackgroundColor": "#050508", "navigationBarBackgroundColor": "#f5f5f7",
"backgroundColor": "#050508", "backgroundColor": "#f5f5f7",
"backgroundColorTop": "#050508", "backgroundColorTop": "#f5f5f7",
"backgroundColorBottom": "#050508", "backgroundColorBottom": "#f5f5f7",
"app-plus": { "app-plus": {
"background": "#050508" "background": "#f5f5f7"
} }
}, },
"tabBar": { "tabBar": {
"color": "rgba(255,255,255,0.25)", "color": "rgba(0,0,0,0.35)",
"selectedColor": "#b388ff", "selectedColor": "#7c4dff",
"backgroundColor": "#08080f", "backgroundColor": "#ffffff",
"borderStyle": "black", "borderStyle": "white",
"list": [ "list": [
{"pagePath": "pages/index/index", "text": "探索"}, {"pagePath": "pages/index/index", "text": "探索"},
{"pagePath": "pages/chat/chat", "text": "问答"}, {"pagePath": "pages/chat/chat", "text": "问答"},
@@ -99,9 +99,19 @@ function applyTheme(theme) {
root.classList.remove('theme-dark') root.classList.remove('theme-dark')
root.classList.add('theme-light') root.classList.add('theme-light')
} }
} catch (e) { } catch (e) {}
// mini-program 忽略 // 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() { function showAbout() {