/* ===================================================================== * FluidLab Themes v2 — Claude 2026-07-23 * 5 套精选主题 (深色3 + 浅色2) * 默认: One Dark (不需要 data-theme 属性) * 用法: 切换 * ===================================================================== */ /* ---------- 默认主题: One Dark (写在 :root 里) ---------- */ :root { --fl-primary: #61afef; --fl-primary-dim: rgba(97,175,239,.12); --fl-primary-glow: rgba(97,175,239,.4); --fl-secondary: #e5c07b; --fl-success: #98c379; --fl-error: #e06c75; --fl-warning: #e5c07b; --fl-bg: #282c34; --fl-bg-elev-1: #2f343f; --fl-bg-elev-2: #3b4048; --fl-border: rgba(255,255,255,.08); --fl-border-strong: rgba(255,255,255,.16); --fl-text-main: #abb2bf; --fl-text-sub: #828997; --fl-text-muted: #5c6370; } /* ---------- 深色: Nord — 冷灰蓝、极简北欧 ---------- */ [data-theme="nord"] { --fl-primary: #88c0d0; --fl-primary-dim: rgba(136,192,208,.14); --fl-primary-glow: rgba(136,192,208,.4); --fl-secondary: #ebcb8b; --fl-success: #a3be8c; --fl-error: #bf616a; --fl-warning: #ebcb8b; --fl-bg: #2e3440; --fl-bg-elev-1: #363c4a; --fl-bg-elev-2: #3b4252; --fl-border: rgba(255,255,255,.08); --fl-border-strong: rgba(136,192,208,.25); --fl-text-main: #eceff4; --fl-text-sub: #b8bfca; --fl-text-muted: #7b8494; } /* ---------- 深色: Dracula — 紫调高对比 ---------- */ [data-theme="dracula"] { --fl-primary: #bd93f9; --fl-primary-dim: rgba(189,147,249,.14); --fl-primary-glow: rgba(189,147,249,.45); --fl-secondary: #ffb86c; --fl-success: #50fa7b; --fl-error: #ff5555; --fl-warning: #f1fa8c; --fl-bg: #282a36; --fl-bg-elev-1: #2d2f3d; --fl-bg-elev-2: #44475a; --fl-border: rgba(255,255,255,.08); --fl-border-strong: rgba(189,147,249,.3); --fl-text-main: #f8f8f2; --fl-text-sub: #bcc0d0; --fl-text-muted: #6272a4; } /* ---------- 浅色: Solarized Light — 米黄暖白 ---------- */ [data-theme="solarized-light"] { --fl-primary: #268bd2; --fl-primary-dim: rgba(38,139,210,.1); --fl-primary-glow: rgba(38,139,210,.3); --fl-secondary: #b58900; --fl-success: #859900; --fl-error: #dc322f; --fl-warning: #cb4b16; --fl-bg: #fdf6e3; --fl-bg-elev-1: #eee8d5; --fl-bg-elev-2: #e4ddc8; --fl-border: rgba(101,123,131,.2); --fl-border-strong: rgba(101,123,131,.35); --fl-text-main: #586e75; --fl-text-sub: #657b83; --fl-text-muted: #93a1a1; } /* ---------- 浅色: GitHub Light — 干净简洁 ---------- */ [data-theme="github-light"] { --fl-primary: #0969da; --fl-primary-dim: rgba(9,105,218,.08); --fl-primary-glow: rgba(9,105,218,.25); --fl-secondary: #9a6700; --fl-success: #1a7f37; --fl-error: #cf222e; --fl-warning: #9a6700; --fl-bg: #ffffff; --fl-bg-elev-1: #f6f8fa; --fl-bg-elev-2: #eaeef2; --fl-border: rgba(0,0,0,.1); --fl-border-strong: rgba(0,0,0,.22); --fl-text-main: #1f2328; --fl-text-sub: #656d76; --fl-text-muted: #8c959f; } /* ---------- 浅色主题组件微调 ---------- */ [data-theme="solarized-light"] .fl-btn, [data-theme="github-light"] .fl-btn { color: #ffffff; } [data-theme="solarized-light"] .fl-modal-overlay, [data-theme="github-light"] .fl-modal-overlay { background: rgba(0,0,0,.35); } [data-theme="solarized-light"] .fl-app-title::before, [data-theme="github-light"] .fl-app-title::before { box-shadow: 0 0 4px var(--fl-primary-glow); } [data-theme="solarized-light"] .fl-skeleton-stage::before, [data-theme="github-light"] .fl-skeleton-stage::before { background: linear-gradient(110deg, transparent 30%, rgba(0,0,0,.04) 50%, transparent 70%); } /* 浅色 scrollbar */ [data-theme="solarized-light"] ::-webkit-scrollbar-track, [data-theme="github-light"] ::-webkit-scrollbar-track { background: var(--fl-bg-elev-1); } [data-theme="solarized-light"] ::-webkit-scrollbar-thumb, [data-theme="github-light"] ::-webkit-scrollbar-thumb { background: var(--fl-border-strong); } /* ---------- 兼容 index.php 旧变量名 ---------- */ :root { --primary: #61afef; --primary-dim: rgba(97,175,239,.12); --secondary: #e5c07b; --bg-deep: #282c34; --bg-base: #282c34; --panel-bg: #2f343f; --input-box-bg: #3b4048; --border: rgba(255,255,255,.08); --text-main: #abb2bf; --text-sub: #828997; --text-muted: #5c6370; --success: #98c379; --error: #e06c75; --warning: #e5c07b; } [data-theme="nord"] { --primary: #88c0d0; --primary-dim: rgba(136,192,208,.14); --secondary: #ebcb8b; --bg-deep: #2e3440; --bg-base: #2e3440; --panel-bg: #363c4a; --input-box-bg: #3b4252; --border: rgba(255,255,255,.08); --text-main: #eceff4; --text-sub: #b8bfca; --text-muted: #7b8494; --success: #a3be8c; --error: #bf616a; --warning: #ebcb8b; } [data-theme="dracula"] { --primary: #bd93f9; --primary-dim: rgba(189,147,249,.14); --secondary: #ffb86c; --bg-deep: #282a36; --bg-base: #282a36; --panel-bg: #2d2f3d; --input-box-bg: #44475a; --border: rgba(255,255,255,.08); --text-main: #f8f8f2; --text-sub: #bcc0d0; --text-muted: #6272a4; --success: #50fa7b; --error: #ff5555; --warning: #f1fa8c; } [data-theme="solarized-light"] { --primary: #268bd2; --primary-dim: rgba(38,139,210,.1); --secondary: #b58900; --bg-deep: #fdf6e3; --bg-base: #fdf6e3; --panel-bg: #eee8d5; --input-box-bg: #e4ddc8; --border: rgba(101,123,131,.2); --text-main: #586e75; --text-sub: #657b83; --text-muted: #93a1a1; --success: #859900; --error: #dc322f; --warning: #cb4b16; } [data-theme="github-light"] { --primary: #0969da; --primary-dim: rgba(9,105,218,.08); --secondary: #9a6700; --bg-deep: #ffffff; --bg-base: #ffffff; --panel-bg: #f6f8fa; --input-box-bg: #eaeef2; --border: rgba(0,0,0,.1); --text-main: #1f2328; --text-sub: #656d76; --text-muted: #8c959f; --success: #1a7f37; --error: #cf222e; --warning: #9a6700; } /* ===== LIGHT-TEXT-OVERRIDE: 浅色主题文字协调 ===== */ [data-theme="solarized-light"], [data-theme="github-light"] { color: var(--text-main); } [data-theme="solarized-light"] .hero-title, [data-theme="github-light"] .hero-title { color: var(--text-main) !important; text-shadow: none !important; } [data-theme="solarized-light"] .hero-subtitle, [data-theme="github-light"] .hero-subtitle { color: var(--text-sub) !important; } [data-theme="solarized-light"] .brand-title, [data-theme="solarized-light"] .brand-title span, [data-theme="github-light"] .brand-title, [data-theme="github-light"] .brand-title span { color: var(--primary) !important; text-shadow: none !important; } [data-theme="solarized-light"] .navbar, [data-theme="github-light"] .navbar { background: var(--panel-bg) !important; } [data-theme="solarized-light"] #bg-canvas, [data-theme="github-light"] #bg-canvas { opacity: 0.06 !important; } [data-theme="solarized-light"] .mode-card, [data-theme="github-light"] .mode-card { background: var(--panel-bg) !important; border-color: var(--border) !important; } [data-theme="solarized-light"] .mode-card *, [data-theme="github-light"] .mode-card * { color: var(--text-main) !important; } [data-theme="solarized-light"] .mode-card .mode-desc, [data-theme="github-light"] .mode-card .mode-desc { color: var(--text-sub) !important; } /* More light theme fixes */ [data-theme="solarized-light"] .hero-title, [data-theme="github-light"] .hero-title { color: #2a5070 !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #2a5070 !important; text-shadow: none !important; opacity: 1 !important; } [data-theme="solarized-light"] .hero-subtitle, [data-theme="github-light"] .hero-subtitle { color: #657b83 !important; text-shadow: none !important; } [data-theme="solarized-light"] .hero-stats, [data-theme="solarized-light"] .hero-stats *, [data-theme="github-light"] .hero-stats, [data-theme="github-light"] .hero-stats * { color: #586e75 !important; } [data-theme="solarized-light"] .footer-section, [data-theme="solarized-light"] .footer-section *, [data-theme="github-light"] .footer-section, [data-theme="github-light"] .footer-section * { color: #657b83 !important; } [data-theme="solarized-light"] .mode-card h3, [data-theme="github-light"] .mode-card h3 { color: #2a5070 !important; } [data-theme="solarized-light"] .navbar *, [data-theme="github-light"] .navbar * { text-shadow: none !important; } [data-theme="solarized-light"] [style*="text-shadow"], [data-theme="github-light"] [style*="text-shadow"] { text-shadow: none !important; } [data-theme="solarized-light"] { --hero-title-color: #2a5070; } [data-theme="github-light"] { --hero-title-color: #1f2328; } /* ===== MOBILE-THEME-PANEL: 手机端主题面板修复 ===== */ @media (max-width: 768px) { #fl-theme-panel { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; min-width: 100% !important; border-radius: 16px 16px 0 0 !important; padding: 16px !important; max-height: 60vh !important; overflow-y: auto !important; } } /* 主题面板按钮样式: 确保文字可见 */ #fl-theme-panel .fl-tm { color: #eceff4 !important; background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; font-size: 15px !important; padding: 12px 14px !important; } #fl-theme-panel .fl-tm:active { background: rgba(255,255,255,0.1) !important; } [data-theme="solarized-light"] #fl-theme-panel .fl-tm, [data-theme="github-light"] #fl-theme-panel .fl-tm { color: #1f2328 !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; } #fl-theme-panel > div:first-child { font-size: 13px !important; font-weight: 700 !important; padding-bottom: 10px !important; color: #8899aa !important; }