```
refactor(theme): 统一应用深色主题替换日夜切换功能 - 移除白天主题相关样式定义和切换逻辑 - 将主题系统固定为深色主题(琥珀夜光) - 更新页面背景色设置为统一深色 - 简化导航栏和标签栏主题应用逻辑 - 移除白天主题的颜色变量和样式类 - 更新主题混入文件以支持单一深色主题 ```
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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
@@ -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)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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,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);
|
||||||
|
|||||||
Reference in New Issue
Block a user