Skin and Theme Guide

Skin & Theme Guide (六大换肤与双控制滑块指南)

Clash Mini 抛弃了传统 UI 枯燥乏味的扁平纯色，以**「精致 3D 拟物、硬核物理质感与色彩发光（Vibrancy）联动」**作为最高视觉基准。

---

🎨 换肤选择器 (Skin Swapping)

设置面板底部的换肤选择器采用单行 Excel 单元格拼合表格形式横向排列，格子文字使用各自皮肤的英文原名渲染。

• 物理裁剪与揭露：选择器固定总宽度为 462.5px。在 270px 默认窄窗口下，仅最左侧的 Retro-3d 格子精准露出；拉宽窗口时，其余 5 个按钮会向右滑动逐步被揭露。
• 所见即所得（WYSIWYG）：未选中的单元格只显示扁平文字，而一旦点击选中某项，该单元格会立刻渲染出该皮肤下的真实物理按钮外观（例如选中 Retro-3d 会展现 Radial 黄金 3D 键帽；选中 Original 会变成原生扁平按钮），并应用对应的中英文字体共鸣风格。

---

🎭 六大美学皮肤及双滑块控制说明

每个皮肤下的两个控制滑块标签均显示为纯英文，且控制的底层渲染参数被完全重定义，在 LocalStorage 中独立保存，以防数值冲突。

皮肤名称 (Skin)	视觉特征与设计美学	滑块一 (Slider 1) 控制	滑块二 (Slider 2) 控制	字体族完美对齐 (英 / 中)
Retro 3D	默认皮肤。3D 拟物控制台，包含 Bevel 厚底、暗槽轨道、金属拉丝滑珠与发光 LED。	Depth (立体度) 控制 Bevel 边缘和 3D 厚度阴影。	Vibrancy (霓虹度) 控制光源的外发光强度和发光半径。	Trebuchet MS / SimHei (黑体)
Original	致敬经典。100% 复制原版默认配色与扁平布局，无立体厚度及背光特效。	Radius (圆角大小) 范围 0.0 - 5.0，调节控件的圆角。	Accent (主色调色相) 范围 0.0 - 3.0，通过旋转色相变换主色。	Segoe UI / Microsoft YaHei (微软雅黑)
Modern	摩登现代。扁平单色和微弱柔和阴影，禁用极光背景动画，呈现极简干净风格。	Roundness (圆角弧度) 线性调节按钮与面板的圆角。	Shadow (扁平阴影) 控制各卡片与面板扁平投影的深浅。	Outfit / DengXian (等线体)
Frosted Glass	磨砂玻璃。半透明材质和毛玻璃模糊效果，保留极光背景动画，视觉轻盈。	Opacity (背景不透明度) 控制玻璃材质的 Alpha 透明度。	Blur (毛玻璃浓度) 调节玻璃背板的模糊半径。	Segoe UI Light / Microsoft YaHei Light
Cyberpunk	暗黑霓虹。黑色深邃底色配合高对比度荧光青色、洋红色 1px 等宽边框和背光外发光。	Glow (发光强度) 范围 0.0 - 5.0，调节荧光框外发光。	Speed (流光速度) 控制主面板和外发光呼吸脉动的频率。	Consolas / NSimSun (等宽新宋)
Monochrome	黑白极简。去色黑白灰设计，1px 细线框，禁用极光背景，严防视觉打扰。	Contrast (对比度) 调节全局次要说明文字与分割线的对比度。	Border (线框粗细) 控制 3D 按键与卡片外围边线粗细。	Trebuchet MS / SimHei (黑体)

---

🌓 主题明暗覆盖与防“黑吃黑”机制

在 cyberpunk 和 monochrome 等高对比度皮肤下，Clash Mini 实施了动态的主题模式（Light/Dark）防“黑吃黑”覆盖：

• 动态属性注入：前端会将当前的主题模式（light 或 dark）作为属性 data-theme-mode 动态注入至最顶层的 html 元素。
• 高对比度配色重构：当处于浅色模式（Light Mode）时，系统会自动重构所有的卡片、按钮、输入框以及滑动条，将背景更改为高对比度的明亮色（如 #ffffff 或 #f8fafc），并用适当的强调色来替代深色背景下的青/粉文字，确保所有文本均具备无障碍级的高度可读性。