| name | cherrycss-theme |
| description | Cherry Studio 主题 CSS 制作指南 —— 了解 CSS 变量系统、毛玻璃技法、渐变背景等,最终输出可直接粘贴使用的 CSS 代码。 |
| trigger | cherrycss, cherry-css, 主题制作, CherryCSS主题, 主题开发, 写个主题, CSS主题 |
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 变量覆盖(深色 + 亮色)
- 特定元素样式定制
示例结构:
:root {
}
body[theme-mode="dark"] {
}
body[theme-mode="light"] {
}