xuyue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多种主题的切换

Browse Source
This commit is contained in:
yuetsh
2026-01-13 21:59:03 +08:00
parent e3122b6068
commit 8ccbdf4a2e
3 changed files with 713 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
index.html
View File

@@ -9,10 +9,54 @@
</head> </head>
<body> <body>
<button class="theme-toggle" id="themeToggle" aria-label="切换主题" title="切换深色/浅色模式"> <div class="theme-controls">
<img src="/icons/moon.svg" alt="月亮" class="theme-icon theme-icon-moon" /> <label class="design-theme">
<img src="/icons/sun.svg" alt="太阳" class="theme-icon theme-icon-sun" /> <span class="visually-hidden">设计主题</span>
</button> <button
class="design-theme-button"
id="designThemeButton"
type="button"
aria-label="设计主题"
aria-haspopup="listbox"
aria-expanded="false"
aria-controls="designThemeList"
>
流光
</button>
<ul
class="design-theme-list"
id="designThemeList"
role="listbox"
tabindex="-1"
hidden
>
<li role="option" data-value="fluent" aria-selected="true">流光</li>
<li role="option" data-value="aurora" aria-selected="false">极光</li>
<li role="option" data-value="forest" aria-selected="false">森林</li>
<li role="option" data-value="sunset" aria-selected="false">日落</li>
<li role="option" data-value="terminal" aria-selected="false">
终端
</li>
</ul>
</label>
<button
class="theme-toggle"
id="themeToggle"
aria-label="切换主题"
title="切换深色/浅色模式"
>
<img
src="/icons/moon.svg"
alt="月亮"
class="theme-icon theme-icon-moon"
/>
<img
src="/icons/sun.svg"
alt="太阳"
class="theme-icon theme-icon-sun"
/>
</button>
</div>
<div id="app"> <div id="app">
<div class="container"> <div class="container">
<main class="main"> <main class="main">
@@ -24,16 +68,13 @@
<a href="https://beian.miit.gov.cn" target="_blank" rel="noreferrer"> <a href="https://beian.miit.gov.cn" target="_blank" rel="noreferrer">
浙ICP备2023044109号 浙ICP备2023044109号
</a> </a>
<div> <a
<img src="/备案图标.png" alt="备案图标" /> href="https://beian.mps.gov.cn/#/query/webSearch?code=33100402331786"
<a rel="noreferrer"
href="https://beian.mps.gov.cn/#/query/webSearch?code=33100402331786" target="_blank"
rel="noreferrer" >
target="_blank" 浙公网安备33100402331786号
> </a>
浙公网安备33100402331786号
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

177
main.js
View File

