Cherry Studio 主题[自带护眼绿+可替换字体]

[1942442593 (黎川)]

基本照抄这位佬的代码了,修改了日间模式的代码,并且默认为霞鹜文楷字体

[Cherry Studio 主题] 自用分享

/* | | | 主题：QAQ的主题 | | | | 简介：一款简约美观的个性化主题。 | | 核心特色： | | - 全屏动态背景：支持为深色/浅色模式设置不同的背景图片。 | | - 通体毛玻璃：所有核心界面（对话、侧边栏、输入框等）均采用优雅的毛玻璃 | | 半透明效果，让背景画面若隐若现。 | | - 多彩助手列表：自动为助手分组应用不同颜色，美观且易于区分。 | | | */ /* |…

图片展示

• 日间模式
  
  
  
  
  
• 夜间模式
  
  
  
  
  
  
  
  

目测应该没有bug了吧,小小的改动了一下,日间模式照抄的汝窑绿配置,感觉很清新的绿色

CSS 代码

/* | [模块一] 核心主题样式 (Core Theme & Layout) */

/* | :sparkles: 用户配置区域 (1/2) - 请在此处修改您的本地字体 | */
:root {
    --font-default: 霞鹜文楷 Medium, Consolas, ‘等线’, sans-serif; /* 全局默认字体 */
    --font-code: Maple Mono Normal NF CN SemiBold, Monaco, ‘Andale Mono’, ‘Ubuntu Mono’, monospace; /* 代码块专用字体 */
}

*:not(.katex):not(.katex ):not(.iconfont) {
    font-family: var(--font-default) !important;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-code) !important;
}

/* — 1.2 主题核心变量 (Core Variables) — */
:root {
    --duration-quick: 0.15s;
    --duration-normal: 0.3s;
    --duration-long: 0.5s;
    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius-dynamic: 12px;
    --radius-large: 12px;
    --color-brand-primary: oklch(65% 0.05 250);
    --color-brand-hover: color-mix(in oklch, var(--color-brand-primary) 90%, black);
    --background-blur: 12px;

    /* Ru-yao-lv Root variables */
    --color-white-soft: #F2F7F6;
    --color-black-soft: #1A3937;
    --color-primary: #388E70;
    --color-primary-soft: rgba(56, 142, 112, 0.6);
    --color-primary-mute: rgba(56, 142, 112, 0.2);
}


/* — 1.3 深色模式 (Dark Mode) - Original QAQ Theme — */
body[theme-mode="dark"] {
    --background-overlay-opacity: 0.3;
    --color-background: linear-gradient(145deg, rgba(28, 28, 30, 0.4) 0%, rgba(44, 44, 46, 0.4) 100%);
    --color-background-soft: linear-gradient(145deg, rgba(44, 44, 46, 0.3) 0%, rgba(58, 58, 60, 0.3) 100%);
    --navbar-background: linear-gradient(to right, rgba(28, 28, 30, 0.4) 0%, rgba(44, 44, 46, 0.4) 100%);
    --chat-background-user: linear-gradient(to right, rgba(30, 144, 255, 0.3) 0%, rgba(65, 172, 255, 0.3) 100%);
    --chat-background-assistant: linear-gradient(to right, rgba(72, 72, 74, 0.3) 0%, rgba(85, 85, 87, 0.3) 100%);
    --ctp-text: rgba(255, 255, 255, 0.85);
    --code-bg-dark: rgba(30, 30, 32, 0.6);
}

/* — 1.4 浅色模式 (Light Mode) - Ru-yao-lv Theme — */
body[theme-mode="light"] {
    --background-overlay-opacity: 0.15;
    --color-background: #E8F0F0;
    --color-background-mute: #B5D5D3;
    --color-background-soft: #CEE3E2;
    --navbar-background: #DCE8E7;
    --chat-background: #F0F6F6;
    --chat-background-user: #CEE3E2;
    --chat-background-assistant: #DCE8E7;
    --color-text: #1A3937;
    --ctp-text: #1A3937;
    --color-hover: #DDE8E7;
    --color-active: #D2E2E1;
    --color-border: rgba(26, 57, 55, 0.12);
    --color-border-soft: rgba(26, 57, 55, 0.06);
    --color-white: #F0F6F6;
    --code-bg-light: rgba(240, 240, 245, 0.3);
}

