分享一套cherry studio主题（黑白Catppuccin+动画）

[user2241]

基于官方的Catppuccin和强大的claude修改，个人感觉不错，黑白两色，也带动画效果，需要自取。

Catppuccin.txt (18.8 KB)

​

/*

• Catppuccin Theme - Based on Catppuccin Color Scheme
• Original: GitHub - catppuccin/catppuccin: 😸 Soothing pastel theme for the high-spirited! (MIT License)
• Optimized for Cherry Studio with Enhanced Typography
  */

/* ========== 动画定义 ========== */

/* 消息弹出效果 - 优化版 */
@keyframes messagePop {
0% {
will-change: transform, opacity, filter;
opacity: 0;
transform: translateY(-10px) rotateX(-16deg) scale(0.92);
filter: blur(8px) brightness(0.3);
}
100% {
will-change: auto;
opacity: 1;
transform: translateY(0) rotateX(0deg) scale(1);
filter: blur(0) brightness(1);
}
}

/* 模态框弹出效果 - 优化版 */
@keyframes modalPop {
0% {
will-change: transform, opacity, filter;
opacity: 0;
transform: translateY(4px) rotateX(-60deg) scale(0.9);
filter: blur(8px);
}
100% {
will-change: auto;
opacity: 1;
transform: translateY(0) rotateX(0deg) scale(1);
filter: blur(0);
}
}

/* 链接悬停动画 */
@keyframes linkUnderline {
from {
width: 0;
}
to {
width: 100%;
}
}

/* ========== 公共样式(适用于所有主题) ========== */

/* 基础主题样式 /
body[theme-mode] {
color: var(–color-text-primary);
line-height: 1.7; / 提升行高以增强可读性 */
transition: color 0.3s ease, background-color 0.3s ease;
}

/* 内容容器 */
body[theme-mode] #content-container {
background-color: var(–color-background);
transition: background-color 0.25s ease-out;
}

body[theme-mode] #content-container #messages,
body[theme-mode] #content-container #chat {
background-image: none;
background-color: var(–chat-background);
transition: background-color 0.25s ease-out;
}

/* 消息动画 */
body[theme-mode] .message-content-container {
animation: messagePop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 输入框容器 */
body[theme-mode] .inputbar-container {
border: 1px solid var(–color-border-soft);
border-radius: 8px;
transition: background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}

/* 用户消息气泡 */
body[theme-mode] .message-user .message-bubble {
background-color: var(–chat-background-user);
transition: background-color 0.25s ease-out,
border-color 0.25s ease-out;
}

/* 助手消息气泡 */
body[theme-mode] .message-assistant .message-bubble {
background-color: var(–chat-background-assistant);
transition: background-color 0.25s ease-out;
}

/* ========== 增强的文本排版样式 ========== */

/* 标题样式 - 使用Catppuccin配色增强层级 */
body[theme-mode] .markdown h1,
body[theme-mode] .markdown h2,
body[theme-mode] .markdown h3,
body[theme-mode] .markdown h4,
body[theme-mode] .markdown h5,
body[theme-mode] .markdown h6 {
font-weight: 700;
line-height: 1.3;
margin-top: 1.5em;
margin-bottom: 0.75em;
color: var(–color-heading);
transition: color 0.25s ease-out;
}

body[theme-mode] .markdown h1 {
font-size: 2em;
color: var(–color-heading-primary);
border-bottom: 2px solid var(–color-accent-subtle);
padding-bottom: 0.3em;
}

body[theme-mode] .markdown h2 {
font-size: 1.6em;
color: var(–color-heading-secondary);
}

body[theme-mode] .markdown h3 {
font-size: 1.3em;
}

body[theme-mode] .markdown h4 {
font-size: 1.1em;
}

body[theme-mode] .markdown h5,
body[theme-mode] .markdown h6 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}

/* 段落样式 */
body[theme-mode] .markdown p {
margin-bottom: 1em;
line-height: 1.8;
color: var(–color-text-primary);
}

/* 强调文本 - 使用Peach/Red色彩 */
body[theme-mode] .markdown strong,
body[theme-mode] .markdown b {
font-weight: 700;
color: var(–color-text-bold);
transition: color 0.25s ease-out;
}

/* 斜体文本 - 使用Yellow色彩 */
body[theme-mode] .markdown em,
body[theme-mode] .markdown i {
font-style: italic;
color: var(–color-text-italic);
transition: color 0.25s ease-out;
}

