/* ========================================================= 个人主页 · 设计令牌 三档主题：暗色（默认，最像终端）/ 亮色（纸白）/ 炫彩（霓虹） 变量一律 --p- 前缀，与 Wiki 公开端的 --w-* 互不干扰 ========================================================= */ :root { --p-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --p-radius-sm: 8px; --p-radius-md: 12px; --p-dur: 180ms; --p-ease: cubic-bezier(0.32, 0.72, 0, 1); /* 预置背景：这里的四套是**暗色主题**（也是炫彩主题）用的深色版。 亮色主题另有一套浅色版，挂在下面的 [data-theme='light'] 里—— 三档主题要能一眼看出区别，光换强调色不够，底色得跟着走。 至于站点自己配的纯色与图片背景，那些跟不了主题，由 [data-surface] 定死一套文字色。 */ --p-bg-grid: linear-gradient(rgba(52, 211, 153, 0.08) 1px, transparent 1px) 0 0 / 32px 32px repeat, linear-gradient(90deg, rgba(52, 211, 153, 0.08) 1px, transparent 1px) 0 0 / 32px 32px repeat, radial-gradient(900px 480px at 50% 0%, rgba(52, 211, 153, 0.12), transparent 72%), #05070a; --p-bg-aurora: radial-gradient(700px 420px at 12% 8%, rgba(52, 211, 153, 0.24), transparent 70%), radial-gradient(720px 460px at 88% 18%, rgba(34, 211, 238, 0.22), transparent 72%), radial-gradient(760px 520px at 50% 100%, rgba(94, 234, 212, 0.16), transparent 74%), #04070a; --p-bg-mono: #05070a; --p-bg-nebula: radial-gradient(620px 420px at 20% 25%, rgba(167, 139, 250, 0.24), transparent 70%), radial-gradient(680px 460px at 80% 70%, rgba(34, 211, 238, 0.18), transparent 72%), radial-gradient(520px 380px at 60% 12%, rgba(244, 114, 182, 0.14), transparent 70%), #050510; } /* —— 暗色（默认）—— */ :root, :root[data-theme='dark'] { color-scheme: dark; --p-page: #05070a; --p-text: #d9e6ee; --p-text-2: #93a7b4; --p-text-3: #63798a; --p-accent: #34d399; --p-accent-2: #22d3ee; --p-border: rgba(120, 200, 180, 0.18); --p-border-strong: rgba(120, 200, 180, 0.34); --p-surface: rgba(9, 15, 20, 0.72); --p-fill: rgba(120, 200, 180, 0.1); --p-glow: rgba(52, 211, 153, 0.28); --p-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } /* —— 亮色：纸白终端 —— */ :root[data-theme='light'] { color-scheme: light; --p-page: #f4f6f7; --p-text: #16222b; --p-text-2: #4d5f6b; --p-text-3: #8296a2; --p-accent: #0f766e; --p-accent-2: #0e7490; --p-border: rgba(15, 70, 80, 0.16); --p-border-strong: rgba(15, 70, 80, 0.3); --p-surface: rgba(255, 255, 255, 0.82); --p-fill: rgba(15, 70, 80, 0.07); --p-glow: rgba(15, 118, 110, 0.16); --p-shadow: 0 16px 40px rgba(20, 40, 50, 0.12); /* 四套预置背景的浅色版：与上面那四套一一对应，只是把底换纸白、光晕换成同色系的淡彩 */ --p-bg-grid: linear-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px) 0 0 / 32px 32px repeat, linear-gradient(90deg, rgba(15, 118, 110, 0.08) 1px, transparent 1px) 0 0 / 32px 32px repeat, radial-gradient(900px 480px at 50% 0%, rgba(15, 118, 110, 0.1), transparent 72%), #f4f6f7; --p-bg-aurora: radial-gradient(700px 420px at 12% 8%, rgba(15, 118, 110, 0.18), transparent 70%), radial-gradient(720px 460px at 88% 18%, rgba(14, 116, 144, 0.16), transparent 72%), radial-gradient(760px 520px at 50% 100%, rgba(13, 148, 136, 0.14), transparent 74%), #f7fbfb; --p-bg-mono: #f4f6f7; --p-bg-nebula: radial-gradient(620px 420px at 20% 25%, rgba(139, 92, 246, 0.16), transparent 70%), radial-gradient(680px 460px at 80% 70%, rgba(14, 116, 144, 0.14), transparent 72%), radial-gradient(520px 380px at 60% 12%, rgba(219, 39, 119, 0.12), transparent 70%), #f9f7ff; } /* —— 炫彩：霓虹 —— */ :root[data-theme='color'] { color-scheme: dark; --p-page: #0a0713; --p-text: #ece7ff; --p-text-2: #b3a9d6; --p-text-3: #8b81b3; --p-accent: #a78bfa; --p-accent-2: #22d3ee; --p-border: rgba(167, 139, 250, 0.24); --p-border-strong: rgba(167, 139, 250, 0.44); --p-surface: rgba(20, 14, 38, 0.72); --p-fill: rgba(167, 139, 250, 0.12); --p-glow: rgba(167, 139, 250, 0.4); --p-shadow: 0 18px 52px rgba(28, 10, 60, 0.6); } /* 底色是深是浅 —— 只有「站点自己配的、跟着主题变不了」的背景才带 data-surface： 图片一律按深色底算（照片上白字才读得清），纯色按色值亮度算， 服务端把结果写在 上。 预置背景不带这个属性，那种情况交给主题（上面那三块）——三档主题要切换得出来， 底色就不能被这里压住。 这两块放在最后是有意的：与主题块同权重，靠书写顺序取胜，正好盖住主题的这几个变量。 强调色不在这里：主题只管强调色、光标与按钮，底色由背景说了算。 注意选择器里**不能带裸的 `:root`**：那样它会无条件命中，把上面对预置背景生效的主题 又盖回去——切主题看着只是颜色变一点点，就是这个毛病。 */ :root[data-surface='dark'] { color-scheme: dark; --p-text: #d9e6ee; --p-text-2: #93a7b4; --p-text-3: #63798a; --p-border: rgba(120, 200, 180, 0.18); --p-border-strong: rgba(120, 200, 180, 0.34); --p-surface: rgba(9, 15, 20, 0.72); --p-fill: rgba(120, 200, 180, 0.1); --p-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } :root[data-surface='light'] { color-scheme: light; --p-text: #16222b; --p-text-2: #4d5f6b; --p-text-3: #8296a2; --p-border: rgba(15, 70, 80, 0.16); --p-border-strong: rgba(15, 70, 80, 0.3); --p-surface: rgba(255, 255, 255, 0.82); --p-fill: rgba(15, 70, 80, 0.07); --p-shadow: 0 16px 40px rgba(20, 40, 50, 0.12); }