tomevault-io CherryCSS 主题 CSS 制作指南
本 skill 指导你为 Cherry Studio 制作自定义 CSS 主题，最终输出是一段可直接粘贴到 Cherry Studio 设置 → 显示设置 → 自定义 CSS 的代码。
制作主题前，可先访问 CherryCSS 项目网站 cherrycss.com 浏览已有主题的样式和效果，获取配色和风格灵感喵~
Cherry Studio CSS 变量系统
Cherry Studio 通过 CSS 变量控制主题外观。核心变量如下：
颜色变量
| 变量 | 作用 | 暗色模式参考值 | 亮色模式参考值 |
|---|---|---|---|
--color-background |
主背景 | 深色 | 亮色 |
--color-background-soft |
次背景 | 稍亮 | 稍暗 |
--color-background-mute |
更深层背景 | 更亮/更暗 | 更暗/更亮 |
--color-primary |
主题强调色 | #7C5CFC | #7C5CFC |
--color-primary-soft |
柔和主题色 | primary 60% 透明度 | 同左 |
--color-primary-mute |
淡主题色 | primary 20% 透明度 | 同左 |
文字变量
| 变量 | 作用 |
|---|---|
--color-text-1 |
主文字 |
--color-text-2 |
次文字（70% 透明度） |
--color-text-3 |
占位文字（45% 透明度） |
界面变量
| 变量 | 作用 |
|---|---|
--color-border |
边框色 |
--chat-background-user |
用户消息背景 |
--chat-background-assistant |
AI 消息背景 |
--navbar-background / --navbar-background-mac |
导航栏背景 |
--color-hover |
悬停态背景 |
--color-active |
激活态背景 |
--color-code-background |
代码块背景 |
常用 CSS 技法
1. 基础变量覆盖
两种模式都需要覆盖，格式如下：
/* 暗色模式 */
body[theme-mode="dark"] {
--color-background: #1A1A2E;
--color-text-1: #F0EEF5;
--chat-background-user: rgba(124, 92, 252, 0.15);
/* ... */
}
/* 亮色模式 */
body[theme-mode="light"] {
--color-background: #F0EEF5;
--color-text-1: #2D2B3A;
--chat-background-user: rgba(124, 92, 252, 0.08);
/* ... */
}
2. 毛玻璃效果（核心属性：backdrop-filter）
.glass {
background: rgba(20, 16, 50, 0.50) !important;
backdrop-filter: blur(16px) saturate(180%) !important;
-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}
建议分层模糊强度：
8px— 消息气泡、代码块12px— 内容容器、折叠面板16px— 侧边栏、导航栏、输入框20px— 模态框、下拉菜单
3. 渐变背景
body[theme-mode="dark"] {
--color-background: linear-gradient(135deg,
rgba(15, 12, 41, 0.92) 0%,
rgba(48, 43, 99, 0.85) 50%,
rgba(36, 36, 62, 0.92) 100%
);
}
配合 body::after 伪元素实现毛玻璃渐变背景：
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: var(--color-background);
backdrop-filter: blur(16px) saturate(180%);
}
4. 消息气泡边框
.chat-item.user .message-content-container {
border-left: 3px solid rgba(124, 92, 252, 0.40) !important;
}
.chat-item.assistant .message-content-container {
border-left: 3px solid rgba(255, 255, 255, 0.10) !important;
}
5. 输入框聚焦光晕
#inputbar:focus-within {
border-color: rgba(124, 92, 252, 0.50) !important;
box-shadow: 0 0 12px rgba(124, 92, 252, 0.15) !important;
}
输出格式
根据用户需求输出完整可用的一段 CSS，包含：
- 注释头（主题名称、风格说明）
- CSS 变量覆盖（深色 + 亮色）
- 特定元素样式定制
示例结构：
/*
========================
主题名称 · 风格说明
========================
支持 Windows / macOS 双平台
*/
/* ===== 全局变量 ===== */
:root {
/* 全局变量定义 */
}
/* ===== 暗色模式 ===== */
body[theme-mode="dark"] {
/* 暗色变量覆盖 */
}
/* ===== 亮色模式 ===== */
body[theme-mode="light"] {
/* 亮色变量覆盖 */
}
/* ===== 特定元素样式 ===== */
/* 侧边栏、导航栏、输入框、消息气泡、面板等 */
Source: boilcy/CherryCSS — distributed by TomeVault.