在尝试了 cherrycss.com 上的主题，以及站内其他佬友分享的几十款主题后，我发现这些主题用起来总有各种不尽如人意的地方。
要么配色过于夸张，视觉效果很难接受；要么对比度太低，导致文字几乎看不清楚；还有些主题单纯就是不好看，甚至有些还显得非常土。
所以我就决定自己手搓一个，因为我非常喜欢 ChatGPT 官网的整体样式，所以这次就以它为参考，仿做了一个 Cherry Studio 主题。
目前该主题仅支持亮色模式，没有适配深色模式。如果有需要深色主题的佬友，可以自行进行适配和调整。
主题截图如下：
主题代码如下（点击查看代码）：
/* 仿 ChatGPT 官网主题 v1.0.1 */
/* 作者：https://linux.do/u/nianbroken/ */
/* 默认主题变量定义 */
:root {
--font-main: "苹方-简", sans-serif; /* 主字体（全局通用字体） */
--font-mono: "JetBrainsMono Nerd Font Mono", "苹方-简", monospace; /* 等宽字体（代码/特殊用途） */
--font-icon: "iconfont"; /* 图标字体 */
--color-black-soft: #303030; /* 深色背景变量 */
--color-white-soft: #f4f4f4; /* 浅色背景变量 */
}
/* 让所有元素和伪元素都统一使用主字体，保证界面风格一致 */
*,
*::before,
*::after {
font-family: var(--font-main) !important; /* 全局指定中文主字体，后续仅需改变量即可切换 */
}
/* 指定代码和等宽内容专用字体，防止被全局字体覆盖 */
code,
pre,
kbd,
samp,
tt,
pre *,
code *,
kbd *,
samp *,
tt * {
font-family: var(--font-mono) !important; /* 代码/等宽字体专用变量，兼容中文和英文等宽 */
}
/* 让输入框、按钮、文本区域和下拉选择框继承父级字体，保持界面统一性 */
input,
button,
textarea,
select {
font-family: inherit !important; /* 表单组件跟随父级字体 */
}
/* 图标字体专属设置，确保图标始终正确显示为iconfont图形 */
.iconfont,
.iconfont::before,
.iconfont::after {
font-family: var(--font-icon) !important; /* 图标字体专用变量 */
}
/* 聊天气泡的内容容器圆角处理，让对话界面更加圆润美观 */
.bubble .message-content-container {
border-radius: 1.5rem !important; /* 聊天内容区域圆角半径 */
}
/* 代码高亮区域每一行的高度固定，确保代码内容排版紧凑且规整 */
.shiki code .line {
line-height: 1.2rem !important; /* 代码单行高度 */
min-height: 1.2rem !important; /* 代码最小行高防止压缩变形 */
}
/* 隐藏消息头部区域，通常包括头像或昵称等信息，可用于纯净模式 */
.message-header {
display: none !important; /* 不显示消息头部内容 */
}
/* 修改助手消息的边距，保持聊天界面风格统一 */
.message-content-container-assistant{
padding: 0 0.2rem !important; /* 聊天内容区域内边距 */
}
/* 主题用的全局色彩变量已在:root定义，便于风格调整 */
body[theme-mode="light"] {
--color-white: #ededed !important; /* 主体白色基调 */
--color-background: #f9f9f9 !important; /* 整体浅背景色 */
--color-background-soft: #eaeaea !important; /* 柔和型浅背景 */
--color-background-mute: #f9f9f9 !important; /* 中性色调背景 */
--navbar-background: #f9f9f9 !important; /* 顶部栏浅色背景 */
--chat-background: #ffffff !important; /* 聊天内容区主背景 */
--chat-background-user: #f4f4f4 !important; /* 用户消息背景色 */
--chat-background-assistant: #ffffff !important; /* 助手消息背景色 */
--color-primary: #0d0d0d !important; /* 主要高亮色 */
}
/* 针对浅色主题的定制化样式，优化阅读和交互体验 */
body[theme-mode="light"] {
/* 展开型思维展示区字体颜色，阅读更轻松 */
.ant-collapse-content-box .markdown {
color: #5d5d5d !important; /* 降低明度，提升文本可读性 */
}
.cm-editor,
.cm-focused {
/* 代码编辑区的文本与背景配色，减少视觉疲劳 */
outline: none !important; /* 移除编辑框边框高亮 */
color: #383a42 !important; /* 代码字体深灰色 */
background-color: #f9f9f9 !important; /* 编辑器背景色呼应整体主题 */
font-family: var(--font-mono) !important; /* 代码编辑器使用等宽字体变量 */
}
.cm-gutters {
/* 代码编辑器的行号区域，与背景保持一致 */
background-color: #f9f9f9 !important; /* 行号栏同样浅色处理 */
}
.cm-activeLine {
/* 高亮当前所在的代码行，便于定位 */
background-color: rgba(236, 236, 236, 0.5) !important; /* 选中行有轻微高亮 */
}
.cm-focused .cm-selectionBackground,
.cm-line::selection,
.cm-selectionLayer .cm-selectionBackground,
.cm-content ::selection {
/* 代码或内容区域的选中状态样式，提升选中可见性 */
background: #3266d0 !important; /* 选中背景为主色调蓝色 */
color: #ffffff !important; /* 选中文字为白色，反差明显 */
}
pre.shiki {
/* 代码块整体的背景色，呼应主题色调 */
background-color: #f9f9f9 !important; /* 保持一致的浅色背景 */
font-family: var(--font-mono) !important; /* 高亮代码块专用等宽字体 */
}
.ant-input-outlined:focus,
.ant-input-outlined:focus-within,
.ant-input-outlined:hover {
/* 输入框聚焦和悬浮状态，提示用户当前交互位置 */
border-color: #c2c2c2 !important; /* 边框颜色变浅，弱化干扰 */
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.12) !important; /* 轻微阴影，增强立体感 */
}
.markdown hr {
/* 内容分割线样式，弱化视觉分隔 */
background-color: #0d0d0d0d !important; /* 半透明线条，细腻过渡 */
}
#content-container {
background-color: #f9f9f9 !important; /* 主体内容区的背景色，保持统一 */
}
#chat-main {
background-color: #ffffff !important; /* 聊天内容区主背景，保持一致 */
}
#content-container #messages {
background-color: #ffffff !important; /* 聊天消息列表专用背景，增强层次感 */
}
.inputbar-container {
/* 聊天输入区域背景及边框，营造高级感 */
background-color: #ffffff !important; /* 输入区域白色背景 */
border: 1px solid #c2c2c2 !important; /* 边框淡灰，低调但清晰 */
border-radius: 28px !important; /* 圆角输入条，便于交互 */
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06); /* 默认状态下的细腻阴影 */
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 阴影过渡动画，提升体验 */
}
.inputbar-container:focus-within,
.inputbar-container.active {
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.12); /* 输入框激活时阴影更浓，强调当前输入状态 */
}
/* 针对代码内容的背景色和文本色处理，保持阅读体验 */
code {
background-color: #ececec; /* 代码背景为浅灰，突出代码区 */
color: #0d0d0d !important; /* 代码文本采用主色调深色 */
font-family: var(--font-mono) !important; /* 行内代码调用等宽字体变量 */
}
pre code {
/* 预格式化代码区的特殊文本配色，适应整体浅色风格 */
background-color: #f9f9f9;
color: #383a42 !important; /* 保持与编辑区一致的代码文本色 */
font-family: var(--font-mono) !important; /* 保证所有代码区统一等宽字体变量 */
}
}
- 可以在“变量定义”中自己修改全局的字体。（代码第6、第7行）
- 主题隐藏了自己和AI的头像。（删除第60至63行可以恢复头像）
- 等这个 PR 上线之后，该主题会更好看，更像 ChatGPT。