/* — 1.5 基础布局与背景 (Base Layout & Background) — */
body {
    position: relative;
    /* Removed background-image property */
    background-color: #333; /* Fallback color */
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    opacity: var(--background-overlay-opacity);
    backdrop-filter: blur(var(--background-blur));
    -webkit-backdrop-filter: blur(var(--background-blur));
    z-index: -1;
}

/* — 1.6 核心组件适配 (Core Component Adaptations) — */
#app-sidebar,
#content-container,
#home-page .navbar {
    background: transparent !important;
}

/* Dark mode bubble style */
body[theme-mode="dark"] .message-content-container {
    background: color-mix(in srgb, var(--color-background-soft), transparent 50%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}
/* Light mode bubble styles from Ru-yao-lv */
body[theme-mode="light"] .message-user .message-content-container {
     background: var(--chat-background-user) !important;
     border-color: var(--color-border-soft) !important;
}
body[theme-mode="light"] .message-assistant .message-content-container {
     background: var(--chat-background-assistant) !important;
     border-color: var(--color-border-soft) !important;
}
.message-content-container {
    backdrop-filter: blur(16px);
    padding-left: 12px !important;
    padding-right: 12px !important;
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-dynamic);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: none;
}


#content-container .code-block,
#content-container .shiki {
    background-color: var(--code-bg-dark) !important;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body[theme-mode="light"] #content-container .code-block,
body[theme-mode="light"] #content-container .shiki {
    background-color: var(--code-bg-light) !important;
    border-color: rgba(0, 0, 0, 0.1);
}

#inputbar {
    background: color-mix(in srgb, var(--color-background-soft), transparent 50%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-large) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    margin: -8px 18px 15px 18px !important;
    transition: none;
}

body[theme-mode="dark"] #inputbar {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body[theme-mode="light"] #inputbar {
    border-color: var(--color-border) !important;
}

/* — 1.7 滚动条美化 (Scrollbar Styling) — */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
body[theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* | [模块二] 侧边栏助手列表美化 (Sidebar Assistant List Beautification) */

/* — 2.1 分组颜色定义 — */
#app-sidebar .TagsContainer-erHQJu:nth-of-type(1) { --group-color: 59, 130, 246; } /* 蓝色 */
#app-sidebar .TagsContainer-erHQJu:nth-of-type(2) { --group-color: 34, 197, 94; } /* 绿色 */
#app-sidebar .TagsContainer-erHQJu:nth-of-type(3) { --group-color: 168, 85, 247; } /* 紫色 */
#app-sidebar .TagsContainer-erHQJu:nth-of-type(4) { --group-color: 249, 115, 22; } /* 橙色 */

/* — 2.2 助手分组容器 — */
#app-sidebar .TagsContainer-erHQJu {
    margin: 12px 8px;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(var(--group-color, 156, 163, 175), 0.08);
    border: 1px solid rgba(var(--group-color, 156, 163, 175), 0.12);
    overflow: hidden;
    transition: all 0.2s ease;
}
.TagsContainer-erHQJu:has(.GroupTitle-bZsCjw) {
    padding: 5px;
}

/* — 2.3 分组标题 — */
.GroupTitle-bZsCjw {
    margin: 0;
    padding: 14px 16px;
    background: rgba(var(--group-color, 156, 163, 175), 0.12);
    border-bottom: 1px solid rgba(var(--group-color, 156, 163, 175), 0.08);
    cursor: pointer;
}
.GroupTitleName-ifOZPj {
    font-weight: 600;
    font-size: 14px;
    color: rgba(var(--group-color, 156, 163, 175), 0.9);
}
.GroupTitleDivider-hDobAZ {
    display: none;
}

