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
+3 -3
View File
@@ -26,12 +26,12 @@ export default {
console.log('App Hide') console.log('App Hide')
}, },
methods: { methods: {
// 初始化并应用日夜主题 // 初始化并应用深色主题
initTheme() { initTheme() {
const theme = getCurrentTheme() const theme = getCurrentTheme()
applyTheme(theme) applyTheme(theme)
// 同步设置page元素背景色 // 同步设置page元素背景色(统一深色主题)
const bgColor = theme === 'light' ? '#F2F5F9' : '#0B0B14' const bgColor = '#0B0B14'
try { try {
uni.setBackgroundColor({ uni.setBackgroundColor({
backgroundColor: bgColor, backgroundColor: bgColor,
+6 -6
View File
@@ -1,8 +1,8 @@
/* 碰盏日记 - 主题混入 (Theme Mixin) /* 碰盏日记 - 主题混入 (Theme Mixin)
* 每个页面混入此mixin,自动在onShow时刷新日夜主题 * 全局统一深色主题(琥珀夜光),已移除白天主题
* 页面根视图需绑定 :class="themeClass" * 页面根视图需绑定 :class="themeClass"
*/ */
import { getCurrentTheme, applyTheme } from './utils' import { applyTheme } from './utils'
export default { export default {
data() { data() {
@@ -19,10 +19,10 @@ export default {
}, },
methods: { methods: {
_refreshTheme() { _refreshTheme() {
const theme = getCurrentTheme() // 固定深色主题
this.currentTheme = theme this.currentTheme = 'dark'
this.themeClass = theme === 'light' ? 'theme-light' : 'theme-dark' this.themeClass = 'theme-dark'
applyTheme(theme) applyTheme('dark')
} }
} }
} }
+19 -34
View File
@@ -278,13 +278,10 @@ export function calcLocalStreak(records) {
} }
/** /**
* 主题系统:日夜自动切换 * 主题系统:全局统一使用深色主题(琥珀夜光),已移除白天主题
* 白天:6:00-16:00 → light
* 夜间:16:00-6:00 → dark
*/ */
export function getCurrentTheme() { export function getCurrentTheme() {
const hour = new Date().getHours() return 'dark'
return (hour >= 6 && hour < 16) ? 'light' : 'dark'
} }
export function applyTheme(theme) { export function applyTheme(theme) {
@@ -296,15 +293,11 @@ export function applyTheme(theme) {
} }
export function applyNavBarTheme(theme) { export function applyNavBarTheme(theme) {
const colors = { // 仅深色主题
dark: { backgroundColor: '#0B0B14', frontColor: '#ffffff' },
light: { backgroundColor: '#F2F5F9', frontColor: '#000000' }
}
const c = colors[theme] || colors.dark
try { try {
uni.setNavigationBarColor({ uni.setNavigationBarColor({
frontColor: c.frontColor, frontColor: '#ffffff',
backgroundColor: c.backgroundColor, backgroundColor: '#0B0B14',
animation: { duration: 300, timingFunc: 'easeInOut' } animation: { duration: 300, timingFunc: 'easeInOut' }
}) })
} catch (e) {} } catch (e) {}
@@ -336,21 +329,13 @@ export function applyTabBarTheme(theme) {
const currentPath = pages[pages.length - 1].route const currentPath = pages[pages.length - 1].route
if (!tabBarPages.includes(currentPath)) return if (!tabBarPages.includes(currentPath)) return
const styles = { // 仅深色主题
dark: { const s = {
color: '#9494AC', color: '#9494AC',
selectedColor: '#E8A838', selectedColor: '#E8A838',
backgroundColor: '#151520', backgroundColor: '#151520',
borderStyle: 'black' borderStyle: 'black'
},
light: {
color: '#9BA8BA',
selectedColor: '#E09B2D',
backgroundColor: '#FFFFFF',
borderStyle: 'white'
} }
}
const s = styles[theme] || styles.dark
try { try {
uni.setTabBarStyle({ uni.setTabBarStyle({
color: s.color, color: s.color,
@@ -365,19 +350,19 @@ export function applyTabBarTheme(theme) {
} }
export function getThemeColors(theme) { export function getThemeColors(theme) {
const isDark = theme !== 'light' // 仅保留深色主题色值(参数保留以兼容既有调用)
return { return {
textPrimary: isDark ? '#FFFFFF' : '#16233C', textPrimary: '#FFFFFF',
textSecondary: isDark ? '#C0C0D2' : '#5D6B82', textSecondary: '#C0C0D2',
textTertiary: isDark ? '#9494AC' : '#9BA8BA', textTertiary: '#9494AC',
amber: isDark ? '#E8A838' : '#E09B2D', amber: '#E8A838',
bgBase: isDark ? '#0B0B14' : '#F2F5F9', bgBase: '#0B0B14',
bgCard: isDark ? '#1A1A28' : '#FFFFFF', bgCard: '#1A1A28',
cardGradStart: isDark ? '#1A1510' : '#F8FAFD', cardGradStart: '#1A1510',
cardGradEnd: isDark ? '#0D0B08' : '#EFF3F9', cardGradEnd: '#0D0B08',
borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(224,155,45,0.18)', borderSubtle: 'rgba(232,168,56,0.15)',
bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(22,40,70,0.04)', bgPlaceholder: 'rgba(255,255,255,0.03)',
emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(224,155,45,0.10)' emojiBg: 'rgba(232,168,56,0.08)'
} }
} }
+1 -1
View File
@@ -697,7 +697,7 @@ export default {
padding: $sp-md $sp-xl $sp-xl; padding: $sp-md $sp-xl $sp-xl;
color: $text-primary; color: $text-primary;
border-radius: $radius-xl; border-radius: $radius-xl;
/* 背景层次:底部卡片色 + 顶部琥珀光晕,日夜主题自适应 */ /* 背景层次:底部卡片色 + 顶部琥珀光晕 */
background: background:
radial-gradient(120% 60% at 50% 0%, var(--amber-glow, rgba(232, 168, 56, 0.15)) 0%, transparent 60%), 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%); linear-gradient(180deg, var(--bg-elevated, #28283E) 0%, var(--bg-card, #1A1A28) 55%);
+1 -48
View File
@@ -1,7 +1,7 @@
/* ========================================== /* ==========================================
* 碰盏日记 - 设计令牌 (Design Tokens) * 碰盏日记 - 设计令牌 (Design Tokens)
* 设计概念: 琥珀夜光 Amber Night / 暖白琥珀 Warm Day * 设计概念: 琥珀夜光 Amber Night / 暖白琥珀 Warm Day
* 支持日夜主题自动切换 * 全局统一深色主题(琥珀夜光)
* ========================================== */ * ========================================== */
/* --- 夜间主题(默认)--- */ /* --- 夜间主题(默认)--- */
@@ -51,53 +51,6 @@ page, .theme-dark {
--tab-bar-color: #9494AC; --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变量,含暗色回退值)--- */ /* --- 色彩系统(SCSS变量桥接到CSS变量,含暗色回退值)--- */
$bg-base: var(--bg-base, #0B0B14); $bg-base: var(--bg-base, #0B0B14);
$bg-card: var(--bg-card, #1A1A28); $bg-card: var(--bg-card, #1A1A28);