Cherry Studio 自定义样式
本文最后更新于 2026-07-11,文章内容可能已经过时。

/*
========================
Cherry Studio 自定义样式
========================
*/
:root {
--color-white-soft: #F0F7F8;
--color-black-soft: #2A5254;
--color-primary: #3C707A;
--color-primary-soft: rgba(60, 112, 122, 0.6);
--color-primary-mute: rgba(60, 112, 122, 0.2);
}
/* Dark mode */
body[theme-mode="dark"] {
--color-background: #2A5254;
--color-background-mute: #1D4247;
--color-background-soft: #3E7A83;
--navbar-background: #1D4247;
--navbar-background-mac: rgba(29, 66, 71, 0.85);
--chat-background: #2A5254;
--chat-background-user: #3C707A;
--chat-background-assistant: #1D4247;
--chat-text-user: #E6F3F4;
--color-text: #E6F3F4;
--color-hover: #3E7A83;
--color-active: #4B8E98;
--color-border: rgba(230, 243, 244, 0.15);
--color-border-soft: rgba(230, 243, 244, 0.08);
}
/* Light mode */
body[theme-mode="light"] {
--color-primary: #3C707A;
--color-primary-soft: rgba(60, 112, 122, 0.5);
--color-primary-mute: rgba(60, 112, 122, 0.15);
--color-background: #E6F3F4;
--color-background-mute: #C2E3E4;
--color-background-soft: #D4EBEC;
--navbar-background: #DAF0F1;
--chat-background: #F0F7F8;
--chat-background-user: #E6F3F4;
--chat-background-assistant: #F7FBFB;
--color-text: #2A5254;
--color-hover: #EAF5F6;
--color-active: #DFF0F1;
--color-border: rgba(42, 82, 84, 0.1);
--color-border-soft: rgba(42, 82, 84, 0.05);
--color-white: #F0F7F8;
}
/* 侧边栏加深 */
body[theme-mode="dark"] #app-sidebar {
background: #17383c !important;
}
body[theme-mode="light"] #app-sidebar {
background: #D4EBEC !important;
}
/* 用户气泡 */
body[theme-mode="dark"] .message-user .message-content-container {
background: rgba(60, 112, 122, 0.7) !important;
border: 1px solid rgba(180, 220, 225, 0.15) !important;
color: #E6F3F4 !important;
}
body[theme-mode="light"] .message-user .message-content-container {
background: rgba(212, 235, 236, 0.85) !important;
border: 1px solid rgba(60, 112, 122, 0.15) !important;
color: #2A5254 !important;
}
/* AI 气泡 */
body[theme-mode="dark"] .message-assistant .message-content-container {
background: rgba(29, 66, 71, 0.7) !important;
border: 1px solid rgba(230, 243, 244, 0.06) !important;
color: #D4E8EA !important;
}
body[theme-mode="light"] .message-assistant .message-content-container {
background: rgba(247, 251, 251, 0.75) !important;
border: 1px solid rgba(42, 82, 84, 0.05) !important;
color: #2A5254 !important;
}
/* 输入框 */
body[theme-mode="dark"] .inputbar-container,
body[theme-mode="dark"] #inputbar {
background: rgba(62, 122, 131, 0.55) !important;
border: 1px solid rgba(180, 220, 225, 0.18) !important;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2) !important;
}
body[theme-mode="light"] .inputbar-container,
body[theme-mode="light"] #inputbar {
background: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(60, 112, 122, 0.15) !important;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.04) !important;
}
body[theme-mode="dark"] .inputbar-container:focus-within,
body[theme-mode="dark"] #inputbar:focus-within {
border-color: rgba(130, 200, 210, 0.45) !important;
}
body[theme-mode="light"] .inputbar-container:focus-within,
body[theme-mode="light"] #inputbar:focus-within {
border-color: rgba(60, 112, 122, 0.4) !important;
}
/* 气泡内边距 */
.message-content-container {
padding: 20px !important;
border-radius: 10px !important;
}
/* Bug fixes */
.bubble .message-user .message-action-button:hover {
background-color: var(--color-background-mute);
}
body[theme-mode="dark"] {
--color-list-item: var(--color-background-soft) !important;
--color-list-item-hover: var(--color-background-soft) !important;
}
body[theme-mode="light"] {
--color-list-item: var(--color-background-soft) !important;
--color-list-item-hover: var(--color-background-soft) !important;
}
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 yuan
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果