/* 删除线 */
body[theme-mode] .markdown del,
body[theme-mode] .markdown s {
text-decoration: line-through;
color: var(–color-text-muted);
opacity: 0.7;
}

/* 链接样式 - 使用Blue配色 */
body[theme-mode] .markdown a {
color: var(–color-link);
text-decoration: none;
position: relative;
font-weight: 500;
transition: color 0.25s ease-out;
}

body[theme-mode] .markdown a::after {
content: ‘’;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(–color-link-hover);
transition: width 0.3s ease-out;
}

body[theme-mode] .markdown a:hover {
color: var(–color-link-hover);
}

body[theme-mode] .markdown a:hover::after {
width: 100%;
}

/* 外部链接样式 - 使用Teal色彩 */
body[theme-mode] .markdown a[href^=“http”]::before {
content: ' ';
color: var(–color-link-external);
font-size: 0.85em;
margin-right: 2px;
}

/* 引用块样式 - 使用Green左边框和Surface0背景 */
body[theme-mode] .markdown blockquote {
margin: 1.5em 0;
padding: 1em 1.5em;
background-color: var(–color-blockquote-bg);
border-left: 4px solid var(–color-blockquote-border);
border-radius: 0 8px 8px 0;
font-style: italic;
color: var(–color-text-secondary);
transition: background-color 0.25s ease-out, border-color 0.25s ease-out;
}

body[theme-mode] .markdown blockquote p {
margin: 0;
}

body[theme-mode] .markdown blockquote::before {
content: ‘"’;
font-size: 3em;
color: var(–color-blockquote-accent);
opacity: 0.2;
position: absolute;
margin-left: -0.5em;
margin-top: -0.3em;
}

/* 列表样式 - 增强视觉引导 */
body[theme-mode] .markdown ul,
body[theme-mode] .markdown ol {
margin: 1em 0;
padding-left: 2em;
line-height: 1.8;
}

body[theme-mode] .markdown ul li {
position: relative;
margin-bottom: 0.5em;
}

/* 自定义项目符号颜色 */
body[theme-mode] .markdown ul li::marker {
color: var(–color-list-marker);
font-weight: bold;
}

body[theme-mode] .markdown ol li::marker {
color: var(–color-list-marker);
font-weight: 600;
}

/* 嵌套列表缩进优化 */
body[theme-mode] .markdown ul ul,
body[theme-mode] .markdown ol ul,
body[theme-mode] .markdown ul ol,
body[theme-mode] .markdown ol ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}

/* 任务列表样式 */
body[theme-mode] .markdown input[type=“checkbox”] {
accent-color: var(–color-checkbox-accent);
margin-right: 0.5em;
cursor: pointer;
}

/* 水平分割线 */
body[theme-mode] .markdown hr {
border: none;
height: 2px;
background: linear-gradient(
to right,
transparent,
var(–color-divider) 20%,
var(–color-divider) 80%,
transparent
);
margin: 2em 0;
}

/* 表格样式 - 增强可读性 */
body[theme-mode] .markdown table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body[theme-mode] .markdown table thead {
background-color: var(–color-table-header-bg);
}

body[theme-mode] .markdown table th {
padding: 12px 16px;
text-align: left;
font-weight: 700;
color: var(–color-table-header-text);
border-bottom: 2px solid var(–color-table-border);
transition: background-color 0.25s ease-out;
}

body[theme-mode] .markdown table td {
padding: 10px 16px;
border-bottom: 1px solid var(–color-table-border);
color: var(–color-text-primary);
transition: background-color 0.25s ease-out;
}

body[theme-mode] .markdown table tbody tr:hover {
background-color: var(–color-table-row-hover);
}

body[theme-mode] .markdown table tbody tr:last-child td {
border-bottom: none;
}

/* ========== 代码块样式优化 ========== */