@@ -81,37 +81,186 @@ document.querySelector("#sites").innerHTML =
pins.map(pin).join("") + sites.map(item).join("") pins.map(pin).join("") + sites.map(item).join("")
// 主题切换功能 // 主题切换功能
const themeToggle = document.getElementById("themeToggle"); const themeToggle = document.getElementById("themeToggle")
const designThemeButton = document.getElementById("designThemeButton")
const designThemeList = document.getElementById("designThemeList")
const DESIGN_THEMES = ["fluent", "aurora", "forest", "sunset", "terminal"]
// 获取保存的主题或系统偏好 // 获取保存的主题或系统偏好
function getInitialTheme() { function getInitialTheme() {
const savedTheme = localStorage.getItem("theme"); const savedTheme = localStorage.getItem("theme")
if (savedTheme) { if (savedTheme) {
return savedTheme; return savedTheme
} }
// 如果没有保存的主题，使用系统偏好 // 如果没有保存的主题，使用系统偏好
return window.matchMedia("(prefers-color-scheme: dark)").matches return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" ? "dark"
: "light"; : "light"
} }
// 应用主题 // 应用主题
function setTheme(theme) { function setTheme(theme) {
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme)
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme)
// 图标通过 CSS 自动切换显示 // 图标通过 CSS 自动切换显示
} }
// 切换主题 // 切换主题
function toggleTheme() { function toggleTheme() {
const currentTheme = document.documentElement.getAttribute("data-theme") || "light"; if (
const newTheme = currentTheme === "dark" ? "light" : "dark"; document.documentElement.getAttribute("data-design-theme") === "terminal"
setTheme(newTheme); ) {
return
}
const currentTheme =
document.documentElement.getAttribute("data-theme") || "light"
const newTheme = currentTheme === "dark" ? "light" : "dark"
setTheme(newTheme)
}
function getInitialDesignTheme() {
const savedDesignTheme = localStorage.getItem("designTheme")
if (savedDesignTheme && DESIGN_THEMES.includes(savedDesignTheme)) {
return savedDesignTheme
}
return "fluent"
}
function setDesignTheme(designTheme) {
const safeDesignTheme = DESIGN_THEMES.includes(designTheme)
? designTheme
: "fluent"
const previousDesignTheme =
document.documentElement.getAttribute("data-design-theme") || "fluent"
document.documentElement.setAttribute("data-design-theme", safeDesignTheme)
localStorage.setItem("designTheme", safeDesignTheme)
if (safeDesignTheme === "terminal") {
if (previousDesignTheme !== "terminal") {
const currentTheme =
document.documentElement.getAttribute("data-theme") || "light"
localStorage.setItem("themeBeforeTerminal", currentTheme)
}
setTheme("dark")
} else if (previousDesignTheme === "terminal") {
const restoreTheme = localStorage.getItem("themeBeforeTerminal")
if (restoreTheme === "dark" || restoreTheme === "light") {
setTheme(restoreTheme)
}
localStorage.removeItem("themeBeforeTerminal")
}
}
function getDesignThemeLabel(designTheme) {
const optionEl = designThemeList?.querySelector(
`[role="option"][data-value="${designTheme}"]`,
)
if (optionEl) return optionEl.textContent?.trim() || "流光"
const fallback = {
fluent: "流光",
aurora: "极光",
forest: "森林",
sunset: "日落",
terminal: "终端",
}
return fallback[designTheme] || "流光"
}
function setSelectedDesignThemeUI(designTheme) {
if (!designThemeList) return
const options = [...designThemeList.querySelectorAll('[role="option"]')]
options.forEach((el) => {
el.setAttribute(
"aria-selected",
el.getAttribute("data-value") === designTheme ? "true" : "false",
)
})
if (designThemeButton) {
designThemeButton.textContent = getDesignThemeLabel(designTheme)
}
}
function setDesignThemeMenuOpen(open) {
if (!designThemeButton || !designThemeList) return
designThemeButton.setAttribute("aria-expanded", open ? "true" : "false")
designThemeList.hidden = !open
if (open) {
designThemeList.focus()
}
}
function getCurrentDesignTheme() {
return document.documentElement.getAttribute("data-design-theme") || "fluent"
} }
// 初始化主题 // 初始化主题
const initialTheme = getInitialTheme(); const initialTheme = getInitialTheme()
setTheme(initialTheme); setTheme(initialTheme)
const initialDesignTheme = getInitialDesignTheme()
setDesignTheme(initialDesignTheme)
setSelectedDesignThemeUI(initialDesignTheme)
setDesignThemeMenuOpen(false)
if (designThemeButton && designThemeList) {
designThemeButton.addEventListener("click", () => {
const isOpen = designThemeButton.getAttribute("aria-expanded") === "true"
setDesignThemeMenuOpen(!isOpen)
})
designThemeList.addEventListener("click", (e) => {
const option = e.target.closest?.('[role="option"][data-value]')
if (!option) return
const value = option.getAttribute("data-value")
setDesignTheme(value)
setSelectedDesignThemeUI(value)
setDesignThemeMenuOpen(false)
})
document.addEventListener("click", (e) => {
if (!designThemeButton || !designThemeList) return
const clickedInside =
designThemeButton.contains(e.target) || designThemeList.contains(e.target)
if (!clickedInside) setDesignThemeMenuOpen(false)
})
document.addEventListener("keydown", (e) => {
const isOpen = designThemeButton.getAttribute("aria-expanded") === "true"
if (!isOpen) return
if (e.key === "Escape") {
e.preventDefault()
setDesignThemeMenuOpen(false)
designThemeButton.focus()
return
}
const options = [...designThemeList.querySelectorAll('[role="option"]')]
if (!options.length) return
const current = getCurrentDesignTheme()
const currentIndex = Math.max(
0,
options.findIndex((el) => el.getAttribute("data-value") === current),
)
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault()
const delta = e.key === "ArrowDown" ? 1 : -1
const nextIndex = (currentIndex + delta + options.length) % options.length
const nextValue = options[nextIndex].getAttribute("data-value")
setDesignTheme(nextValue)
setSelectedDesignThemeUI(nextValue)
return
}
if (e.key === "Enter" || e.key === " ") {
e.preventDefault()
setDesignThemeMenuOpen(false)
designThemeButton.focus()
}
})
}
// 监听系统主题变化（仅在用户未手动设置时） // 监听系统主题变化（仅在用户未手动设置时）
window window
@@ -119,9 +268,9 @@ window
.addEventListener("change", (e) => { .addEventListener("change", (e) => {
// 如果用户没有手动设置过主题，则跟随系统 // 如果用户没有手动设置过主题，则跟随系统
if (!localStorage.getItem("theme")) { if (!localStorage.getItem("theme")) {
setTheme(e.matches ? "dark" : "light"); setTheme(e.matches ? "dark" : "light")
} }
}); })
// 绑定点击事件 // 绑定点击事件
themeToggle.addEventListener("click", toggleTheme); themeToggle.addEventListener("click", toggleTheme)

