/* ============================================================ * 主题变量定义 / Theme Variables（root.css） * * 功能：集中管理全站所有配色与视觉效果变量。 * 切换 属性即可全局换肤， * 无需修改任何组件样式。 * * 目录（Table of Contents）： * §1 全局变量说明 —— 所有 --xxx 变量的用途速查表 * §2 @font-face / 字体声明 —— 系统字体栈后备策略说明 * §3 data-theme 切换机制 —— 属性驱动 + 自动随机选择逻辑 * §4 浅色主题组（Light Group） * §4.1 纯白（light） —— 默认浅色基线 * §4.2 天蓝（blue） —— 浅蓝渐变背景 * §4.3 彩色（colorful） —— 粉紫渐变背景 * §5 深色主题组（Dark Group） * §5.1 科技风（tech） —— 深青科技渐变 * §5.2 暗紫（purple） —— 图片背景 + 暗紫遮罩 * §5.3 霓虹风（neon） —— 深紫黑底霓虹配色 * §5.4 黑金（blackgold） —— 纯黑底 + 金色点缀 * §5.5 深色（dark） —— 默认深色基线 * §6 auto 模式媒体查询 —— 跟随系统深色偏好 * ============================================================ */ /* ============================================================ * §1 全局变量说明 * * 以下变量在各主题块中逐一定义，此处仅概括用途： * * --name 主题中文名称（调试 / 显示用） * --main_bg_color 页面整体背景（纯色 / 渐变 / 图片 URL） * --main_text_color 正文主文本颜色 * --gradient 标题“渐变文字”（.gradientText）的渐变光谱定义 * --purple_text_color 描述区强调文字颜色（紫/蓝/金等品牌色） * --text_bg_color 强调文字的衬底背景色 * --item_bg_color 卡片 / 项目块默认背景色（半透明或纯色） * --item_hover_color 卡片 / 项目块悬停态背景色 * --item_left_title_color 侧边栏卡片标题文字颜色 * --item_left_text_color 侧边栏卡片正文 / 次要文字颜色 * --footer_text_color 页脚文字颜色 * --left_tag_item 侧边栏标签云块背景（纯色 / 渐变） * --left_tag_text 标签云文字颜色（按背景明暗取反以保证可读性） * --switch_track 主题切换开关的轨道底色（随主题变色，提供视觉切换反馈） * --card_filter 卡片毛玻璃模糊强度（单位 px；值为 0 时不模糊） * 注意：此属性非常吃性能，低配手机易卡顿， * 建议保持 0，仅用 --back_filter 做全局背景模糊。 * --back_filter 全局背景毛玻璃模糊强度（单位 px；值为 0 时不模糊） * --back_filter_color 全局遮罩层颜色（用于压暗背景，增强前景文字对比度） * --fill SVG 图标填充色（与主文本色或强调色联动） * --cal-good 日历「宜 / 吉日」语义色（浅色主题用深绿、深色主题用亮绿） * --cal-bad 日历「忌 / 凶日」语义色（浅色主题用深红、深色主题用亮红） * ============================================================ */ /* ============================================================ * §2 字体声明 / @font-face * * 本站点不使用自定义字体文件（零网络字体请求）， * 全部使用用户系统自带的字体栈，避免版权风险与加载延迟。 * * 英文标题（.gradientText 元素）：Georgia / Palatino Linotype / Times New Roman * —— 优先使用衬线（Serif）字体，赋予标题典雅、正式的品牌感。 * 中文正文：PingFang SC → Microsoft YaHei → Hiragino Sans GB → Heiti SC * —— 按 macOS → Windows → 其他顺序降级，保证中文显示质量。 * ============================================================ */ /* ============================================================ * §3 data-theme 切换机制 * * 切换方式：在 元素上设置 data-theme 属性即可。 * 例如： * CSS 选择器 html[data-theme="xxx"] 匹配对应主题块。 * * 可选值（共 9 套，按颜色由浅到深排列）： * light 纯白简约 —— 默认浅色基线 * blue 天蓝渐变 * colorful 彩色粉紫渐变 * tech 科技风深青渐变 * purple 暗紫（图片背景 + 半透明毛玻璃） * neon 霓虹风（深紫黑底） * blackgold 黑金（纯黑底 + 金色点缀） * dark 深色 —— 默认深色基线 * auto 自动模式 —— 首次进入时由 JS 根据浏览器深浅偏好，在对应组内随机选一套 * * 自动随机选择逻辑（auto 模式）： * - 首次打开页面且用户未手动切换主题时： * 浏览器浅色偏好 → 从 [light / blue / colorful] 中随机选一套 * 浏览器深色偏好 → 从 [tech / purple / neon / blackgold / dark] 中随机选一套 * - 手动切换后，将选择写入 Cookie 持久化，刷新页面不再随机。 * * 日历宜忌着色说明： * --cal-good（宜 / 吉日）：浅色主题用较深绿（#1a8a4a）， * 深色主题用亮绿（#4cdb86），确保在白/黑底上均可读。 * --cal-bad（忌 / 凶日）：浅色主题用较深红（#c23b2f / #d1493b）， * 深色主题用亮红（#ff6b6b），语义清晰无歧义。 * ============================================================ */ /* ============================================================ * §4.1 纯白 / 默认浅色基线（:root / auto / light） * * 作为 :root 的默认值，同时也是 data-theme="auto" 和 data-theme="light" 的取值。 * 纯白背景 + 黑色正文，最大对比度，最省眼力。 * ============================================================ */ :root, html[data-theme="auto"], html[data-theme="light"] { --name: 纯白; --main_bg_color: #ffffff; /* 纯白背景，无渐变 */ --main_text_color: #000000; /* 纯黑正文，对比度最高（WCAG AAA 级） */ --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%); --purple_text_color: #747bff; /* 紫蓝色，作为品牌强调色，白底上足够醒目 */ --text_bg_color: rgb(240 243 247); /* 极浅灰蓝，紧贴白底，微差区分 */; --item_bg_color: rgb(247 247 247); /* 浅灰卡片，与纯白背景产生 0.5% 亮度级差 */ --item_hover_color: rgba(244 245 246, 0.5); --item_left_title_color: #000000; /* 黑色标题，最高对比 */ --item_left_text_color: #494949; /* 深灰次要文字，对比充足但柔和 */ --footer_text_color: #222222; /* 深灰色页脚 */ --left_tag_item: #ffffff; /* 纯白标签块，和卡片背景统一 */ --left_tag_text: #000000; /* 黑字压白块，最高对比（WCAG AAA） */ --switch_track: rgb(210 210 210); /* 开关轨道：浅灰；黑色旋钮悬于其上，高对比辨识 */ --card_filter: 0px; /* 卡片不模糊——关闭耗性能特性，默认安全 */ --back_filter: 5px; /* 背景轻微模糊（5px），做毛玻璃质感 */ --back_filter_color: #00000000; /* 遮罩为全透明，不压暗白色背景 */ --fill: #000000; /* SVG 图标填充黑色 */ --cal-good: #1a8a4a; /* 宜/吉日：较深绿，#1a8a4a 在白底上清晰可辨 */ --cal-bad: #c23b2f; /* 忌/凶日：较深红，白底读红字不刺眼 */ } /* ============================================================ * §4.2 天蓝（blue） * * 左上角天蓝渐变 → 右下角过渡到白色； * 保持白底浅色基调的同时，注入清爽的天蓝色氛围。 * ============================================================ */ html[data-theme="blue"] { --name: 天蓝; --main_bg_color: linear-gradient(50deg, #a2d1ff, #ffffff); --main_text_color: #000000; /* 深字压浅蓝渐变，保证阅读清晰度 */ --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%); --purple_text_color: #5a3fd6; /* 比 light 加深紫蓝，避免浅蓝底上文字发虚 */ --text_bg_color: rgb(196 217 251); /* 淡蓝衬底，与天蓝渐变背景呼应 */ --item_bg_color: rgba(249, 250, 251, 0.5); --item_hover_color: rgba(244, 245, 246, 0.8); --item_left_title_color: #000000; --item_left_text_color: #494949; --footer_text_color: #222222; --left_tag_item: linear-gradient(50deg, #a2d1ff, #ffffff); --left_tag_text: #0a2a4a; /* 深蓝压浅蓝渐变标签，可读性好 */ --switch_track: rgb(150 190 230); /* 开关轨道：浅蓝色；黑旋钮提供最高对比 */ --card_filter: 0px; --back_filter: 5px; --back_filter_color: #00000000; /* 浅色背景不需压暗，遮罩全透明 */ --fill: #000000; } /* ============================================================ * §4.3 彩色（colorful） * * 135° 粉紫渐变背景（#fbc2eb → #a6c1ee → #fdcbf1）， * 视觉上比纯白/天蓝更活泼、浪漫，适合个人展示类主页。 * 所有文字颜色加深，确保在浅粉紫底上清晰可读。 * ============================================================ */ html[data-theme="colorful"] { --name: 彩色; --main_bg_color: linear-gradient(135deg, #fbc2eb, #a6c1ee 50%, #fdcbf1); --main_text_color: #211e36; /* 由 #2d2a4a 加深，保证浅粉紫底可读 */ --gradient: linear-gradient(120deg, #f093fb, #f5576c 30%, #4facfe 60%); --purple_text_color: #8e44ad; /* 由 #b06ab3 加深，避免浅底发灰 */ --text_bg_color: rgba(255 255 255 / 60%); --item_bg_color: rgba(255 255 255 / 55%); --item_hover_color: rgba(255 255 255 / 80%); --item_left_title_color: #211e36; --item_left_text_color: #39344f; /* 由 #5a5470 加深 */ --footer_text_color: #463f63; /* 由 #6b6480 加深，深底可读 */ --left_tag_item: linear-gradient(50deg, #f093fb, #4facfe); --left_tag_text: #211e36; /* 深色字压彩色渐变标签 */ --switch_track: rgb(220 160 210); /* 开关轨道：浅粉；深色旋钮辨识度高 */ --card_filter: 0px; --back_filter: 8px; /* 彩色背景稍多模糊（8px），使卡片更突出 */ --back_filter_color: #ffffff40; /* 白色半透明遮罩（25%），减轻背景彩色对卡片文字的视觉干扰 */ --fill: #211e36; } /* ============================================================ * §5.1 科技风（tech）—— 深色主题组 * * 135° 深青渐变（#0f2027 → #203a43 → #2c5364）， * 搭配青蓝 + 荧光绿品牌色，营造冷静、前瞻的科技感。 * 浅色文字在深色底上发光感强。 * ============================================================ */ html[data-theme="tech"] { --name: 科技风; --main_bg_color: linear-gradient(135deg, #0f2027, #203a43 50%, #2c5364); --main_text_color: #e0f7fa; /* 浅青绿正文，深底高对比不刺眼 */ --gradient: linear-gradient(120deg, #00f5d4, #00bbf9 50%, #9b5de5); --purple_text_color: #00bbf9; /* 亮蓝色强调，科技感 */ --text_bg_color: rgba(0 245 212 / 25%); --item_bg_color: rgba(13 30 40 / 55%); /* 半透明暗青卡面，透出底层渐变背景 */ --item_hover_color: rgba(0 245 212 / 20%); --item_left_title_color: #e0f7fa; --item_left_text_color: #8ecae6; /* 浅蓝青，深底高对比 */ --footer_text_color: #9fc6e0; /* 由 #6c8ea0 提亮，避免在深底上过暗 */ --left_tag_item: linear-gradient(50deg, #00bbf9, #00f5d4); --left_tag_text: #052b33; /* 深青压亮青渐变标签，确保字清晰 */ --switch_track: rgb(8 38 48); /* 开关轨道：深青底；亮青旋钮高对比 */ --card_filter: 0px; --back_filter: 6px; /* 中等模糊，压暗背景突出前景卡片 */ --back_filter_color: #00101880; /* 深蓝半透明遮罩（约 50%），增强毛玻璃层次感 */ --fill: #00f5d4; /* SVG 图标填充荧光绿 */ --cal-good: #4cdb86; /* 宜/吉日：亮绿，深色底可读 */ --cal-bad: #ff6b6b; /* 忌/凶日：亮红，深色底视觉警告 */ } /* ============================================================ * §5.2 暗紫（purple）—— 深色主题组 * * 背景使用大图（background.jpg），通过固定定位 + 半透明遮罩层 * （--back_filter_color）压暗图片，使前景文字清晰。 * 卡片使用极低透明度（#00000038），让图片透出，形成沉浸式视觉。 * ============================================================ */ html[data-theme="purple"] { --name: 暗紫; --main_bg_color: url(../img/background.jpg); /* 大图背景，不重复、居中、固定 */ --main_text_color: #eeeeee; /* 浅灰白文字，压深色图片背景 */ --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%); --purple_text_color: #9aa6ff; /* 由 #747bff 提亮，深色图片底上更清晰 */ --text_bg_color: #00000040; /* 黑底 25% 透明度，文字衬底 */ --item_bg_color: #00000038; /* 几乎透明的黑卡，最大限度露出背景图片 */ --item_hover_color: #33333338; /* 深灰半透明悬停反馈 */ --item_left_title_color: #ffffff; --item_left_text_color: #ffffff; /* 白字，在暗背景下最高对比 */ --footer_text_color: #ffffff; --left_tag_item: rgb(27 42 57 / 20%); /* 半透明暗蓝标签，不遮挡背景图 */ --left_tag_text: #ffffff; /* 白字压暗蓝标签 */ --switch_track: rgb(28 20 44); /* 暗紫轨道；白旋钮高对比 */ --card_filter: 0px; --back_filter: 20px; /* 较强模糊（20px），大幅模糊背景图，突出文字层 */ --back_filter_color: #00000030; /* 19% 黑遮罩压暗图片，保证文字可读 */ --fill: #ffffff; --cal-good: #4cdb86; --cal-bad: #ff6b6b; } /* ============================================================ * §5.3 霓虹风（neon）—— 深色主题组 * * 极深紫黑（#0d0221）纯色背景，搭配粉红 + 青色 + 黄色霓虹渐变， * 模拟赛博朋克风格。文字色彩饱和度较高，营造发光 RGB 效果。 * ============================================================ */ html[data-theme="neon"] { --name: 霓虹风; --main_bg_color: #0d0221; /* 深紫黑底，接近纯黑，是霓虹发光色的最佳衬底 */ --main_text_color: #f5f5ff; /* 近白正文，最高对比 */ --gradient: linear-gradient(120deg, #ff00e6, #00fff9 50%, #fffb00); --purple_text_color: #ff66f0; /* 由 #ff00e6 略提亮，减少视觉疲劳 */ --text_bg_color: rgba(255 0 230 / 20%); --item_bg_color: rgba(20 5 40 / 55%); /* 深紫半透明卡片 */ --item_hover_color: rgba(0 255 249 / 20%); --item_left_title_color: #ff5cf0; /* 霓虹粉标题，品牌色 */ --item_left_text_color: #5cffe8; /* 由 #00fff9 降低饱和度，长时间阅读不刺眼 */ --footer_text_color: #c9a3ff; /* 由 #b388ff 提亮 */ --left_tag_item: linear-gradient(50deg, #ff00e6, #00fff9); --left_tag_text: #1c0030; /* 极深紫压霓虹渐变标签，确保字清晰 */ --switch_track: rgb(38 6 58); /* 暗品红轨道；亮青旋钮高对比 */ --card_filter: 0px; --back_filter: 8px; --back_filter_color: #1a0033; /* 深紫红遮罩，整体色调统一 */ --fill: #00fff9; /* SVG 图标填充青色 */ --cal-good: #4cdb86; --cal-bad: #ff6b6b; } /* ============================================================ * §5.4 黑金（blackgold）—— 深色主题组 * * 纯黑底（#0a0a0a）+ 全金色系文字，营造奢华、高端感。 * 金色选择暖金光谱（#bf953f → #fcf6ba → #b38728）， * 非单纯亮黄，更接近贵金属质感。 * ============================================================ */ html[data-theme="blackgold"] { --name: 黑金; --main_bg_color: #0a0a0a; /* 纯黑底，为金色提供最高对比的映衬 */ --main_text_color: #e8c87a; /* 暖金色正文 */ --gradient: linear-gradient(120deg, #bf953f, #fcf6ba 30%, #b38728 60%); --purple_text_color: #d4af37; /* 纯金强调色 */ --text_bg_color: rgba(212 175 55 / 15%); --item_bg_color: rgba(20 18 12 / 70%); /* 深褐半透明卡片 */ --item_hover_color: rgba(212 175 55 / 20%); --item_left_title_color: #f0d98a; --item_left_text_color: #ddc584; /* 由 #c9b27a 提亮，黑底可读 */ --footer_text_color: #c2a35a; /* 由 #8c7a4a 提亮，避免太暗 */ --left_tag_item: linear-gradient(50deg, #bf953f, #b38728); --left_tag_text: #1c1505; /* 深褐压金标签 */ --switch_track: rgb(18 16 10); /* 近黑轨道；金旋钮高对比 */ --card_filter: 0px; --back_filter: 4px; /* 轻模糊，略微柔化黑色背景的刚硬感 */ --back_filter_color: #00000080; /* 50% 黑遮罩，保持背景均匀 */ --fill: #d4af37; /* SVG 图标填充金色 */ --cal-good: #4cdb86; --cal-bad: #ff6b6b; } /* ============================================================ * §5.5 深色（dark）—— 默认深色基线 * * 纯黑或近黑背景（rgb(0,0,0)），纯白文字。 * 作为深色主题组的基线参照，和 light 形成对称。 * 所有颜色均为深色优化，不使用高饱和强调色，走稳重路线。 * ============================================================ */ html[data-theme="dark"] { --name: 深色; --main_bg_color: rgb(0, 0, 0); --main_text_color: #ffffff; /* 白字黑底，最高对比 */ --gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%); --purple_text_color: #9aa6ff; /* 由 #747bff 提亮，深底视觉更明显 */ --text_bg_color: rgb(26 4 48); --item_bg_color: rgb(19 20 24); /* 纯色深灰卡片，无透明度——减少 GPU 合成层压力 */ --item_hover_color: rgb(19 23 27); --item_left_title_color: #ffffff; --item_left_text_color: #b8bcc2; /* 由 #8e8e8e 提亮，避免在深色背景上显得灰暗 */ --footer_text_color: #9aa0a6; /* 由 #646464 提亮 */ --left_tag_item: linear-gradient(50deg, #1f2327, #000000); --left_tag_text: #ffffff; /* 白字压暗渐变标签 */ --switch_track: rgb(14 15 18); /* 近黑轨道；白旋钮高对比 */ --card_filter: 0px; --back_filter: 0px; /* 纯黑底不需要毛玻璃模糊 —— 无背景图可模糊 */ --back_filter_color: #00000000; /* 遮罩全透明，不干扰纯黑背景 */ --fill: #ffffff; --cal-good: #4cdb86; --cal-bad: #ff6b6b; } /* ============================================================ * §6 auto 模式：跟随系统 / 浏览器深色偏好 * * 当用户浏览器或 OS 开启「深色模式」时， * data-theme="auto" 自动切换到深色主题组。 * 此媒体查询仅在 auto 模式且系统偏好为 dark 时生效。 * ============================================================ */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --name: 自动(深色); --main_bg_color: rgb(0, 0, 0); --main_text_color: #ffffff; --gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%); --purple_text_color: #9aa6ff; /* 提亮后的紫蓝，深底清晰 */ --text_bg_color: rgb(26 4 48); --item_bg_color: rgb(19 20 24); /* 纯色卡片，避免透明度导致背景文字穿透 */ --item_hover_color: rgb(19 23 27); --item_left_title_color: #ffffff; --item_left_text_color: #b8bcc2; --footer_text_color: #9aa0a6; --left_tag_item: linear-gradient(50deg, #1f2327, #000000); --left_tag_text: #ffffff; --switch_track: rgb(14 15 18); --card_filter: 0px; --back_filter: 0px; --back_filter_color: #00000000; --fill: #ffffff; --cal-good: #4cdb86; --cal-bad: #ff6b6b; } }