/* 内联代码 - 使用Mauve配色 */
body[theme-mode] .markdown code {
padding: 0.2em 0.4em;
background-color: var(–color-code-background-inline);
color: var(–color-code-text-inline);
border-radius: 4px;
font-family: ‘JetBrains Mono’, ‘Fira Code’, ‘Cascadia Code’, ‘Consolas’, monospace;
font-size: 0.9em;
font-weight: 500;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

/* 块级代码 - Shiki语法高亮 */
body[theme-mode] .markdown pre {
padding: 0;
border-radius: 12px;
background: none;
box-shadow: none;
margin: 1.5em 0;
overflow: hidden;
}

body[theme-mode] .markdown pre code {
padding: 0;
background: none;
color: inherit;
border-radius: 0;
font-size: 0.95em;
line-height: 1.6;
}

body[theme-mode] .markdown pre .shiki {
border: none;
background-color: var(–color-background-mute);
padding: 1.25em 1.5em;
transition: background-color 0.25s ease-out;
}

/* 代码块容器 */
body[theme-mode] .markdown pre [class^=“CodeBlockWrapper-”] {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 代码块头部 */
body[theme-mode] .markdown pre [class^=“CodeHeader-”] {
border-radius: 12px 12px 0 0;
background-color: var(–color-code-header);
border-bottom: none;
margin-bottom: 0;
padding: 0.75em 1.5em;
font-size: 0.85em;
font-weight: 600;
color: var(–color-code-header-text);
transition: background-color 0.25s ease-out;
}

/* 代码块内容 */
body[theme-mode] .markdown pre [class^=“CodeContent-”] {
background-color: var(–color-background-mute);
border-radius: 0 0 12px 12px;
border-top: none;
margin-top: 0;
transition: background-color 0.25s ease-out;
}

/* 代码块滚动条样式 */
body[theme-mode] .markdown pre::-webkit-scrollbar {
height: 8px;
}

body[theme-mode] .markdown pre::-webkit-scrollbar-track {
background-color: var(–color-scrollbar-track);
border-radius: 4px;
}

body[theme-mode] .markdown pre::-webkit-scrollbar-thumb {
background-color: var(–color-scrollbar-thumb);
border-radius: 4px;
transition: background-color 0.25s ease-out;
}

body[theme-mode] .markdown pre::-webkit-scrollbar-thumb:hover {
background-color: var(–color-scrollbar-thumb-hover);
}

/* ========== Ant Design组件优化 ========== */

/* 折叠面板 */
body[theme-mode] .ant-collapse-content,
body[theme-mode] .ant-collapse-content-box {
background-color: var(–color-background-mute);
border-radius: 0 0 8px 8px;
transition: background-color 0.25s ease-out;
}

/* 模态框遮罩 */
body[theme-mode] .ant-modal-root .ant-modal-mask {
background-color: transparent;
}

/* 模态框内容 */
body[theme-mode] .ant-modal .ant-modal-content {
border-radius: 18px;
border: 2px solid var(–color-modal-border);
background-color: var(–color-modal-background);
-webkit-backdrop-filter: blur(45px);
backdrop-filter: blur(45px);
animation: modalPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 不支持backdrop-filter的浏览器回退方案 */
@supports not (backdrop-filter: blur(45px)) {
body[theme-mode] .ant-modal .ant-modal-content {
background-color: var(–color-modal-background-fallback);
}
}

body[theme-mode] .ant-modal .ant-modal-header {
background-color: transparent;
}

/* ========== 亮色主题 (Catppuccin Latte) ========== */

body[theme-mode=“light”] {
/* Catppuccin Latte 调色板 */
–catppuccin-rosewater: #dc8a78;
–catppuccin-flamingo: #dd7878;
–catppuccin-pink: #ea76cb;
–catppuccin-mauve: #8839ef;
–catppuccin-red: #d20f39;
–catppuccin-maroon: #e64553;
–catppuccin-peach: #fe640b;
–catppuccin-yellow: #df8e1d;
–catppuccin-green: #40a02b;
–catppuccin-teal: #179299;
–catppuccin-sky: #04a5e5;
–catppuccin-sapphire: #209fb5;
–catppuccin-blue: #1e66f5;
–catppuccin-lavender: #7287fd;

--catppuccin-text: #4c4f69;
--catppuccin-subtext1: #5c5f77;
--catppuccin-subtext0: #6c6f85;
--catppuccin-overlay2: #7c7f93;
--catppuccin-overlay1: #8c8fa1;
--catppuccin-overlay0: #9ca0b0;
--catppuccin-surface2: #acb0be;
--catppuccin-surface1: #bcc0cc;
--catppuccin-surface0: #ccd0da;
--catppuccin-base: #eff1f5;
--catppuccin-mantle: #e6e9ef;
--catppuccin-crust: #dce0e8;

/* 基础语义化颜色变量 */
--color-background: var(--catppuccin-base);
--color-background-soft: var(--catppuccin-mantle);
--color-background-mute: var(--catppuccin-crust);
--color-border-soft: var(--catppuccin-surface1);
--color-text-primary: var(--catppuccin-text);
--color-text-secondary: var(--catppuccin-subtext1);
--color-text-muted: var(--catppuccin-overlay1);

/* 排版增强颜色变量 */
--color-heading: var(--catppuccin-mauve);
--color-heading-primary: var(--catppuccin-mauve);
--color-heading-secondary: var(--catppuccin-lavender);
--color-text-bold: var(--catppuccin-maroon);
--color-text-italic: var(--catppuccin-yellow);
--color-link: var(--catppuccin-blue);
--color-link-hover: var(--catppuccin-sapphire);
--color-link-external: var(--catppuccin-teal);
--color-accent-subtle: var(--catppuccin-lavender);

/* 引用块颜色 */
--color-blockquote-bg: var(--catppuccin-surface0);
--color-blockquote-border: var(--catppuccin-green);
--color-blockquote-accent: var(--catppuccin-green);

/* 列表颜色 */
--color-list-marker: var(--catppuccin-mauve);
--color-checkbox-accent: var(--catppuccin-green);
--color-divider: var(--catppuccin-surface2);

/* 表格颜色 */
--color-table-header-bg: var(--catppuccin-mantle);
--color-table-header-text: var(--catppuccin-text);
--color-table-border: var(--catppuccin-surface1);
--color-table-row-hover: var(--catppuccin-surface0);

/* 代码块颜色 */
--color-code-background-inline: var(--catppuccin-surface0);
--color-code-text-inline: var(--catppuccin-mauve);
--color-code-header: var(--catppuccin-mantle);
--color-code-header-text: var(--catppuccin-text);

/* 滚动条颜色 */
--color-scrollbar-track: var(--catppuccin-surface0);
--color-scrollbar-thumb: var(--catppuccin-overlay0);
--color-scrollbar-thumb-hover: var(--catppuccin-overlay2);

/* 界面元素颜色 */
--navbar-background: var(--catppuccin-base);
--chat-background: var(--catppuccin-base);
--chat-background-user: var(--catppuccin-surface0);
--chat-background-assistant: var(--catppuccin-base);

/* 模态框颜色 */
--color-modal-border: var(--catppuccin-surface1);
--color-modal-background: rgba(239, 241, 245, 0.95);
--color-modal-background-fallback: rgba(239, 241, 245, 0.98);

}

/* 亮色主题特有样式 */
body[theme-mode=“light”] .inputbar-container {
background-color: var(–catppuccin-base);
box-shadow: 0 5px 30px -12px rgba(0, 0, 0, 0.1);
}

body[theme-mode=“light”] .inputbar-container:focus-within {
border-color: var(–catppuccin-lavender);
background-color: var(–catppuccin-mantle);
box-shadow: 0 5px 50px -12px rgba(30, 102, 245, 0.2);
}

body[theme-mode=“light”] .message-user .message-bubble {
border: 1px solid var(–catppuccin-surface1);
}

/* ========== 暗色主题 (Catppuccin Frappé) ========== */

body[theme-mode=“dark”] {
/* Catppuccin Frappé 调色板 */
–catppuccin-rosewater: #f2d5cf;
–catppuccin-flamingo: #eebebe;
–catppuccin-pink: #f4b8e4;
–catppuccin-mauve: #ca9ee6;
–catppuccin-red: #e78284;
–catppuccin-maroon: #ea999c;
–catppuccin-peach: #ef9f76;
–catppuccin-yellow: #e5c890;
–catppuccin-green: #a6d189;
–catppuccin-teal: #81c8be;
–catppuccin-sky: #99d1db;
–catppuccin-sapphire: #85c1dc;
–catppuccin-blue: #8caaee;
–catppuccin-lavender: #babbf1;

--catppuccin-text: #c6d0f5;
--catppuccin-subtext1: #b5bfe2;
--catppuccin-subtext0: #a5adce;
--catppuccin-overlay2: #949cbb;
--catppuccin-overlay1: #838ba7;
--catppuccin-overlay0: #737994;
--catppuccin-surface2: #626880;
--catppuccin-surface1: #51576d;
--catppuccin-surface0: #414559;
--catppuccin-base: #303446;
--catppuccin-mantle: #292c3c;
--catppuccin-crust: #232634;

/* 基础语义化颜色变量 */
--color-background: var(--catppuccin-base);
--color-background-soft: var(--catppuccin-surface0);
--color-background-mute: var(--catppuccin-mantle);
--color-border-soft: var(--catppuccin-surface1);
--color-text-primary: var(--catppuccin-text);
--color-text-secondary: var(--catppuccin-subtext1);
--color-text-muted: var(--catppuccin-overlay1);

/* 排版增强颜色变量 */
--color-heading: var(--catppuccin-mauve);
--color-heading-primary: var(--catppuccin-mauve);
--color-heading-secondary: var(--catppuccin-lavender);
--color-text-bold: var(--catppuccin-maroon);
--color-text-italic: var(--catppuccin-yellow);
--color-link: var(--catppuccin-blue);
--color-link-hover: var(--catppuccin-sapphire);
--color-link-external: var(--catppuccin-teal);
--color-accent-subtle: var(--catppuccin-lavender);

/* 引用块颜色 */
--color-blockquote-bg: var(--catppuccin-surface0);
--color-blockquote-border: var(--catppuccin-green);
--color-blockquote-accent: var(--catppuccin-green);

/* 列表颜色 */
--color-list-marker: var(--catppuccin-mauve);
--color-checkbox-accent: var(--catppuccin-green);
--color-divider: var(--catppuccin-surface2);

/* 表格颜色 */
--color-table-header-bg: var(--catppuccin-surface0);
--color-table-header-text: var(--catppuccin-text);
--color-table-border: var(--catppuccin-surface1);
--color-table-row-hover: var(--catppuccin-surface0);

/* 代码块颜色 */
--color-code-background-inline: var(--catppuccin-surface0);
--color-code-text-inline: var(--catppuccin-mauve);
--color-code-header: var(--catppuccin-surface0);
--color-code-header-text: var(--catppuccin-text);

/* 滚动条颜色 */
--color-scrollbar-track: var(--catppuccin-surface0);
--color-scrollbar-thumb: var(--catppuccin-overlay0);
--color-scrollbar-thumb-hover: var(--catppuccin-overlay2);

/* 界面元素颜色 */
--navbar-background: var(--catppuccin-base);
--chat-background: var(--catppuccin-base);
--chat-background-user: var(--catppuccin-surface0);
--chat-background-assistant: var(--catppuccin-base);

/* 模态框颜色 */
--color-modal-border: rgba(255, 255, 255, 0.2);
--color-modal-background: rgba(48, 52, 70, 0.95);
--color-modal-background-fallback: rgba(48, 52, 70, 0.98);

}

/* 暗色主题特有样式 */
body[theme-mode=“dark”] .inputbar-container {
background-color: var(–catppuccin-surface0);
box-shadow: 0 5px 30px -12px rgba(0, 0, 0, 0.8);
}

body[theme-mode=“dark”] .inputbar-container:focus-within {
border-color: var(–catppuccin-lavender);
background-color: var(–catppuccin-surface0);
box-shadow: 0 5px 50px -12px rgba(186, 187, 241, 0.3);
}

[handsome (大帅哥)]

感谢大佬

[Ven]

简约耐看，收下了谢谢

[LlNUS]

我说这个配色怎么看着这么眼熟呢

[BigBigBigSnowMan (大大大雪人)]

下来试试看

[patmon (莉莉安)]

简约万岁！！！

[aB3R (aBER)]

好看！谢谢分享

[jokergaming (doomer)]

感谢佬分享

[smwy (🅂🄼🅆🅈|山抹微云)]

[!info]感谢佬分享~~

[dantaKing]

[!tip] 感谢分享

[svejk9527]

谢谢分享

[Hal]

拿走了，谢谢

[Devo]

谢谢佬，好看简约

[ocean-zhc (king)]

优雅，收下了，感谢大佬

[dream_bugless (全栈梦想家)]

检索了半天 没找到咋用。

放到这里没生效。

[moonknight]

感谢大佬

[ruobai]

什么网站呀

[BigBigBigSnowMan (大大大雪人)]

就是放在这个自定义CSS的，我这边有效果。

[Jimmy2Angel (唯独你没懂)]

试用了下，不错的很，感谢

[fengyzu (风语者)]

谢谢佬，不过是否还有一个小问题：加粗的优先级有点高啊，如果是多级标题加粗，例如：

###**H3 标题**
###这是一个H3标题
（最终颜色：^#8839eF-鲜艳的紫色)

生成的文本颜色是加粗的颜色，而不是三级标题的颜色，这就导致输出一级到三级标题的时候，有时候会有混色