README
2025-07-10 小更新
- ctrl/cmd+F 搜索框样式
- 小程序顶端名字栏改为非透明
2025-07-07 小更新
- 对话面板顶端的系统提示词换颜色+文字模糊
- 深度思考 + MCP 工具提示背景
- 界面载入动画调整为 drop-in 形式
参考了许多主题缝合出来的结果。
动画取自 https://cherrycss.com/ 里的「脉动交互」
部分半透明配色来自 GitHub - hakadao/CherryStudio-Aero: Give your Cherry Studio a modern, Aero theme | 給你 Cherry Studio 一個現代的 Aero 主題
在自己 mac 电脑上测试的，没有在 Windows 上使用过；但相信 css 应该是通用的
用于 Cherry Studio 1.4.7；最近两个版本 cherry ui 有一些改动，部分 css 类改了，老点的版本不一定有一样效果。
只配置了深色主题
自定义 css 代码如下
第一步：先在
设置 --> 显示设置选择深色模式
第二步：复制如下 css 代码到
设置 --> 显示设置的 自定义 css 框
所有颜色设置都可以按自己喜好调整一下
可以自行替换背景 .jpg 的地址更换图片
自行调整背景图片的初始模糊值，各个设置版面的毛玻璃模糊半径，见代码中的>>>>>> 说明 <<<<<<
/*------------------------------------*\
添加少女终末旅行背景
\*------------------------------------*/
body[theme-mode="dark"] {
position: relative;
/* 确保内容在模糊背景之上，如果出现问题可以尝试添加 */
z-index: 1;
}
/* 2. 创建一个伪元素来承载背景和模糊效果 */
body[theme-mode="dark"]::before {
/* 必须的属性 */
content: '';
/* 背景图片和样式 */
/* >>>>>> 自行替换 .jpg 的地址 <<<<<< */
background-image: url('https://img.moegirl.org.cn/common/d/d6/Girls_Last_Tour_KV3.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
/* 对背景 .jpg 应用基础模糊效果，数值可以根据需要调整 */
/* 默认背景图片不加模糊 */
/* >>>>>> 自行调整模糊半径 px 值 <<<<<< */
/* filter: blur(0px); */
/* 定位和层级，让伪元素铺满整个 body 并置于内容之下 */
position: fixed; /* 或者 absolute，取决于你的布局需求 */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
/*------------------------------------*\
助手信息显示框
\*------------------------------------*/
/* 助手信息文字主体：浅紫色 */
.message-assistant .block-wrapper .markdown p {
color: #efc3ea;
}
/* 助手信息加 padding，圆角，半透明背景和毛玻璃效果 */
.bubble:not(.multi-select-mode) .message-assistant .message-content-container {
border-radius: 15px;
padding: 30px;
background: linear-gradient(to right, hsl(308deg 39% 67% / 5%), hsl(55deg 51% 56% / 10%), hsl(308deg 58% 68% / 3%), hsl(55deg 51% 56% / 10%), hsl(308deg 39% 67% / 5%));
backdrop-filter: blur(10px);
}
/*------------------------------------*\
用户信息显示框
\*------------------------------------*/
/* 用户信息框毛玻璃效果 */
.bubble:not(.multi-select-mode) .message-user .message-content-container {
border-radius: 15px;
padding: 30px;
background: linear-gradient(to right, hsl(308deg 39% 67% / 5%), hsl(55deg 51% 56% / 10%), hsl(308deg 58% 68% / 3%), hsl(55deg 51% 56% / 10%), hsl(308deg 39% 67% / 5%));
backdrop-filter: blur(10px);
}
/* 用户信息文字加粗 */
/* 加上 inherit 才能让 font-weight 生效 */
*, *::before, *::after {
font-weight: inherit;
}
.message-user {
font-weight: 800 !important
}
/* 用户信息文字主体：绿色 */
/* >>>>>> 可以自己设别的字体颜色 <<<<<< */
.message-user .block-wrapper .markdown p {
color: #b5f8b9;
}
/* 输入框：圆角矩形，半透明背景，毛玻璃效果 */
/* 光晕边框 */
#inputbar::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: linear-gradient(
90deg,
#ff6a01, #f8c91c, #8a2be2, #00bfff, #ff6a01
);
background-size: 300% 300%;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
z-index: -1;
}
#inputbar:focus-within::before {
opacity: 1;
}
/* 输入框聚焦的静态光晕框 */
#inputbar:focus-within {
animation: softGlow 3s ease-in-out infinite;
}
#inputbar {
position: relative;
resize: none;
background: rgba(41, 29, 34, 0.5);
margin-left: 20px;
margin-right: 20px;
border: 1px solid #333;
backdrop-filter: blur(10px);
}
/* 多级标题样式 */
.markdown h1 { font-size: 2em; color: #ffadad; border: none; padding-bottom: 0; }
.markdown h2 { font-size: 1.75em; color: #ffd6a5; border: none; padding-bottom: 0; }
.markdown h3 { font-size: 1.5em; color: #fdffb6; border: none; padding-bottom: 0; }
.markdown h4 { font-size: 1.25em; color: #caffbf; border: none; padding-bottom: 0; }
.markdown h5 { font-size: 1.1em; color: #9bf6ff; border: none; padding-bottom: 0; }
.markdown h6 { font-size: 1em; color: #a0c4ff; border: none; padding-bottom: 0; }
/*------------------------------------*\
快捷助手设置
\*------------------------------------*/
/* 快捷助手面板加毛玻璃效果 */
.iAPqoN {
backdrop-filter: blur(50px);
}
/* 快捷助手面板背景 */
#root {
background: rgba(1,1,1,0.5);
}
/* 快捷助手面板 用户信息样式 */
#root .bubble .message-content-container {
border: solid 1px #333;
padding: 15px;
border-radius: 15px;
max-width: 80%;
}
/* 移除快捷助手里 助手信息 的边框，加 margin */
.MessageContentContainer-efBnGd.fgTptz.message-content-container {
border: none !important;
margin-top: 20px;
}
/* 快捷助手设置窗口最小宽度 */
.ant-modal-root .ant-modal-centered .ant-modal {
width: min(900px, 70vw) !important;
}
/* 快捷助手底下按钮 padding 和 背景 */
.css-var-«r0».ant-tag {
--ant-tag-default-bg: #473544;
padding: 5px;
}
/*------------------------------------*\
其它设置
\*------------------------------------*/
/* 全局字体大小；全局超链接字体：绿色 */
* {
font-size: 18px !important;
--color-link: #a2fdb5;
--ant-color-link: #1fb572;
}
/* 用户、助手的强调文字颜色：黄色 */
.markdown strong {
color: #ffffaa;
}
/* 各个设置界面加毛玻璃效果 */
/* >>>>>> 自行调整模糊半径 px 值 <<<<<< */
.eTRMVy, .iaOCiL, .faeYdD, .deaugY, .jGVA, .lfzpcl, .etgWPh, .jKZwzC {
backdrop-filter: blur(10px);
}
/* 模型服务的模型列表背景 */
.fEalOw {
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.04);
}
/* 右置话题面板的背景 */
.eydhxk {
background-color: rgb(50 40 50 / 30%) !important;
backdrop-filter: blur(10px);
}
:root {
--fill-1: rgba(120 120 122 / 0.1);
--fill-2: rgba(120 120 122 / 0.3);
--fill-3: rgba(120 120 122 / 0.25);
--color-black-soft: var(--fill-2);
--color-black-mute: var(--fill-3);
--chat-background: rgba(36 34 40 / 0);
--color-list-item: #5b4057;
--color-list-item-hover: #4d4c4d;
--button-hover-light: #79BF55;
--button-hover-dark: #009A39;
--input-bg-light: #E6E6E6;
--input-bg-dark: #202020;
--button-border-radius: 12px;
--button-border-radius-hover: 8px;
--button-border-radius-active: 12px;
--background-light-new: #F3F3F3;
--background-assistant-light-new: #E3E3E3;
--animation: cubic-bezier(.56, -0.37, .46, 1.58);
--short-timer: 0.2s;
--long-timer: 0.5s;
}
@media (prefers-color-scheme: dark) {
body[theme-mode=light] {
background: rgba(255 255 255 / 0.3);
}
}
@media (prefers-color-scheme: light) {
body[theme-mode=dark] {
background: rgba(0.4 0.16 0.19 / 1);
}
}
[theme-mode=dark] #chat,
[theme-mode=dark] [class^=SettingGroup],
[theme-mode=dark] [class^=MainContainer],
[theme-mode=dark] [class^=MainContent] {
background-color: hsla(0 0% 0% / 0.2);
}
[theme-mode=dark] [class^=ant-modal] {
--color-black: #1b1b1f;
--color-black-soft: #262626;
--color-black-mute: #363636;
--color-background: var(--color-black);
--color-background-soft: var(--color-black-soft);
--color-background-mute: var(--color-black-mute);
}
/* MCP 成功提示文字颜色降对比度 */
.fpTzlW {
color: #63a145;
}
/* 深度思考、MCP 工具提示等 collapsable 加背景 */
.ant-collapse {
border: 0px solid var(--color-border);
background: hsl(32.82deg 15.57% 27.91% / 30%);
}
/* 深度思考、MCP 信息提示 padding */
.css-var-«r0» {
--ant-padding-xs: 15px;
--ant-padding-sm: 8px;
}
/* 对话面板上方系统提示词，改背景，增加 padding */
.MuLtf {
background: hsl(32.82deg 15.57% 27.91% / 20%);
padding: 20px 16px;
}
/* ctrl/cmd + F 搜索输入框的样式 */
.fphXkb {
border: 1px solid #777;
padding: 15px 15px;
background: hsl(115.07deg 30.01% 56.03% / 50%);
backdrop-filter: blur(5px);
}
.jyOQVw::placeholder {
color:#ccc;
}
/* 对话面板上方系统提示词，改成火的颜色并加文字模糊效果 */
/* >>>>>> 自行调整模糊半径 <<<<<< */
.goOcDs {
color: rgb(255 255 170 / 40%);
filter: blur(1.5px);
transition: filter 0.3s ease-in-out;
}
.goOcDs:hover{
filter:none;
}
/* 忘了啥玩意 */
.kaRosT {
margin-bottom: 10px;
}
/* 复制粘贴过来的，调整某些色块的颜色和透明度 */
[theme-mode=dark] #content-container,
[theme-mode=dark] .minapp-drawer .ant-drawer-body {
background-color: rgba(50 34 39 / 0.05);
}
[theme-mode=dark] #content-container, [theme-mode=dark] .minapp-drawer .ant-drawer-body {
background-color: rgba(100 50 80 / 0.05);
}
/*------------------------------------*\
动画设置
\*------------------------------------*/
/* 输入框聚焦发光动画 */
@keyframes softGlow {
0%, 100% { box-shadow: 0 0 10px rgba(255, 106, 1, 0.1); }
50% { box-shadow: 0 0 15px rgba(138, 43, 226, 0.15); }
}
/* 各界面载入的下放动画效果 */
@keyframes page-popup {
from {
transform: translateY(-2em);
opacity: 0%;
}
to {
transform: translateY(0);
opacity: 100%;
}
}
[class^="MessageLineContainer"] {
border-radius: var(--button-border-radius);
}
[class^="SettingHelpTextRow"] {
display: inline-block;
}
[class^="Icon"]:hover,
[class^="ant"]:hover,
[class^="ActionButton"]:hover,
[class^="TopicListItem"]:hover,
[class^="ProviderListItem"]:hover,
[class^="MenuItem"]:hover,
[class^="MenuButton"]:hover,
[class^="EmojiBackground"]:hover {
border-radius: var(--button-border-radius-hover) !important;
transition: border-radius var(--short-timer) var(--animation);
}
[class^="IconItem"]:active,
[class^="ant-avatar"]:active,
[class^="ant-btn"]:active,
[class^="ant-segmented-item"]:active,
[class^="anticon"]:active,
[class^="ant-upload"]:active,
[class^="ant-divider"]:active,
[class^="ant-tooltip"]:active,
[class^="ant-message"]:active,
[class^="ActionButton"]:active,
[class^="TopicListItem"]:active,
[class^="ProviderListItem"]:active,
[class^="MenuItem"]:active,
[class^="MenuButton"]:active,
[class^="EmojiBackground"]:active,
[class~="ant-dropdown-menu-item"]:active,
[class~="ant-dropdown-menu-submenu-title"]:active,
[class~="ant-select-selector"]:active,
[class~="ant-select-item"]:active {
border-radius: var(--button-border-radius-active) !important;
transition: border-radius var(--short-timer) var(--animation);
}
/* Adapted to v1.2.8 */
[class^="Menus"] {
[class^="Icon"]:active {
border-radius: var(--button-border-radius-active) !important;
transition: border-radius var(--short-timer) var(--animation);
}
}
[class^="Icon"],
[class^="ant"],
[class^="ActionButton"],
[class^="TopicListItem"],
[class^="ProviderListItem"],
[class^="MenuItem"],
[class^="MenuButton"],
[class^="EmojiBackground"] {
border-radius: var(--button-border-radius) !important;
}
[class^="ant-switch"] {
border-radius: 100px !important;
}
body[theme-mode=dark] {
background-color: var(--background-dark-new) !important;
}
[theme-mode=dark] .bubble .message-user .message-action-button:hover {
background-color: var(--button-hover-dark) !important;
}
[theme-mode=dark] [class^="ant-input"],
/* 控制助手栏和话题栏的载入 slide in 动画 */
/* [class$="-tabs-content"], */
/* [class$="-tab"]
[id^="content-container"], */
[class^="MessageContainer"],
[class^="SettingContent"],
[class^="SettingContainer"],
[class^="SettingGroup"],
[class^="MenuList"],
[class^="Main"],
[class~="message-assistant"] {
animation: page-popup var(--short-timer) var(--animation);
}
[class~="message-user"] {
animation: page-popup var(--short-timer) var(--animation);
}
