style: 深色模式改用微信官方配色 #191919,导航栏与页面背景统一
This commit is contained in:
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1 +1 @@
|
|||||||
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;border-top:3rpx dashed #a0c4ff;bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{background:#000;border-top-color:#5b8cff}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#a8a8a8}.tab-item.active .tab-label{color:#ff9a9e;font-weight:600}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
|
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;border-top:3rpx dashed #a0c4ff;bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{background:#191919;border-top-color:#5b8cff}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:600}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
|
||||||
Vendored
+6
-6
@@ -12,15 +12,15 @@
|
|||||||
"tabBarBorderStyle": "black"
|
"tabBarBorderStyle": "black"
|
||||||
},
|
},
|
||||||
"dark": {
|
"dark": {
|
||||||
"navBgColor": "#000000",
|
"navBgColor": "#191919",
|
||||||
"navTxtStyle": "white",
|
"navTxtStyle": "white",
|
||||||
"bgColor": "#000000",
|
"bgColor": "#191919",
|
||||||
"bgTxtStyle": "light",
|
"bgTxtStyle": "light",
|
||||||
"bgColorTop": "#000000",
|
"bgColorTop": "#191919",
|
||||||
"bgColorBottom": "#000000",
|
"bgColorBottom": "#191919",
|
||||||
"tabBarColor": "#a8a8a8",
|
"tabBarColor": "#999999",
|
||||||
"tabBarSelectedColor": "#ff7eb3",
|
"tabBarSelectedColor": "#ff7eb3",
|
||||||
"tabBarBgColor": "#000000",
|
"tabBarBgColor": "#191919",
|
||||||
"tabBarBorderStyle": "white"
|
"tabBarBorderStyle": "white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-7
@@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
.theme-dark {
|
.theme-dark {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: var(--bg-page, #000000);
|
background-color: var(--bg-page, #191919);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,18 +35,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.theme-dark {
|
.theme-dark {
|
||||||
--bg-page: #000000;
|
--bg-page: #191919;
|
||||||
--line-card: 3px dashed #5b8cff;
|
--line-card: 3px dashed #5b8cff;
|
||||||
--line-star: #5b8cff;
|
--line-star: #5b8cff;
|
||||||
--text-primary: #e8e8e8;
|
--text-primary: #e6e6e6;
|
||||||
--text-secondary: #a8a8a8;
|
--text-secondary: #999999;
|
||||||
--text-muted: #6f6f6f;
|
--text-muted: #737373;
|
||||||
--accent-pink: #ff7eb3;
|
--accent-pink: #ff7eb3;
|
||||||
--accent-blue: #5cadff;
|
--accent-blue: #5cadff;
|
||||||
--btn-gradient: linear-gradient(135deg, #ff7eb3 0%, #7a5cff 100%);
|
--btn-gradient: linear-gradient(135deg, #ff7eb3 0%, #7a5cff 100%);
|
||||||
--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
|
--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||||
--bg-input: #141414;
|
--bg-input: #232323;
|
||||||
--bg-card: #1a1a1a;
|
--bg-card: #232323;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page 基础字体 */
|
/* page 基础字体 */
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
/* 自定义组件样式隔离:两套主题配色在组件内自包含,不依赖全局 app.wxss */
|
/* 自定义组件样式隔离:两套主题配色在组件内自包含,不依赖全局 app.wxss */
|
||||||
.custom-tab-bar.theme-dark {
|
.custom-tab-bar.theme-dark {
|
||||||
background: #000000;
|
background: #191919;
|
||||||
border-top-color: #5b8cff;
|
border-top-color: #5b8cff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.custom-tab-bar.theme-dark .tab-label {
|
.custom-tab-bar.theme-dark .tab-label {
|
||||||
color: #a8a8a8;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item.active .tab-label {
|
.tab-item.active .tab-label {
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ export function useStatusBar(resolvedTheme: 'light' | 'dark', options: UseStatus
|
|||||||
const apply = useCallback(() => {
|
const apply = useCallback(() => {
|
||||||
const isDarkText = mode === 'dark' || (mode === 'auto' && resolvedTheme === 'light')
|
const isDarkText = mode === 'dark' || (mode === 'auto' && resolvedTheme === 'light')
|
||||||
const frontColor = isDarkText ? '#000000' : '#ffffff'
|
const frontColor = isDarkText ? '#000000' : '#ffffff'
|
||||||
const bgColor = isDarkText ? '#ffffff' : '#000000'
|
const bgColor = isDarkText ? '#ffffff' : '#191919'
|
||||||
|
|
||||||
Taro.setNavigationBarColor({ frontColor, backgroundColor: bgColor })
|
Taro.setNavigationBarColor({ frontColor, backgroundColor: bgColor })
|
||||||
// 同步页面背景色,确保自定义导航区(状态栏下方、胶囊按钮区域)跟随主题,
|
// 同步页面背景色,确保自定义导航区(状态栏下方、胶囊按钮区域)跟随主题,
|
||||||
|
|||||||
+6
-6
@@ -12,15 +12,15 @@
|
|||||||
"tabBarBorderStyle": "black"
|
"tabBarBorderStyle": "black"
|
||||||
},
|
},
|
||||||
"dark": {
|
"dark": {
|
||||||
"navBgColor": "#000000",
|
"navBgColor": "#191919",
|
||||||
"navTxtStyle": "white",
|
"navTxtStyle": "white",
|
||||||
"bgColor": "#000000",
|
"bgColor": "#191919",
|
||||||
"bgTxtStyle": "light",
|
"bgTxtStyle": "light",
|
||||||
"bgColorTop": "#000000",
|
"bgColorTop": "#191919",
|
||||||
"bgColorBottom": "#000000",
|
"bgColorBottom": "#191919",
|
||||||
"tabBarColor": "#a8a8a8",
|
"tabBarColor": "#999999",
|
||||||
"tabBarSelectedColor": "#ff7eb3",
|
"tabBarSelectedColor": "#ff7eb3",
|
||||||
"tabBarBgColor": "#000000",
|
"tabBarBgColor": "#191919",
|
||||||
"tabBarBorderStyle": "white"
|
"tabBarBorderStyle": "white"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import Taro from '@tarojs/taro'
|
|||||||
|
|
||||||
/** 实际生效主题对应的窗口/页面背景色 */
|
/** 实际生效主题对应的窗口/页面背景色 */
|
||||||
export function themePageColor(theme: 'light' | 'dark'): string {
|
export function themePageColor(theme: 'light' | 'dark'): string {
|
||||||
return theme === 'dark' ? '#000000' : '#ffffff'
|
return theme === 'dark' ? '#191919' : '#ffffff'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user