/* — 2.4 助手项 (默认、悬停、激活状态) — */
.Container-cFFyqi {
    border-radius: 8px;
    transition: all 0.2s ease;
    margin: 2px 0;
    background: transparent;
    border: 1px solid transparent;
}
.AssistantNameRow-eRVxCS {
    padding: 10px 12px;
    background: transparent !important;
}
.AssistantName-cHMAyM {
    color: #e5e7eb;
    transition: all 0.2s ease;
}
body[theme-mode="light"] .AssistantName-cHMAyM {
    color: var(--color-text) !important;
}
.Container-cFFyqi:hover {
    background: rgba(var(--group-color, 156, 163, 175), 0.08) !important;
    transform: translateX(1px);
}
.Container-cFFyqi.active {
    background: rgba(var(--group-color, 156, 163, 175), 0.12) !important;
    border-color: rgba(var(--group-color, 156, 163, 175), 0.25);
}

/* — 2.5 “添加助手” 按钮 — */
.AssistantAddItem-cnwcTr {
    margin-top: 8px;
    padding: 12px;
    border: 2px dashed rgba(var(--group-color, 156, 163, 175), 0.25);
    border-radius: 8px;
    background: rgba(var(--group-color, 156, 163, 175), 0.04);
    transition: all 0.2s ease;
}
.AssistantAddItem-cnwcTr:hover {
    border-color: rgba(var(--group-color, 156, 163, 175), 0.4);
    background: rgba(var(--group-color, 156, 163, 175), 0.08);
}

/* — 2.6 右键菜单美化 — */
.ant-dropdown .ant-popover-inner {
    background-color: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2) !important;
    padding: 6px !important;
}
body[theme-mode="light"] .ant-dropdown .ant-popover-inner {
    background-color: rgba(252, 252, 252, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}
.ant-dropdown-menu-item {
    border-radius: 8px !important;
    margin: 2px 0 !important;
    color: #d1d5db;
}
body[theme-mode="light"] .ant-dropdown-menu-item {
    color: #4b5563;
}
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-item-active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
body[theme-mode="light"] .ant-dropdown-menu-item:hover,
body[theme-mode="light"] .ant-dropdown-menu-item-active {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1f2937 !important;
}

/* — 2.7 通用按钮美化 — */
.ant-btn {
    border: none !important;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
    transition: all 0.2s ease !important;
}
.ant-btn:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.01);
}
body[theme-mode="light"] .ant-btn {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #374151 !important;
}
body[theme-mode="light"] .ant-btn:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Bug fixes from Ru-yao-lv */
.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;
}

/* | End of File | */

一个不知道算不算bug的地方,会导致深色模式crtl+f搜索变透明:

--color-background: linear-gradient(145deg, rgba(28, 28, 30, 0.4) 0%, rgba(44, 44, 46, 0.4) 100%);

不理解的bug就这个地方无法渲染,这段代码是一个渐变色,如果介意这个bug可以改为纯色:

--color-background: #2e2e30;

已经准备飞升了,谢谢佬友们!

[xiaoyutx]

一个小小的建议，这里太靠边了。顶到头了。

[1942442593 (黎川)]

在原文中加了一行代码现在修复了这个问题,没有注意这个小细节

[handsome (大帅哥)]

感谢大佬

[xinZi (鑫子)]

不知道算不算问题,重新生成消息底部会出现滚动条

[1942442593 (黎川)]

是个小问题,这个问题不太好修主要由于下面这行大概在302行在你点击时会放大一点点导致撑大了出现滚动条

@1942442593

transform: scale(1.03);

可以把1.03改为1.01不过感觉不如之前好看,我也可以直接改为裁剪掉多余部分不过感觉更丑 已经修改默认为1.01了

[sorange (橙子)]

佬，浅色的好像有点问题

[1942442593 (黎川)]

你是不是复制错了,我这用起来没有问题啊
你是苹果a,可能不太一样?没用过苹果系的,抱歉不太能修复这个问题应该

[wilile (baijie)]

感谢大佬

[sorange (橙子)]

我复制的是代码块的全部内容

[LinuxC]

已经用上了，感觉不错。

[Night2 (逝去的晚风)]

感谢分享