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) {
|
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>
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user