一个适配26年新版本Cherry Studio的仿Claude主题
- 内容介绍
- 文章标签
- 相关推荐
站内确实之前有佬发过仿Claude的主题了, 但是可能是因为Cherry Studio的版本更新, 我自己在使用时会出现导航栏附近的圆角不匹配的问题, GPT5.4也修复不好, 于是干脆根据官方的文档和Claude网页版的css文件自己捏了一个.
Cherry Studio截图2560×1368 166 KB
Claude官网截图1920×881 113 KB
自认为还原度足够了.
Cherry Studio主题色: #C92442.
关于字体:
- Claude目前用的是自己的Anthropic Sans系列, 据考证, 25年以及更早使用的是Tiempos Text作为衬线体.
- 我的截图中使用的是: 方正FW筑紫A老明朝 + Tiempos Text(需要在页面右上角开启使用衬线体,版权原因这里就不分享了). 代码字体为Maple Mono NF CN, 界面字体Noto Sans SC(这俩在显示设置里设置).
/**
* Cherry Studio — Claude 官方配色（自定义 CSS）
*
* 配色来源：Claude Official.css 中 [data-theme=claude] 浅色/深色令牌（约 180–281 行）
* 与 .hljs 代码色（约 100–103 行，One Dark）。
* 文档：https://docs.cherry-ai.com/pre-basic/personalization-settings/css
* 变量参考：https://github.com/CherryHQ/cherry-studio/blob/main/src/renderer/src/assets/styles/color.css
*
* 可选：取消下方「Anthropic 字体」注释块以使用 Claude 网页同款字体（需联网加载字体文件）。
*
* 行内代码字体：修改 :root 中的 --font-inline-code（及可选的 --font-block-code）。
*/
/* 可选：取消注释以下 @font-face 与 :root 规则以使用 Anthropic Sans（与 Claude Official.css 同源，需联网加载） */
@font-face {
font-family: Anthropic Sans;
src: url(https://assets-proxy.anthropic.com/claude-ai/v2/assets/v1/cc27851ad-CFxw3nG7.woff2) format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
:root {
/* 行内 Markdown 代码 `code` 的字体；可改为本机已安装的等宽字体名 */
--font-inline-code: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Consolas, monospace;
/* 代码块 pre > code；默认与行内相同，需区分时可单独填写 */
--font-block-code: var(--font-inline-code);
font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* ========== 浅色（Claude light tokens）========== */
body[theme-mode="light"] {
--color-white: #ffffff;
--color-white-soft: rgba(20, 20, 19, 0.04);
--color-white-mute: #f0eee6;
--color-black: #141413;
--color-black-soft: #3d3d3a;
--color-black-mute: #73726c;
--color-gray-1: #73726c;
--color-gray-2: #5c5a54;
--color-gray-3: #3d3d3a;
--color-text-1: rgba(20, 20, 19, 0.95);
--color-text-2: rgba(61, 61, 58, 0.75);
--color-text-3: rgba(115, 114, 108, 0.45);
--color-background: #faf9f5;
--color-background-soft: #f5f4ed;
--color-background-mute: #f0eee6;
--color-background-opacity: rgba(250, 249, 245, 0.92);
--inner-glow-opacity: 0.12;
--color-primary: #d97757;
--color-primary-soft: #d9775799;
--color-primary-mute: #d9775733;
--color-text: var(--color-text-1);
--color-text-secondary: rgba(61, 61, 58, 0.72);
--color-icon: rgba(20, 20, 19, 0.55);
--color-icon-white: #141413;
--color-border: rgba(31, 30, 29, 0.14);
--color-border-soft: rgba(31, 30, 29, 0.08);
--color-border-mute: rgba(31, 30, 29, 0.04);
--color-error: #b53333;
--color-link: #2c84db;
--color-code-background: #282c34;
--color-inline-code-background: rgba(31, 30, 29, 0.06);
--color-inline-code-text: #b53333;
--color-hover: #f0eee6;
--color-active: #e8e6dc;
--color-frame-border: rgba(31, 30, 29, 0.12);
--color-group-background: #faf9f5;
--color-reference: #e8e6dc;
--color-reference-text: #141413;
--color-reference-background: #f5f4ed;
--color-list-item: #ffffff;
--color-list-item-hover: #f5f4ed;
--modal-background: #faf9f5;
--color-highlight: rgba(0, 0, 0, 0.85);
--color-background-highlight: rgba(255, 200, 120, 0.45);
--color-background-highlight-accent: rgba(217, 119, 87, 0.35);
--navbar-background-mac: rgba(250, 249, 245, 0.72);
--navbar-background: #faf9f5;
--chat-background: transparent;
/* Claude 浅色用户气泡：bg-300，与官网一致勿用半透明（叠底会偏成 #F1EFE6） */
--chat-background-user: #f0eee6;
--chat-background-assistant: transparent;
--chat-text-user: #141413;
--color-status-success: #2f7613;
--color-status-error: var(--color-error);
--color-status-warning: #875a08;
}
body[theme-mode="light"] #content-container {
background-color: var(--color-background) !important;
}
body[theme-mode="light"] #content-container #messages {
background-color: var(--color-background);
}
body[theme-mode="light"] .inputbar-container {
background-color: #ffffff;
border: 1px solid rgba(31, 30, 29, 0.12);
border-radius: 8px;
}
body[theme-mode="light"] code {
background-color: var(--color-inline-code-background);
color: var(--color-inline-code-text);
font-family: var(--font-inline-code);
}
body[theme-mode="light"] pre code {
color: #abb2bf;
background-color: #282c34;
font-family: var(--font-block-code);
}
/* ========== 深色（Claude dark tokens + One Dark 代码块）========== */
body[theme-mode="dark"] {
--color-white: #faf9f5;
--color-white-soft: rgba(250, 249, 245, 0.08);
--color-white-mute: rgba(250, 249, 245, 0.14);
--color-black: #141413;
--color-black-soft: #30302e;
--color-black-mute: #262624;
--color-gray-1: #9c9a92;
--color-gray-2: #c2c0b6;
--color-gray-3: #dedcd1;
--color-text-1: rgba(250, 249, 245, 0.94);
--color-text-2: rgba(194, 192, 182, 0.72);
--color-text-3: rgba(156, 154, 146, 0.45);
--color-background: #30302e;
--color-background-soft: #262624;
--color-background-mute: #1f1e1d;
--color-background-opacity: rgba(48, 48, 46, 0.85);
--inner-glow-opacity: 0.28;
--color-primary: #d97757;
--color-primary-soft: #d9775799;
--color-primary-mute: #d9775733;
--color-text: var(--color-text-1);
--color-text-secondary: rgba(194, 192, 182, 0.75);
--color-icon: rgba(250, 249, 245, 0.55);
--color-icon-white: #faf9f5;
--color-border: rgba(222, 220, 209, 0.18);
--color-border-soft: rgba(222, 220, 209, 0.1);
--color-border-mute: rgba(222, 220, 209, 0.06);
--color-error: #dd5353;
--color-link: #74abe2;
--color-code-background: #282c34;
--color-inline-code-background: rgba(222, 220, 209, 0.08);
--color-inline-code-text: #e06c75;
--color-hover: #3d3d3a;
--color-active: #4d4c48;
--color-frame-border: rgba(222, 220, 209, 0.15);
--color-group-background: #262624;
--color-reference: #4d4c48;
--color-reference-text: #faf9f5;
--color-reference-background: #1f1e1d;
--color-list-item: rgba(255, 255, 255, 0.06);
--color-list-item-hover: rgba(255, 255, 255, 0.04);
--modal-background: #262624;
--color-highlight: rgba(255, 255, 255, 0.95);
--color-background-highlight: rgba(217, 119, 87, 0.35);
--color-background-highlight-accent: rgba(116, 171, 226, 0.3);
--navbar-background-mac: rgba(38, 38, 36, 0.65);
--navbar-background: #262624;
--chat-background: transparent;
--chat-background-user: rgba(255, 255, 255, 0.09);
--chat-background-assistant: transparent;
--chat-text-user: #141413;
--color-status-success: #459315;
--color-status-error: var(--color-error);
--color-status-warning: #b17506;
}
body[theme-mode="dark"] #content-container {
background-color: var(--color-background) !important;
}
body[theme-mode="dark"] #content-container #messages {
background-color: var(--color-background);
}
body[theme-mode="dark"] .inputbar-container {
background-color: #1f1e1d;
border: 1px solid rgba(222, 220, 209, 0.14);
border-radius: 8px;
}
body[theme-mode="dark"] code {
background-color: var(--color-inline-code-background);
color: #abb2bf;
font-family: var(--font-inline-code);
}
body[theme-mode="dark"] pre code {
color: #abb2bf;
background-color: #282c34;
font-family: var(--font-block-code);
}
/* 左侧导航栏会话列表（与 color.css 中 [navbar-position=left] 对齐） */
body[navbar-position="left"][theme-mode="light"] {
--color-list-item: #f0eee6;
--color-list-item-hover: #f5f4ed;
}
body[navbar-position="left"][theme-mode="dark"] {
--color-list-item: #2c2c2a;
--color-list-item-hover: #262624;
}
/* 深度思考等折叠区内的 Markdown（文档示例） */
.ant-collapse-content-box .markdown {
color: inherit;
}
网友解答：
--【壹】--：
这是因为cherry studio的代码块字体是受设置-代码字体控制的, 我用的是maple mono nf cn, 它的中文字体间距是特意增大的.
Claude原版应该用的是 Anthropic Mono, 然后中文部分fallback到ui-monospace(Windows下一般是consolas或者Cascadia Mono)
--【贰】--：
现在，即使使用的是较廉价的模型，我也能获得更出色的体验！与其他所有竞品相比，Anthropic 设计所蕴含的美感与格调显得格外优雅。
--【叁】--：
感谢分享~我一直觉得 claude 网页端的美术设计真是太棒了，之前体验过几次以后印象特别深刻，既有羊皮纸质感的复古，但是又能体现出现代的科技感，真不知道这个是怎么做了
这个主题的代码块感觉已经做得几乎和原版一样了，不过中文字体似乎还是和原版有一定差距，怪怪的说不出来，可能是字间距的原因？
--【肆】--：
我自己也让AI搓了一个，不知道我佬的有没有区别，发上来大家试试
/* Claude 主题 3.1 — 高还原版 */
/* 字体：西文优先 Söhne（Claude 官方字体），中文回退苹方/系统 */
* {
font-family:
"Söhne", "Söhne-Buch",
ui-sans-serif, system-ui, -apple-system,
"PingFang SC", "Noto Sans CJK SC",
"Microsoft YaHei", sans-serif !important;
}
/* ═══════════════════════════════════════
深色主题
底色：近黑暖灰 #1c1c1c（Claude.ai 实测）
═══════════════════════════════════════ */
body[theme-mode="dark"] {
--color-background: #1c1c1c;
--color-background-soft: #222222;
--color-background-mute: #181818;
--navbar-background: #141414;
--chat-background: #1c1c1c;
--chat-background-user: #2e2e2e;
--chat-background-assistant: #1c1c1c;
}
body[theme-mode="dark"] {
/* 页面主容器 */
#content-container {
background-color: #1c1c1c !important;
}
#content-container #messages {
background-color: #1c1c1c;
color: #d8d5cf !important; /* 暖灰白，与 Claude.ai 实测一致 */
}
/* 助手消息：无气泡，直接渲染在背景上 */
.message-content-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
margin: 2px 0 !important;
padding: 4px 0 !important;
color: #d8d5cf !important;
}
/* 用户消息：保留气泡，深灰底 */
.message-user .message-content-container {
background: #2e2e2e !important;
border-radius: 18px 18px 4px 18px !important;
padding: 10px 15px !important;
margin: 4px 0 !important;
color: #e8e6e0 !important;
box-shadow: none !important;
border: none !important;
}
/* 输入框 */
.inputbar-container {
background-color: #262626;
border: 0.5px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
}
/* 代码 */
code {
background-color: rgba(255, 255, 255, 0.07);
color: #EA928A;
border-radius: 4px;
padding: 1px 5px;
}
pre code {
background-color: transparent;
color: #ABB2BF;
padding: 0;
}
pre {
background-color: #141414 !important;
border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
}
}
/* ═══════════════════════════════════════
浅色主题
底色：暖米白 #f9f8f5（Claude.ai 实测）
═══════════════════════════════════════ */
body[theme-mode="light"] {
--color-background: #f9f8f5;
--color-background-soft: #f0ede6;
--color-background-mute: #e8e5de;
--navbar-background: #f0ede6;
--chat-background: #f9f8f5;
--chat-background-user: #f9f8f5;
--chat-background-assistant: #f9f8f5;
}
body[theme-mode="light"] {
/* 页面主容器 */
#content-container {
background-color: #f9f8f5 !important;
}
#content-container #messages {
background-color: #f9f8f5;
color: #3a3832 !important;
}
/* 助手消息：无气泡，与 Claude.ai 完全一致 */
.message-content-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
margin: 2px 0 !important;
padding: 4px 0 !important;
color: #3a3832 !important;
}
/* 用户消息：暖灰气泡 */
.message-user .message-content-container {
background: #ebe9e2 !important;
border-radius: 18px 18px 4px 18px !important;
padding: 10px 15px !important;
margin: 4px 0 !important;
color: #3a3832 !important;
box-shadow: none !important;
border: none !important;
}
/* 输入框 */
.inputbar-container {
background-color: #ffffff;
border: 0.5px solid rgba(135, 134, 127, 0.25);
border-radius: 14px;
}
/* 代码 */
code {
background-color: rgba(61, 57, 41, 0.06);
color: #7C1B13;
border-radius: 4px;
padding: 1px 5px;
}
pre code {
background-color: transparent;
color: #1a1a1a;
padding: 0;
}
pre {
background-color: #f0ede6 !important;
border: 0.5px solid rgba(0, 0, 0, 0.07) !important;
border-radius: 10px !important;
}
}
image1912×1472 254 KB
image1916×1464 245 KB
站内确实之前有佬发过仿Claude的主题了, 但是可能是因为Cherry Studio的版本更新, 我自己在使用时会出现导航栏附近的圆角不匹配的问题, GPT5.4也修复不好, 于是干脆根据官方的文档和Claude网页版的css文件自己捏了一个.
Cherry Studio截图2560×1368 166 KB
Claude官网截图1920×881 113 KB
自认为还原度足够了.
Cherry Studio主题色: #C92442.
关于字体:
- Claude目前用的是自己的Anthropic Sans系列, 据考证, 25年以及更早使用的是Tiempos Text作为衬线体.
- 我的截图中使用的是: 方正FW筑紫A老明朝 + Tiempos Text(需要在页面右上角开启使用衬线体,版权原因这里就不分享了). 代码字体为Maple Mono NF CN, 界面字体Noto Sans SC(这俩在显示设置里设置).
/**
* Cherry Studio — Claude 官方配色（自定义 CSS）
*
* 配色来源：Claude Official.css 中 [data-theme=claude] 浅色/深色令牌（约 180–281 行）
* 与 .hljs 代码色（约 100–103 行，One Dark）。
* 文档：https://docs.cherry-ai.com/pre-basic/personalization-settings/css
* 变量参考：https://github.com/CherryHQ/cherry-studio/blob/main/src/renderer/src/assets/styles/color.css
*
* 可选：取消下方「Anthropic 字体」注释块以使用 Claude 网页同款字体（需联网加载字体文件）。
*
* 行内代码字体：修改 :root 中的 --font-inline-code（及可选的 --font-block-code）。
*/
/* 可选：取消注释以下 @font-face 与 :root 规则以使用 Anthropic Sans（与 Claude Official.css 同源，需联网加载） */
@font-face {
font-family: Anthropic Sans;
src: url(https://assets-proxy.anthropic.com/claude-ai/v2/assets/v1/cc27851ad-CFxw3nG7.woff2) format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
:root {
/* 行内 Markdown 代码 `code` 的字体；可改为本机已安装的等宽字体名 */
--font-inline-code: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Consolas, monospace;
/* 代码块 pre > code；默认与行内相同，需区分时可单独填写 */
--font-block-code: var(--font-inline-code);
font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* ========== 浅色（Claude light tokens）========== */
body[theme-mode="light"] {
--color-white: #ffffff;
--color-white-soft: rgba(20, 20, 19, 0.04);
--color-white-mute: #f0eee6;
--color-black: #141413;
--color-black-soft: #3d3d3a;
--color-black-mute: #73726c;
--color-gray-1: #73726c;
--color-gray-2: #5c5a54;
--color-gray-3: #3d3d3a;
--color-text-1: rgba(20, 20, 19, 0.95);
--color-text-2: rgba(61, 61, 58, 0.75);
--color-text-3: rgba(115, 114, 108, 0.45);
--color-background: #faf9f5;
--color-background-soft: #f5f4ed;
--color-background-mute: #f0eee6;
--color-background-opacity: rgba(250, 249, 245, 0.92);
--inner-glow-opacity: 0.12;
--color-primary: #d97757;
--color-primary-soft: #d9775799;
--color-primary-mute: #d9775733;
--color-text: var(--color-text-1);
--color-text-secondary: rgba(61, 61, 58, 0.72);
--color-icon: rgba(20, 20, 19, 0.55);
--color-icon-white: #141413;
--color-border: rgba(31, 30, 29, 0.14);
--color-border-soft: rgba(31, 30, 29, 0.08);
--color-border-mute: rgba(31, 30, 29, 0.04);
--color-error: #b53333;
--color-link: #2c84db;
--color-code-background: #282c34;
--color-inline-code-background: rgba(31, 30, 29, 0.06);
--color-inline-code-text: #b53333;
--color-hover: #f0eee6;
--color-active: #e8e6dc;
--color-frame-border: rgba(31, 30, 29, 0.12);
--color-group-background: #faf9f5;
--color-reference: #e8e6dc;
--color-reference-text: #141413;
--color-reference-background: #f5f4ed;
--color-list-item: #ffffff;
--color-list-item-hover: #f5f4ed;
--modal-background: #faf9f5;
--color-highlight: rgba(0, 0, 0, 0.85);
--color-background-highlight: rgba(255, 200, 120, 0.45);
--color-background-highlight-accent: rgba(217, 119, 87, 0.35);
--navbar-background-mac: rgba(250, 249, 245, 0.72);
--navbar-background: #faf9f5;
--chat-background: transparent;
/* Claude 浅色用户气泡：bg-300，与官网一致勿用半透明（叠底会偏成 #F1EFE6） */
--chat-background-user: #f0eee6;
--chat-background-assistant: transparent;
--chat-text-user: #141413;
--color-status-success: #2f7613;
--color-status-error: var(--color-error);
--color-status-warning: #875a08;
}
body[theme-mode="light"] #content-container {
background-color: var(--color-background) !important;
}
body[theme-mode="light"] #content-container #messages {
background-color: var(--color-background);
}
body[theme-mode="light"] .inputbar-container {
background-color: #ffffff;
border: 1px solid rgba(31, 30, 29, 0.12);
border-radius: 8px;
}
body[theme-mode="light"] code {
background-color: var(--color-inline-code-background);
color: var(--color-inline-code-text);
font-family: var(--font-inline-code);
}
body[theme-mode="light"] pre code {
color: #abb2bf;
background-color: #282c34;
font-family: var(--font-block-code);
}
/* ========== 深色（Claude dark tokens + One Dark 代码块）========== */
body[theme-mode="dark"] {
--color-white: #faf9f5;
--color-white-soft: rgba(250, 249, 245, 0.08);
--color-white-mute: rgba(250, 249, 245, 0.14);
--color-black: #141413;
--color-black-soft: #30302e;
--color-black-mute: #262624;
--color-gray-1: #9c9a92;
--color-gray-2: #c2c0b6;
--color-gray-3: #dedcd1;
--color-text-1: rgba(250, 249, 245, 0.94);
--color-text-2: rgba(194, 192, 182, 0.72);
--color-text-3: rgba(156, 154, 146, 0.45);
--color-background: #30302e;
--color-background-soft: #262624;
--color-background-mute: #1f1e1d;
--color-background-opacity: rgba(48, 48, 46, 0.85);
--inner-glow-opacity: 0.28;
--color-primary: #d97757;
--color-primary-soft: #d9775799;
--color-primary-mute: #d9775733;
--color-text: var(--color-text-1);
--color-text-secondary: rgba(194, 192, 182, 0.75);
--color-icon: rgba(250, 249, 245, 0.55);
--color-icon-white: #faf9f5;
--color-border: rgba(222, 220, 209, 0.18);
--color-border-soft: rgba(222, 220, 209, 0.1);
--color-border-mute: rgba(222, 220, 209, 0.06);
--color-error: #dd5353;
--color-link: #74abe2;
--color-code-background: #282c34;
--color-inline-code-background: rgba(222, 220, 209, 0.08);
--color-inline-code-text: #e06c75;
--color-hover: #3d3d3a;
--color-active: #4d4c48;
--color-frame-border: rgba(222, 220, 209, 0.15);
--color-group-background: #262624;
--color-reference: #4d4c48;
--color-reference-text: #faf9f5;
--color-reference-background: #1f1e1d;
--color-list-item: rgba(255, 255, 255, 0.06);
--color-list-item-hover: rgba(255, 255, 255, 0.04);
--modal-background: #262624;
--color-highlight: rgba(255, 255, 255, 0.95);
--color-background-highlight: rgba(217, 119, 87, 0.35);
--color-background-highlight-accent: rgba(116, 171, 226, 0.3);
--navbar-background-mac: rgba(38, 38, 36, 0.65);
--navbar-background: #262624;
--chat-background: transparent;
--chat-background-user: rgba(255, 255, 255, 0.09);
--chat-background-assistant: transparent;
--chat-text-user: #141413;
--color-status-success: #459315;
--color-status-error: var(--color-error);
--color-status-warning: #b17506;
}
body[theme-mode="dark"] #content-container {
background-color: var(--color-background) !important;
}
body[theme-mode="dark"] #content-container #messages {
background-color: var(--color-background);
}
body[theme-mode="dark"] .inputbar-container {
background-color: #1f1e1d;
border: 1px solid rgba(222, 220, 209, 0.14);
border-radius: 8px;
}
body[theme-mode="dark"] code {
background-color: var(--color-inline-code-background);
color: #abb2bf;
font-family: var(--font-inline-code);
}
body[theme-mode="dark"] pre code {
color: #abb2bf;
background-color: #282c34;
font-family: var(--font-block-code);
}
/* 左侧导航栏会话列表（与 color.css 中 [navbar-position=left] 对齐） */
body[navbar-position="left"][theme-mode="light"] {
--color-list-item: #f0eee6;
--color-list-item-hover: #f5f4ed;
}
body[navbar-position="left"][theme-mode="dark"] {
--color-list-item: #2c2c2a;
--color-list-item-hover: #262624;
}
/* 深度思考等折叠区内的 Markdown（文档示例） */
.ant-collapse-content-box .markdown {
color: inherit;
}
网友解答：
--【壹】--：
这是因为cherry studio的代码块字体是受设置-代码字体控制的, 我用的是maple mono nf cn, 它的中文字体间距是特意增大的.
Claude原版应该用的是 Anthropic Mono, 然后中文部分fallback到ui-monospace(Windows下一般是consolas或者Cascadia Mono)
--【贰】--：
现在，即使使用的是较廉价的模型，我也能获得更出色的体验！与其他所有竞品相比，Anthropic 设计所蕴含的美感与格调显得格外优雅。
--【叁】--：
感谢分享~我一直觉得 claude 网页端的美术设计真是太棒了，之前体验过几次以后印象特别深刻，既有羊皮纸质感的复古，但是又能体现出现代的科技感，真不知道这个是怎么做了
这个主题的代码块感觉已经做得几乎和原版一样了，不过中文字体似乎还是和原版有一定差距，怪怪的说不出来，可能是字间距的原因？
--【肆】--：
我自己也让AI搓了一个，不知道我佬的有没有区别，发上来大家试试
/* Claude 主题 3.1 — 高还原版 */
/* 字体：西文优先 Söhne（Claude 官方字体），中文回退苹方/系统 */
* {
font-family:
"Söhne", "Söhne-Buch",
ui-sans-serif, system-ui, -apple-system,
"PingFang SC", "Noto Sans CJK SC",
"Microsoft YaHei", sans-serif !important;
}
/* ═══════════════════════════════════════
深色主题
底色：近黑暖灰 #1c1c1c（Claude.ai 实测）
═══════════════════════════════════════ */
body[theme-mode="dark"] {
--color-background: #1c1c1c;
--color-background-soft: #222222;
--color-background-mute: #181818;
--navbar-background: #141414;
--chat-background: #1c1c1c;
--chat-background-user: #2e2e2e;
--chat-background-assistant: #1c1c1c;
}
body[theme-mode="dark"] {
/* 页面主容器 */
#content-container {
background-color: #1c1c1c !important;
}
#content-container #messages {
background-color: #1c1c1c;
color: #d8d5cf !important; /* 暖灰白，与 Claude.ai 实测一致 */
}
/* 助手消息：无气泡，直接渲染在背景上 */
.message-content-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
margin: 2px 0 !important;
padding: 4px 0 !important;
color: #d8d5cf !important;
}
/* 用户消息：保留气泡，深灰底 */
.message-user .message-content-container {
background: #2e2e2e !important;
border-radius: 18px 18px 4px 18px !important;
padding: 10px 15px !important;
margin: 4px 0 !important;
color: #e8e6e0 !important;
box-shadow: none !important;
border: none !important;
}
/* 输入框 */
.inputbar-container {
background-color: #262626;
border: 0.5px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
}
/* 代码 */
code {
background-color: rgba(255, 255, 255, 0.07);
color: #EA928A;
border-radius: 4px;
padding: 1px 5px;
}
pre code {
background-color: transparent;
color: #ABB2BF;
padding: 0;
}
pre {
background-color: #141414 !important;
border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
}
}
/* ═══════════════════════════════════════
浅色主题
底色：暖米白 #f9f8f5（Claude.ai 实测）
═══════════════════════════════════════ */
body[theme-mode="light"] {
--color-background: #f9f8f5;
--color-background-soft: #f0ede6;
--color-background-mute: #e8e5de;
--navbar-background: #f0ede6;
--chat-background: #f9f8f5;
--chat-background-user: #f9f8f5;
--chat-background-assistant: #f9f8f5;
}
body[theme-mode="light"] {
/* 页面主容器 */
#content-container {
background-color: #f9f8f5 !important;
}
#content-container #messages {
background-color: #f9f8f5;
color: #3a3832 !important;
}
/* 助手消息：无气泡，与 Claude.ai 完全一致 */
.message-content-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
margin: 2px 0 !important;
padding: 4px 0 !important;
color: #3a3832 !important;
}
/* 用户消息：暖灰气泡 */
.message-user .message-content-container {
background: #ebe9e2 !important;
border-radius: 18px 18px 4px 18px !important;
padding: 10px 15px !important;
margin: 4px 0 !important;
color: #3a3832 !important;
box-shadow: none !important;
border: none !important;
}
/* 输入框 */
.inputbar-container {
background-color: #ffffff;
border: 0.5px solid rgba(135, 134, 127, 0.25);
border-radius: 14px;
}
/* 代码 */
code {
background-color: rgba(61, 57, 41, 0.06);
color: #7C1B13;
border-radius: 4px;
padding: 1px 5px;
}
pre code {
background-color: transparent;
color: #1a1a1a;
padding: 0;
}
pre {
background-color: #f0ede6 !important;
border: 0.5px solid rgba(0, 0, 0, 0.07) !important;
border-radius: 10px !important;
}
}
image1912×1472 254 KB
image1916×1464 245 KB