feat(css): 优化主题切换图标显示逻辑

- 调整图标显示规则,确保日夜模式下图标正确隐藏
- 移除重复的图标隐藏样式定义
- 删除已弃用的MBTI标签渐变色样式
- 保持样式代码结构清晰一致
This commit is contained in:
hehh
2025-11-24 23:46:47 +08:00
parent 3a6a640c6a
commit 63407a9216
2 changed files with 10 additions and 45 deletions

View File

@@ -147,6 +147,14 @@ body {
text-shadow: 0 0 10px var(--accent); text-shadow: 0 0 10px var(--accent);
} }
[data-theme="day"] .icon-sun {
display: none;
}
[data-theme="night"] .icon-moon {
display: none;
}
/* ========================================= /* =========================================
3. Navigation 3. Navigation
@@ -250,14 +258,6 @@ body {
.action-btn:active { .action-btn:active {
transform: translateY(0); transform: translateY(0);
} }
[data-theme="day"] .icon-sun {
display: none;
}
[data-theme="night"] .icon-moon {
display: none;
}
} }
/* ========================================= /* =========================================
@@ -646,33 +646,6 @@ body {
max-width: 100%; max-width: 100%;
} }
.mbti-tags .tag.tag-color-1 {
background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mbti-tags .tag.tag-color-2 {
background: var(--gradient-2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mbti-tags .tag.tag-color-3 {
background: var(--gradient-3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mbti-tags .tag.tag-color-4 {
background: var(--gradient-4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Tech Stack (PC) --- */ /* --- Tech Stack (PC) --- */
.area-tech { .area-tech {
@@ -1479,14 +1452,6 @@ body {
.action-btn:active { .action-btn:active {
transform: translateY(0); transform: translateY(0);
} }
[data-theme="day"] .icon-sun {
display: none;
}
[data-theme="night"] .icon-moon {
display: none;
}
} }
/* ========================================= /* =========================================

View File

@@ -182,7 +182,7 @@ class ThemeManager {
init() { init() {
let theme = getStoredTheme(); let theme = getStoredTheme();
if (theme === 'night') this.root.setAttribute('data-theme', 'night'); if (theme) this.root.setAttribute('data-theme', theme);
$('#theme-btn').toggleClass('is-active', theme === 'night'); $('#theme-btn').toggleClass('is-active', theme === 'night');
const langForTitle = getStoredLanguage(); const langForTitle = getStoredLanguage();
const titleText = theme === 'night' ? (langForTitle === 'zh' ? '白天模式' : 'Day') : (langForTitle === 'zh' ? '黑夜模式' : 'Night'); const titleText = theme === 'night' ? (langForTitle === 'zh' ? '白天模式' : 'Day') : (langForTitle === 'zh' ? '黑夜模式' : 'Night');
@@ -191,7 +191,7 @@ class ThemeManager {
$('#theme-btn').on('click', () => { $('#theme-btn').on('click', () => {
const curr = this.root.getAttribute('data-theme'); const curr = this.root.getAttribute('data-theme');
const next = curr === 'night' ? 'day' : 'night'; const next = curr === 'night' ? 'day' : 'night';
if (next === 'night') this.root.setAttribute('data-theme', 'night'); if (next) this.root.setAttribute('data-theme', next);
else this.root.removeAttribute('data-theme'); else this.root.removeAttribute('data-theme');
setStoredTheme(next) setStoredTheme(next)
$('#theme-btn').toggleClass('is-active', next === 'night'); $('#theme-btn').toggleClass('is-active', next === 'night');