halo-theme-WarmIsland/docs/customize/style.md

样式与配色

WarmIsland 主题的视觉设计围绕「暖夜中的小岛」这一意象展开，追求温暖、宁静、有质感的阅读体验。

设计哲学

暖夜小岛

想象一座深夜里温暖的小岛——远处是深邃的夜空，近处是篝火般的暖光。这就是 WarmIsland 的设计基调：

• 温暖：以暖色调为基础，避免冷硬的科技感
• 宁静：克制的动效和留白，不喧宾夺主
• 质感：毛玻璃、渐变光晕、细腻的阴影层次
• 呼吸：元素有节奏地律动，如岛上的微风

设计原则

1. 内容优先：所有视觉设计服务于内容阅读
2. 克制装饰：每个装饰元素都有其存在的理由
3. 层次分明：通过颜色、字号、间距建立清晰的信息层级
4. 温暖一致：从配色到动效，保持统一的温暖气质

色彩系统

浅色模式

变量	色值	用途
--bg	#faf7f2	页面背景，温暖的米白色
--bg-raised	#f3ede5	卡片背景，略深的暖色
--bg-overlay	rgba(250, 247, 242, 0.85)	遮罩层背景
--ink	#2c2420	主文字色，深棕黑
--ink-2	#7a6e64	次要文字，中灰棕
--ink-3	#b5a99e	辅助文字，浅灰棕
--rule	#e8e0d6	分隔线、边框
--accent	#d4764e	强调色，温暖的赤陶橙
--accent-hover	#c4613a	强调色悬停态，更深的赤陶
--accent-bg	#fdf0e8	强调色浅底，用于标签背景
--mist-pink	#f0e4de	薄雾粉，Hero 渐变用
--sea-salt	#e8e0d6	海盐色，与 rule 相同
--caramel	#8b6f5e	焦糖色，滚动条用
--glass-bg	rgba(250, 247, 242, 0.72)	毛玻璃背景
--glass-border	rgba(232, 224, 214, 0.5)	毛玻璃边框

深色模式

通过 html.dark 选择器切换，所有颜色变量重新定义：

变量	色值	说明
--bg	#1a1614	深棕黑背景
--bg-raised	#242018	略浅的卡片背景
--ink	#ede6de	浅色主文字
--ink-2	#9a8e84	次要文字
--ink-3	#5e544a	辅助文字
--accent	#e8955f	更亮的强调色（保证对比度）
--accent-hover	#f0a872	更亮的悬停态
--accent-bg	#2a1e16	深色强调底

阴影系统

变量	浅色模式	深色模式	用途
--shadow-sm	0 1px 3px rgba(44, 36, 32, 0.06)	0 1px 3px rgba(0, 0, 0, 0.2)	轻微阴影
--shadow-md	0 4px 16px rgba(44, 36, 32, 0.08)	0 4px 16px rgba(0, 0, 0, 0.25)	中等阴影
--shadow-lg	0 8px 32px rgba(44, 36, 32, 0.12)	0 8px 32px rgba(0, 0, 0, 0.35)	大阴影
--shadow-glow	0 0 40px rgba(212, 118, 78, 0.15)	0 0 40px rgba(232, 149, 95, 0.12)	强调色光晕

深色模式

切换机制

深色模式通过 html.dark 类名控制：

1. 跟随系统（默认）：根据 prefers-color-scheme 媒体查询
2. 手动切换：通过导航栏的主题切换按钮
3. 配置指定：通过 color_scheme 配置项强制指定

切换逻辑

// 优先级：localStorage > 配置项 > 系统偏好
var stored = localStorage.getItem("wi-theme");
var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
var scheme = document.currentScript.getAttribute("data-scheme");

if (stored === "dark") { isDark = true; }
else if (stored === "light") { isDark = false; }
else if (scheme === "dark") { isDark = true; }
else if (scheme === "light") { isDark = false; }
else if (!stored && prefersDark) { isDark = true; }

设计要点

• 深色模式不是简单的反色，而是重新定义了所有颜色变量
• 强调色在深色模式下更亮，保证足够的对比度
• 阴影在深色模式下使用纯黑，更自然
• 文字颜色保持温暖色调，不是纯白

字体系统

字体栈

变量	字体栈	用途
--font-sans	'Noto Serif SC', 'Source Han Serif SC', Georgia, serif	标题、强调文字
--font-body	'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif	正文、UI 文字
--font-mono	'JetBrains Mono', 'Fira Code', monospace	代码

设计思路

• 标题用衬线体：Noto Serif SC 赋予标题优雅的文艺气质
• 正文用无衬线体：Noto Sans SC 保证长文阅读的舒适度
• 代码用等宽体：JetBrains Mono 专为代码设计

::: tip 这些字体不会自动加载，需要在 Halo 后台或 HTML 中引入对应的字体 CSS。推荐使用 Google Fonts 或国内 CDN 镜像。 :::

间距系统

变量	值	用途
--space-xs	0.25rem	极小间距
--space-sm	0.5rem	小间距
--space-md	1rem	标准间距
--space-lg	1.5rem	大间距
--space-xl	2rem	超大间距
--space-2xl	3rem	区块间距
--space-3xl	4rem	大区块间距
--space-4xl	6rem	页面级间距

容器宽度

变量	值	用途
--container-sm	640px	小容器
--container-md	768px	中容器
--container-lg	1024px	大容器
--container-xl	1200px	最大容器
--content-max	800px	内容最大宽度

区块间距

--section-spacing: clamp(3rem, 2rem + 3vw, 6rem) — 响应式区块间距，在小屏幕上更紧凑。

圆角系统

SCSS 变量	值	用途
$border-radius-sm	8px	小元素（标签、代码块）
$border-radius-md	12px	中等元素（卡片、图片）
$border-radius-lg	16px	大元素（卡片、面板）
$border-radius-xl	24px	超大元素
$border-radius-full	9999px	胶囊按钮、头像

配置项

通过 border_radius 配置项可全局调整圆角风格：

选项	效果
small	较小的圆角
medium	中等圆角（默认）
large	较大的圆角

动画系统

时间曲线

变量	值	用途
--ease-out-expo	cubic-bezier(0.16, 1, 0.3, 1)	弹性出场，用于悬停和展开
--ease-out-quart	cubic-bezier(0.25, 1, 0.5, 1)	平滑出场，用于颜色过渡
--ease-in-out-cubic	cubic-bezier(0.65, 0, 0.35, 1)	对称缓动，用于循环动画

时长

变量	值	用途
--duration-fast	150ms	快速反馈（颜色变化）
--duration-normal	300ms	标准过渡（悬停效果）
--duration-slow	500ms	慢速过渡（大位移）
--duration-breath	3s	呼吸动画周期

关键帧动画

动画名	效果	用途
breathe	透明度 0.4→0.7 + 缩放 1→1.08	Hero 光球呼吸
fadeInUp	透明度 0→1 + 上移 20px	元素入场
float	上下浮动 6px	装饰元素
shimmer	背景位置平移	加载占位
scrollHint	透明度 + 下移 8px	滚动指示器
likeHeartbeat	缩放 1→1.3→0.9→1	点赞心跳

动画开关

配置	说明	默认值
animation_enabled	启用动效	true
animation_breath	呼吸动画	true
animation_scroll_reveal	滚动渐入	true
animation_cursor_glow	光感跟随	false

关闭动效时，html 元素添加 wi-no-animations 类名。