本文最后更新于 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;
}