Cherry Studio theme

readme.md

1. 本主题是从 CherryHQ/cherry-studio#3873 这个 issue 提取的代码
2. 如需要修改背景图片，可以直接修改 --background-image-url 这个变量的值，可以去 https://unsplash.com/ 找一张自己喜欢的，复制下图片链接，替换就可以了（注意两个主题分别配置亮色和暗色的图片），你也可以用本地的文件路径,例如 '/Users/username/Downloads/AI 图片素材/1761102846513_download.png'
3. 我改造了 代码编辑器的背景样式，这样看起来更加统一
4. 我添加了字体的详细设置，英文字体在前中文字体在后，这样可以让中英文用两个不同的字体，请更具本机安装的字体自行修改（在主题的最后一段 css 代码）
5. 代码贴在这里：

theme.css

:root {
  --radius-dynamic: 12px;
  --radius-large: 12px;

  /* Mac OS色调 */
  --color-brand-primary: oklch(65% 0.05 250);
  --color-brand-hover: color-mix(in oklch, var(--color-brand-primary) 90%, black);

  /* 静态主题参数 */
  --theme-lightness: 1;
  --shadow-intensity: 0.1;
  --highlight-intensity: 0.05;
  --file-line-width: 65rem;
  --font-default: "SF Pro Text", "Helvetica Neue", "Source Han Sans CN", sans-serif;

  /* 背景图片设置 - 共享参数 */
  --background-blur: 12px;

  /* 修复对话气泡 */
  --chat-text-user: var(--color-text-1);
}

/* 深色模式 - Mac OS风格 */
body[theme-mode="dark"] {
  /* 深色模式专用背景图 */
  --background-image-url: url('https://images.unsplash.com/photo-1517497713463-f4a339ccd25a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=3191');
  --background-overlay-opacity: 0.5;

  /* 护眼配色 - 深色模式更温和的色调 */
  --color-background: linear-gradient(145deg, rgba(28, 28, 30, 0.6) 0%, rgba(44, 44, 46, 0.6) 100%);
  --color-background-soft: linear-gradient(145deg, rgba(44, 44, 46, 0.5) 0%, rgba(58, 58, 60, 0.5) 100%);
  --color-background-mute: linear-gradient(145deg, rgba(72, 72, 74, 0.4) 0%, rgba(99, 99, 102, 0.4) 100%);
  --navbar-background: linear-gradient(to right, rgba(28, 28, 30, 0.6) 0%, rgba(44, 44, 46, 0.6) 100%);
  --chat-background: linear-gradient(to bottom, rgba(44, 44, 46, 0.5) 0%, rgba(58, 58, 60, 0.5) 100%);
  --chat-background-user: linear-gradient(to right, rgba(0, 88, 208, 0.15) 0%, rgba(10, 132, 255, 0.15) 100%);
  --user-text-color-dark: rgba(255, 255, 255, 0.9);
  --chat-background-assistant: linear-gradient(to right, rgba(44, 44, 46, 0.4) 0%, rgba(58, 58, 60, 0.4) 100%);
  --ctp-text: rgba(255, 255, 255, 0.85);
  --shadow-color: rgba(0, 0, 0, 0.25);
  --highlight-color: rgba(255, 255, 255, 0.08);
  --deep-thinking-color: rgba(10, 132, 255, 0.9);
  --code-bg-dark: rgba(30, 30, 32, 0.7);
  --footnote-bg-dark: rgba(44, 44, 46, 0.4);
  /* 静态主题参数 */
  --theme-lightness: -1;
  --shadow-intensity: 0.25;
}

/* 浅色模式 - Mac OS风格 (优化版) */
body[theme-mode="light"] {
  /* 浅色模式专用背景图 */
  --background-image-url: url('https://images.unsplash.com/photo-1543723075-8fb396033ad7?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=3687');
  --background-overlay-opacity: 0.25;

  /* 更清晰的浅色调 - 去除护眼蒙版效果 */
  --color-background: linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, rgba(250, 250, 255, 0.3) 100%);
  --color-background-soft: linear-gradient(145deg, rgba(245, 245, 250, 0.25) 0%, rgba(240, 240, 245, 0.25) 100%);
  --color-background-mute: linear-gradient(145deg, rgba(235, 235, 240, 0.2) 0%, rgba(230, 230, 235, 0.2) 100%);
  --navbar-background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, rgba(250, 250, 255, 0.4) 100%);
  --chat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(250, 250, 255, 0.3) 100%);
  --chat-background-user: linear-gradient(to right, rgba(210, 230, 255, 0.4) 0%, rgba(220, 235, 255, 0.4) 100%);
  --chat-background-assistant: linear-gradient(to right, rgba(250, 250, 255, 0.3) 0%, rgba(245, 245, 250, 0.3) 100%);
  --color-white: rgba(255, 255, 255, 0.9);
  --ctp-text: rgba(30, 30, 30, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.06);
  --highlight-color: rgba(255, 255, 255, 0.3);
  --deep-thinking-color: rgba(0, 88, 208, 0.85);
  --code-bg-light: rgba(240, 240, 245, 0.4);
  --footnote-bg-light: rgba(245, 245, 250, 0.3);
  /* 静态主题参数 */
  --theme-lightness: 1;
}

