cg/hejiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

```

Browse Source 
refactor(theme): 统一应用深色主题替换日夜切换功能

- 移除白天主题相关样式定义和切换逻辑
- 将主题系统固定为深色主题（琥珀夜光）
- 更新页面背景色设置为统一深色
- 简化导航栏和标签栏主题应用逻辑
- 移除白天主题的颜色变量和样式类
- 更新主题混入文件以支持单一深色主题
```
This commit is contained in:
cg
2026-08-16 22:45:10 +08:00
parent 9fa22d5d1b
commit 06ec10cf10
5 changed files with 34 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+3 -3
View File
@@ -26,12 +26,12 @@ export default {
console.log('App Hide')
},
methods: {
// 初始化并应用日夜主题
// 初始化并应用深色主题
initTheme() {
const theme = getCurrentTheme()
applyTheme(theme)
// 同步设置page元素背景色
const bgColor = theme === 'light' ? '#F2F5F9' : '#0B0B14'
// 同步设置page元素背景色（统一深色主题）
const bgColor = '#0B0B14'
try {
uni.setBackgroundColor({
backgroundColor: bgColor,
common/theme-mixin.js
+6 -6
View File
@@ -1,8 +1,8 @@
/* 碰盏日记 - 主题混入 (Theme Mixin)
* 每个页面混入此mixin，自动在onShow时刷新日夜主题
* 全局统一深色主题（琥珀夜光），已移除白天主题
* 页面根视图需绑定 :class="themeClass"
*/
import { getCurrentTheme, applyTheme } from './utils'
import { applyTheme } from './utils'
export default {
data() {
@@ -19,10 +19,10 @@ export default {
},
methods: {
_refreshTheme() {
const theme = getCurrentTheme()
this.currentTheme = theme
this.themeClass = theme === 'light' ? 'theme-light' : 'theme-dark'
applyTheme(theme)
// 固定深色主题
this.currentTheme = 'dark'
this.themeClass = 'theme-dark'
applyTheme('dark')
}
}
}
common/utils.js
+23 -38
View File
@@ -278,13 +278,10 @@ export function calcLocalStreak(records) {
}
/**
* 主题系统：日夜自动切换
* 白天：6:00-16:00 → light
* 夜间：16:00-6:00 → dark
* 主题系统：全局统一使用深色主题（琥珀夜光），已移除白天主题
*/
export function getCurrentTheme() {
const hour = new Date().getHours()
return (hour >= 6 && hour < 16) ? 'light' : 'dark'
return 'dark'
}
export function applyTheme(theme) {
@@ -296,15 +293,11 @@ export function applyTheme(theme) {
}
export function applyNavBarTheme(theme) {
const colors = {
dark: { backgroundColor: '#0B0B14', frontColor: '#ffffff' },
light: { backgroundColor: '#F2F5F9', frontColor: '#000000' }
}
const c = colors[theme] || colors.dark
// 仅深色主题
try {
uni.setNavigationBarColor({
frontColor: c.frontColor,
backgroundColor: c.backgroundColor,
frontColor: '#ffffff',
backgroundColor: '#0B0B14',
animation: { duration: 300, timingFunc: 'easeInOut' }
})
} catch (e) {}
@@ -336,21 +329,13 @@ export function applyTabBarTheme(theme) {
const currentPath = pages[pages.length - 1].route
if (!tabBarPages.includes(currentPath)) return
const styles = {
dark: {
color: '#9494AC',
selectedColor: '#E8A838',
backgroundColor: '#151520',
borderStyle: 'black'
},
light: {
color: '#9BA8BA',
selectedColor: '#E09B2D',
backgroundColor: '#FFFFFF',
borderStyle: 'white'
}
// 仅深色主题
const s = {
color: '#9494AC',
selectedColor: '#E8A838',
backgroundColor: '#151520',
borderStyle: 'black'
}
const s = styles[theme] || styles.dark
try {
uni.setTabBarStyle({
color: s.color,
@@ -365,19 +350,19 @@ export function applyTabBarTheme(theme) {
}
export function getThemeColors(theme) {
const isDark = theme !== 'light'
// 仅保留深色主题色值（参数保留以兼容既有调用）
return {
textPrimary: isDark ? '#FFFFFF' : '#16233C',
textSecondary: isDark ? '#C0C0D2' : '#5D6B82',
textTertiary: isDark ? '#9494AC' : '#9BA8BA',
amber: isDark ? '#E8A838' : '#E09B2D',
bgBase: isDark ? '#0B0B14' : '#F2F5F9',
bgCard: isDark ? '#1A1A28' : '#FFFFFF',
cardGradStart: isDark ? '#1A1510' : '#F8FAFD',
cardGradEnd: isDark ? '#0D0B08' : '#EFF3F9',
borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(224,155,45,0.18)',
bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(22,40,70,0.04)',
emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(224,155,45,0.10)'
textPrimary: '#FFFFFF',
textSecondary: '#C0C0D2',
textTertiary: '#9494AC',
amber: '#E8A838',
bgBase: '#0B0B14',
bgCard: '#1A1A28',
cardGradStart: '#1A1510',
cardGradEnd: '#0D0B08',
borderSubtle: 'rgba(232,168,56,0.15)',
bgPlaceholder: 'rgba(255,255,255,0.03)',
emojiBg: 'rgba(232,168,56,0.08)'
}
}
pages/index/index.vue
+1 -1
View File
@@ -697,7 +697,7 @@ export default {
padding: $sp-md $sp-xl $sp-xl;
color: $text-primary;
border-radius: $radius-xl;
/* 背景层次：底部卡片色 + 顶部琥珀光晕，日夜主题自适应 */
/* 背景层次：底部卡片色 + 顶部琥珀光晕 */
background:
radial-gradient(120% 60% at 50% 0%, var(--amber-glow, rgba(232, 168, 56, 0.15)) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-elevated, #28283E) 0%, var(--bg-card, #1A1A28) 55%);
uni.scss
+1 -48
View File
@@ -1,7 +1,7 @@
/* ==========================================
* 碰盏日记 - 设计令牌 (Design Tokens)
* 设计概念: 琥珀夜光 Amber Night / 暖白琥珀 Warm Day
* 支持日夜主题自动切换
* 全局统一深色主题（琥珀夜光）
* ========================================== */
/* --- 夜间主题（默认）--- */
@@ -51,53 +51,6 @@ page, .theme-dark {
--tab-bar-color: #9494AC;
}
/* --- 白天主题（清透玻璃感 Crystal Day）--- */
.theme-light {
--bg-base: #F2F5F9;
--bg-card: #FFFFFF;
--bg-card-alt: #EEF2F7;
--bg-elevated: #E4EAF2;
--amber: #E09B2D;
--amber-light: #F2B84B;
--amber-deep: #C67F15;
--amber-glow: rgba(224, 155, 45, 0.10);
--coral: #F0655A;
--mint: #34B88C;
--lavender: #7C82A8;
--text-primary: #16233C;
--text-secondary: #5D6B82;
--text-tertiary: #9BA8BA;
--text-on-amber: #FFFFFF;
--border-subtle: rgba(22, 40, 70, 0.08);
--border-faint: rgba(22, 40, 70, 0.06);
--border-micro: rgba(22, 40, 70, 0.04);
--border-dashed: rgba(22, 40, 70, 0.12);
--border-active: rgba(22, 40, 70, 0.10);
--divider-color: rgba(22, 40, 70, 0.06);
--bg-subtle: rgba(22, 40, 70, 0.02);
--bg-hover: rgba(22, 40, 70, 0.04);
--bg-input: rgba(22, 40, 70, 0.04);
--btn-shimmer: rgba(255, 255, 255, 0.45);
--overlay-mask: rgba(10, 20, 40, 0.4);
--overlay-modal: rgba(10, 20, 40, 0.5);
--shadow-sm: 0 4rpx 16rpx rgba(30, 60, 110, 0.07);
--shadow-md: 0 8rpx 32rpx rgba(30, 60, 110, 0.10);
--shadow-amber: 0 8rpx 32rpx rgba(224, 155, 45, 0.22);
--shadow-lg: 0 16rpx 48rpx rgba(30, 60, 110, 0.14);
--card-gradient-start: #F8FAFD;
--card-gradient-end: #EFF3F9;
--nav-bar-bg: #F2F5F9;
--nav-bar-text: black;
--tab-bar-bg: #FFFFFF;
--tab-bar-color: #9BA8BA;
}
/* --- 色彩系统（SCSS变量桥接到CSS变量，含暗色回退值）--- */
$bg-base: var(--bg-base, #0B0B14);
$bg-card: var(--bg-card, #1A1A28);