577
style.css
View File

@@ -3,23 +3,19 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: font-family:
-apple-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
BlinkMacSystemFont, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
min-height: 100vh; min-height: 100vh;
} }
/* Fluent 2 柔和渐变背景 */ :root {
body { --accent: #0078d4;
background: linear-gradient( --accent-rgb: 0, 120, 212;
--accent-2: #106ebe;
--accent-3: #005a9e;
--accent-secondary-rgb: 106, 90, 205;
--page-gradient: linear-gradient(
135deg, 135deg,
#e3f2fd 0%, #e3f2fd 0%,
#f0f4ff 25%, #f0f4ff 25%,
@@ -27,6 +23,113 @@ body {
#e8f0f8 75%, #e8f0f8 75%,
#dde8f5 100% #dde8f5 100%
); );
--page-texture:
radial-gradient(
circle at 20% 50%,
rgba(var(--accent-rgb), 0.03) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(var(--accent-secondary-rgb), 0.03) 0%,
transparent 50%
);
--title-gradient: linear-gradient(
135deg,
var(--accent) 0%,
var(--accent-2) 30%,
var(--accent-3) 60%,
var(--accent) 100%
);
--control-bg: rgba(255, 255, 255, 0.7);
--control-border: rgba(255, 255, 255, 0.8);
--control-inset: rgba(255, 255, 255, 0.9);
--control-fg: #323130;
}
html[data-design-theme="aurora"] {
--accent: #7c4dff;
--accent-rgb: 124, 77, 255;
--accent-2: #5e35b1;
--accent-3: #4527a0;
--accent-secondary-rgb: 0, 188, 212;
--page-gradient: linear-gradient(
135deg,
#f3e5f5 0%,
#ede7f6 25%,
#e8eaf6 50%,
#e0f7fa 75%,
#e3f2fd 100%
);
}
html[data-design-theme="forest"] {
--accent: #2e7d32;
--accent-rgb: 46, 125, 50;
--accent-2: #1b5e20;
--accent-3: #0d3d14;
--accent-secondary-rgb: 0, 150, 136;
--page-gradient: linear-gradient(
135deg,
#e8f5e9 0%,
#e3f2fd 25%,
#f1f8e9 50%,
#e0f2f1 75%,
#e8f5e9 100%
);
}
html[data-design-theme="sunset"] {
--accent: #ff6d00;
--accent-rgb: 255, 109, 0;
--accent-2: #f44336;
--accent-3: #8e24aa;
--accent-secondary-rgb: 255, 64, 129;
--page-gradient: linear-gradient(
135deg,
#fff3e0 0%,
#ffe0b2 25%,
#fce4ec 50%,
#ede7f6 75%,
#e3f2fd 100%
);
}
html[data-design-theme="terminal"] {
color-scheme: dark;
--accent: #33ff00;
--accent-rgb: 51, 255, 0;
--accent-2: #33ff00;
--accent-3: #33ff00;
--accent-secondary-rgb: 255, 176, 0;
--page-gradient: #0a0a0a;
--page-texture:
repeating-linear-gradient(
to bottom,
rgba(var(--accent-rgb), 0.035) 0px,
rgba(var(--accent-rgb), 0.035) 1px,
transparent 2px,
transparent 4px
),
radial-gradient(
circle at 50% 50%,
rgba(var(--accent-rgb), 0.05) 0%,
transparent 60%
);
--title-gradient: none;
--control-bg: rgba(10, 10, 10, 0.85);
--control-border: rgba(var(--accent-rgb), 0.35);
--control-inset: transparent;
--control-fg: var(--accent);
}
/* Fluent 2 柔和渐变背景 */
body {
background: var(--page-gradient);
background-attachment: fixed; background-attachment: fixed;
position: relative; position: relative;
} }
@@ -39,9 +142,7 @@ body::before {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-image: background-image: var(--page-texture);
radial-gradient(circle at 20% 50%, rgba(0, 120, 212, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(106, 90, 205, 0.03) 0%, transparent 50%);
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
} }
@@ -61,29 +162,155 @@ a {
z-index: 1; z-index: 1;
} }
/* 主题切换按钮 */ /* 主题控制区 */
.theme-toggle { .theme-controls {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 20px; right: 20px;
display: flex;
gap: 10px;
align-items: center;
z-index: 1000;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.design-theme {
position: relative;
display: flex;
align-items: center;
}
.design-theme-button {
height: 44px;
min-width: 118px;
border: 1px solid var(--control-border);
border-radius: 12px;
background: var(--control-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 1px 2px rgba(0, 0, 0, 0.04),
inset 0 1px 0 var(--control-inset);
padding: 0 34px 0 14px;
font: inherit;
color: var(--control-fg);
cursor: pointer;
text-align: center;
justify-content: center;
position: relative;
display: inline-flex;
align-items: center;
}
.design-theme-button::after {
content: "▾";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
opacity: 0.7;
color: var(--control-fg);
}
.design-theme-button:hover {
border-color: rgba(var(--accent-rgb), 0.3);
}
.design-theme-button:focus-visible {
outline: 2px solid rgba(var(--accent-rgb), 0.35);
outline-offset: 2px;
}
.design-theme-list {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
min-width: 160px;
max-height: 240px;
overflow: auto;
padding: 6px;
margin: 0;
list-style: none;
border: 1px solid var(--control-border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.12),
0 6px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
z-index: 1001;
}
html[data-theme="dark"]:not([data-design-theme="terminal"]) .design-theme-list {
background: rgba(20, 20, 20, 0.8);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.55),
0 6px 12px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.design-theme-list [role="option"] {
padding: 10px 10px;
border-radius: 10px;
cursor: pointer;
color: var(--control-fg);
user-select: none;
text-align: center;
transition:
background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.design-theme-list [role="option"]:hover {
background: rgba(var(--accent-rgb), 0.12);
color: var(--control-fg);
}
.design-theme-list [role="option"][aria-selected="true"] {
background: rgba(var(--accent-rgb), 0.18);
color: var(--control-fg);
}
.design-theme-list [role="option"]:focus-visible {
outline: 2px solid rgba(var(--accent-rgb), 0.35);
outline-offset: 2px;
}
/* 主题切换按钮 */
.theme-toggle {
width: 44px; width: 44px;
height: 44px; height: 44px;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.7); background: var(--control-bg);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.8); border: 1px solid var(--control-border);
box-shadow: box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08),
0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9); inset 0 1px 0 var(--control-inset);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
padding: 0; padding: 0;
} }
@@ -91,7 +318,9 @@ a {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: block; display: block;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition:
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
.theme-icon-sun { .theme-icon-sun {
@@ -102,22 +331,22 @@ a {
display: block; display: block;
} }
html[data-theme="dark"] .theme-icon-sun { html[data-theme="dark"]:not([data-design-theme="terminal"]) .theme-icon-sun {
display: block; display: block;
} }
html[data-theme="dark"] .theme-icon-moon { html[data-theme="dark"]:not([data-design-theme="terminal"]) .theme-icon-moon {
display: none; display: none;
} }
.theme-toggle:hover { .theme-toggle:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow:
0 8px 24px rgba(0, 120, 212, 0.15), 0 8px 24px rgba(var(--accent-rgb), 0.15),
0 4px 8px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.95); inset 0 1px 0 rgba(255, 255, 255, 0.95);
border-color: rgba(0, 120, 212, 0.3); border-color: rgba(var(--accent-rgb), 0.3);
color: #0078d4; color: var(--accent);
} }
.theme-toggle:active { .theme-toggle:active {
@@ -125,25 +354,29 @@ html[data-theme="dark"] .theme-icon-moon {
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
} }
html[data-theme="dark"] .theme-toggle { html[data-theme="dark"]:not([data-design-theme="terminal"]) .theme-toggle {
background: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05); inset 0 1px 0 rgba(255, 255, 255, 0.05);
color: #ffffff;
} }
html[data-theme="dark"] .theme-toggle:hover { html[data-theme="dark"]:not([data-design-theme="terminal"])
border-color: rgba(0, 120, 212, 0.4); .design-theme-button {
box-shadow: box-shadow:
0 8px 24px rgba(0, 120, 212, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 var(--control-inset);
}
html[data-theme="dark"]:not([data-design-theme="terminal"])
.theme-toggle:hover {
border-color: rgba(var(--accent-rgb), 0.4);
box-shadow:
0 8px 24px rgba(var(--accent-rgb), 0.25),
0 4px 8px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1); inset 0 1px 0 rgba(255, 255, 255, 0.1);
color: #60cdff; color: var(--accent);
} }
.main { .main {
@@ -169,13 +402,7 @@ html[data-theme="dark"] .theme-toggle:hover {
/* Fluent 2 风格的标题渐变 - 使用 Fluent 蓝系 */ /* Fluent 2 风格的标题渐变 - 使用 Fluent 蓝系 */
.title { .title {
background: linear-gradient( background: var(--title-gradient);
135deg,
#0078d4 0%,
#106ebe 30%,
#005a9e 60%,
#0078d4 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -243,11 +470,13 @@ html[data-theme="dark"] .theme-toggle:hover {
padding: 1px; padding: 1px;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(0, 120, 212, 0.1) 0%, rgba(var(--accent-rgb), 0.1) 0%,
rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 50%,
rgba(0, 120, 212, 0.1) 100% rgba(var(--accent-rgb), 0.1) 100%
); );
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; -webkit-mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
opacity: 0; opacity: 0;
@@ -264,13 +493,13 @@ html[data-theme="dark"] .theme-toggle:hover {
/* Fluent 2 Hover 效果 - 轻量上浮 */ /* Fluent 2 Hover 效果 - 轻量上浮 */
.card:hover, .card:hover,
.card:focus { .card:focus {
color: #0078d4; color: var(--accent);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow:
0 8px 24px rgba(0, 120, 212, 0.15), 0 8px 24px rgba(var(--accent-rgb), 0.15),
0 4px 8px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.95); inset 0 1px 0 rgba(255, 255, 255, 0.95);
border-color: rgba(0, 120, 212, 0.3); border-color: rgba(var(--accent-rgb), 0.3);
} }
.card:hover::before, .card:hover::before,
@@ -294,7 +523,7 @@ html[data-theme="dark"] .theme-toggle:hover {
.card:hover h2, .card:hover h2,
.card:focus h2 { .card:focus h2 {
color: #0078d4; color: var(--accent);
} }
.card .title-icon { .card .title-icon {
@@ -357,7 +586,132 @@ html[data-theme="dark"] .theme-toggle:hover {
} }
.beian a:hover { .beian a:hover {
color: #0078d4; color: var(--accent);
}
@keyframes terminal-cursor-blink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
html[data-design-theme="terminal"] body {
font-family:
ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas,
"Liberation Mono", monospace;
letter-spacing: 0.01em;
color: var(--accent);
}
html[data-design-theme="terminal"] .theme-controls {
gap: 12px;
}
html[data-design-theme="terminal"] .design-theme-button,
html[data-design-theme="terminal"] .theme-toggle {
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid rgba(var(--accent-rgb), 0.55);
}
html[data-design-theme="terminal"] .theme-toggle {
cursor: not-allowed;
}
html[data-design-theme="terminal"] .design-theme-button:hover,
html[data-design-theme="terminal"] .theme-toggle:hover {
background: var(--accent);
color: #0a0a0a;
border-color: var(--accent);
transform: none;
}
html[data-design-theme="terminal"] .design-theme-button::after {
color: currentColor;
}
html[data-design-theme="terminal"] .design-theme-list {
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(10, 10, 10, 0.92);
border: 1px solid rgba(var(--accent-rgb), 0.55);
}
html[data-design-theme="terminal"] .design-theme-list [role="option"] {
border-radius: 0;
text-transform: uppercase;
}
html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover,
html[data-design-theme="terminal"]
.design-theme-list
[role="option"][aria-selected="true"] {
background: var(--accent);
color: #0a0a0a;
}
html[data-design-theme="terminal"] .title {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--accent);
text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5);
text-transform: uppercase;
letter-spacing: 0.04em;
position: relative;
}
html[data-design-theme="terminal"] .title::after {
content: "█";
margin-left: 8px;
animation: terminal-cursor-blink 1s step-end infinite;
}
html[data-design-theme="terminal"] .card {
border-radius: 0;
background: transparent;
border: 1px solid rgba(var(--accent-rgb), 0.35);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: none;
}
html[data-design-theme="terminal"] .card::before {
display: none;
}
html[data-design-theme="terminal"] .card h2,
html[data-design-theme="terminal"] .card p,
html[data-design-theme="terminal"] .beian a {
color: var(--accent);
text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.25);
}
html[data-design-theme="terminal"] .card:hover,
html[data-design-theme="terminal"] .card:focus {
background: rgba(var(--accent-rgb), 0.06);
border-color: var(--accent);
box-shadow: none;
}
html[data-design-theme="terminal"] .card:hover h2,
html[data-design-theme="terminal"] .card:focus h2 {
color: var(--accent);
}
html[data-design-theme="terminal"] .beian a:hover {
background: var(--accent);
color: #0a0a0a;
text-shadow: none;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@@ -365,16 +719,27 @@ html[data-theme="dark"] .theme-toggle:hover {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
.theme-controls {
top: 12px;
right: 12px;
gap: 8px;
}
.design-theme-button {
min-width: 108px;
}
} }
/* Fluent 2 深色模式 */ /* Fluent 2 深色模式 */
html[data-theme="dark"] { html[data-theme="dark"]:not([data-design-theme="terminal"]) {
color-scheme: dark; color-scheme: dark;
} --accent: #60cdff;
--accent-rgb: 96, 205, 255;
--accent-2: #4fc3f7;
--accent-3: #29b6f6;
html[data-theme="dark"] body { --page-gradient: linear-gradient(
color: #ffffff;
background: linear-gradient(
135deg, 135deg,
#1a1a1a 0%, #1a1a1a 0%,
#1f1f1f 25%, #1f1f1f 25%,
@@ -382,29 +747,53 @@ html[data-theme="dark"] body {
#1d1d1d 75%, #1d1d1d 75%,
#1a1a1a 100% #1a1a1a 100%
); );
--page-texture:
radial-gradient(
circle at 20% 50%,
rgba(var(--accent-rgb), 0.08) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(var(--accent-secondary-rgb), 0.08) 0%,
transparent 50%
);
--control-bg: rgba(30, 30, 30, 0.7);
--control-border: rgba(255, 255, 255, 0.1);
--control-inset: rgba(255, 255, 255, 0.05);
--control-fg: #ffffff;
} }
html[data-theme="dark"] body::before { html[data-theme="dark"]:not([data-design-theme="terminal"]) body {
background-image: color: #ffffff;
radial-gradient(circle at 20% 50%, rgba(0, 120, 212, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(106, 90, 205, 0.08) 0%, transparent 50%);
} }
html[data-theme="dark"] .title { html[data-theme="dark"][data-design-theme="aurora"] {
background: linear-gradient( --accent: #b388ff;
135deg, --accent-rgb: 179, 136, 255;
#60cdff 0%, --accent-2: #9575cd;
#4fc3f7 30%, --accent-3: #7e57c2;
#29b6f6 60%, --accent-secondary-rgb: 77, 208, 225;
#60cdff 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
} }
html[data-theme="dark"] .card { html[data-theme="dark"][data-design-theme="forest"] {
--accent: #66bb6a;
--accent-rgb: 102, 187, 106;
--accent-2: #43a047;
--accent-3: #2e7d32;
--accent-secondary-rgb: 38, 166, 154;
}
html[data-theme="dark"][data-design-theme="sunset"] {
--accent: #ffb74d;
--accent-rgb: 255, 183, 77;
--accent-2: #ff8a65;
--accent-3: #ce93d8;
--accent-secondary-rgb: 244, 143, 177;
}
html[data-theme="dark"]:not([data-design-theme="terminal"]) .card {
background: rgba(30, 30, 30, 0.7); background: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
@@ -415,52 +804,52 @@ html[data-theme="dark"] .card {
inset 0 1px 0 rgba(255, 255, 255, 0.05); inset 0 1px 0 rgba(255, 255, 255, 0.05);
} }
html[data-theme="dark"] .card::before { html[data-theme="dark"]:not([data-design-theme="terminal"]) .card::before {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(0, 120, 212, 0.2) 0%, rgba(var(--accent-rgb), 0.2) 0%,
rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%,
rgba(0, 120, 212, 0.2) 100% rgba(var(--accent-rgb), 0.2) 100%
); );
} }
html[data-theme="dark"] .card h2 { html[data-theme="dark"]:not([data-design-theme="terminal"]) .card h2 {
color: #ffffff; color: #ffffff;
} }
html[data-theme="dark"] .card:hover h2, html[data-theme="dark"]:not([data-design-theme="terminal"]) .card:hover h2,
html[data-theme="dark"] .card:focus h2 { html[data-theme="dark"]:not([data-design-theme="terminal"]) .card:focus h2 {
color: #60cdff; color: var(--accent);
} }
html[data-theme="dark"] .card:hover, html[data-theme="dark"]:not([data-design-theme="terminal"]) .card:hover,
html[data-theme="dark"] .card:focus { html[data-theme="dark"]:not([data-design-theme="terminal"]) .card:focus {
border-color: rgba(0, 120, 212, 0.4); border-color: rgba(var(--accent-rgb), 0.4);
box-shadow: box-shadow:
0 8px 24px rgba(0, 120, 212, 0.25), 0 8px 24px rgba(var(--accent-rgb), 0.25),
0 4px 8px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1); inset 0 1px 0 rgba(255, 255, 255, 0.1);
} }
html[data-theme="dark"] .card p { html[data-theme="dark"]:not([data-design-theme="terminal"]) .card p {
color: #c8c6c4; color: #c8c6c4;
} }
html[data-theme="dark"] .card:hover p, html[data-theme="dark"]:not([data-design-theme="terminal"]) .card:hover p,
html[data-theme="dark"] .card:focus p { html[data-theme="dark"]:not([data-design-theme="terminal"]) .card:focus p {
color: #e1dfdd; color: #e1dfdd;
} }
html[data-theme="dark"] .pin.card { html[data-theme="dark"]:not([data-design-theme="terminal"]) .pin.card {
background: rgba(40, 40, 40, 0.75); background: rgba(40, 40, 40, 0.75);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
} }
html[data-theme="dark"] .beian a { html[data-theme="dark"]:not([data-design-theme="terminal"]) .beian a {
color: #c8c6c4; color: #c8c6c4;
} }
html[data-theme="dark"] .beian a:hover { html[data-theme="dark"]:not([data-design-theme="terminal"]) .beian a:hover {
color: #60cdff; color: var(--accent);
} }