/* 基础架构 */
html,
body {
  font-family: var(--font-default);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 背景图片设置 - 分主题设置 */
body {
  position: relative;
  background-image: var(--background-image-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 背景叠加层 */
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;
}

/* 消息容器 - Mac OS磨砂玻璃风格 */
.message-content-container {
  /* 静态样式 - Mac OS磨砂玻璃效果 */
  background: color-mix(in srgb, var(--color-background-soft), transparent 50%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-dynamic);

  /* 简化边缘 */
  outline: none;

  /* 逻辑属性 */
  margin-block: 8px;
  padding-inline: 12px;
  padding-block: 10px;

  /* Mac OS风格阴影 - 更加柔和 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 输入栏优化 - Mac OS磨砂玻璃风格 */
#inputbar {
  background: color-mix(in srgb, var(--color-background), transparent 40%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-large);
  margin: -15px 20px 15px 20px;

  /* 简化边缘 */
  outline: none;

  /* Mac OS风格阴影 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 导航栏半透明效果 - Mac OS风格 */
.navbar {
  background: color-mix(in srgb, var(--navbar-background), transparent 40%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

/* 聊天容器半透明效果 */
.chat-container {
  background: transparent !important;
}

/* 用户消息半透明效果 - Mac OS风格 */
.chat-item.user .message-content-container {
  background: color-mix(in srgb, var(--chat-background-user), transparent 50%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
}

/* 助手消息半透明效果 - Mac OS风格 */
.chat-item.assistant .message-content-container {
  background: color-mix(in srgb, var(--chat-background-assistant), transparent 50%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}

/* 深色模式适配 - Mac OS风格 */
body[theme-mode='dark'] .message-content-container {
  border-color: rgba(255, 255, 255, 0.1);
}

body[theme-mode='dark'] #inputbar {
  border-color: rgba(255, 255, 255, 0.1);
}

body[theme-mode='dark'] .navbar {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* 高对比度模式 */
@media (prefers-contrast: more) {
  .message-content-container {
    border-width: 1.5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* 深色模式下用户名和消息的字体颜色 */
/* 使用更具体的选择器，提高优先级 */
body[theme-mode="dark"] .chat-item.user .nickname,
body[theme-mode="dark"] .chat-item.user .message {
  color: var(--user-text-color-dark);
}

/* 其他用户名和消息的字体颜色保持不变 */
.chat-item .nickname,
.chat-item .message {
  color: var(--ctp-text);
}

/* 深度思考展开字体颜色 - Mac OS风格 */
.ant-collapse-content-box .markdown {
  color: var(--deep-thinking-color);
}

/* 浅色模式代码背景 - Mac OS风格 */
.shiki.one-light {
  background-color: var(--code-bg-light) !important;
  border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}

/* 深色模式代码背景 - Mac OS风格 */
.shiki.material-theme-darker {
  background-color: var(--code-bg-dark) !important;
  border-radius: 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* 引用来源背景透明 - Mac OS风格 */
.footnotes {
  background-color: var(--footnote-bg-light);
  border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body[theme-mode="dark"] .footnotes {
  background-color: var(--footnote-bg-dark);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* 保留原有样式 - 输入框高度 */
#inputbar textarea.ant-input {
  height: 120px !important;
  padding: 10px;
}

/*代码块圆角*/
.split-view-wrapper{
    border-radius: 8px;
}

/* 按钮 - Mac OS风格 */
button,
.ant-btn {
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 滚动条 - Mac OS风格 */
::-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);
}

/* 链接颜色 - Mac OS风格 */
a {
  color: var(--color-brand-primary);
}

a:hover {
  color: var(--color-brand-hover);
}

/* 选中文本背景色 - Mac OS风格 */
::selection {
  background-color: color-mix(in srgb, var(--color-brand-primary), transparent 70%);
}

body {
  font-family:
    'Iosevka Nerd Font Mono','Maple Mono CN','LXGW Marker Gothic','LXGW WenKai Mono', 'Fira Code', 'Monaco', 'Menlo', 'Consolas', 'COURIER NEW', "等距更纱黑体 SC", monospace, sans-serif !important;
}
/* Markdown 专用字体设置 */
.markdown {
  color: var(--color-text);
  font-family: 'Maple Mono CN','LXGW Marker Gothic','LXGW WenKai Mono','Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif CN', 'Source Han Serif', 'Noto Serif SC', 'Songti SC', serif !important;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
/* 代码编辑器等宽字体 */
.code-viewer,.code-editor {
  font-family: 'Iosevka Nerd Font Mono', 'Maple Mono CN','LXGW WenKai Mono', 'Fira Code', 'Monaco', 'Menlo', 'Consolas', 'Source Code Pro', 'Roboto Mono', monospace !important;
}

/* 代码编辑器背景设置 */
.code-viewer .cm-editor,
.code-editor .cm-editor,
.code-viewer .cm-gutters,
.code-editor .cm-gutters{
  background: color-mix(in srgb, var(--chat-background-assistant), transparent 50%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}