本文适合人群：每天使用 Cherry Studio 与各类大模型对话的开发者、知识工作者。
阅读收益：从原理到落地，彻底搞懂 Cherry Studio 的主题系统，手把手改出一套独属于你的配色皮肤。
阅读时长：约 15 分钟。
前言：为什么值得为 Cherry Studio 换一套皮肤
Cherry Studio 是目前国内最热门的多模型桌面 AI 客户端之一，支持 OpenAI、Claude、Gemini、DeepSeek、通义千问等几乎所有主流大模型，开源、本地优先、可自定义智能体。对很多人来说，它已经是一个每天打开十几次的高频工具。
但默认皮肤用久了难免审美疲劳——蓝紫色调千篇一律，深色模式下消息气泡和代码块的对比度也不一定顺眼。更关键的是，Cherry Studio 的主题定制能力其实远比大多数人以为的要强：它不只是"换个主题色"那么简单，背后是一套完整的 CSS 变量主题引擎，理论上可以改到每一个像素。
这篇文章我会从主题系统的底层架构讲起，带你看穿它的换肤原理，再用三套由浅入深的实战方案，把皮肤彻底改成你想要的样子。全文所有操作均基于 Cherry Studio 桌面端实测，文末附完整可复制的 CSS 代码。
一、先看懂原理：Cherry Studio 的主题系统是怎么运转的
很多人换肤失败，是因为不知道 Cherry Studio 的"皮肤"到底由什么构成。理解了原理，后面所有操作你都能举一反三。
Cherry Studio 是一个基于 Electron + React 构建的桌面应用，界面层使用的是 Ant Design 5.x（Antd 5）组件库。Antd 5 引入了 CSS-in-JS 的动态主题能力，当在 ConfigProvider 中开启cssVar选项后，会把主题参数以 CSS 自定义属性（CSS Custom Properties，也就是 CSS 变量）的形式注入到 DOM 中。Cherry Studio 在此基础上做了一层自己的封装并启用了这套变量机制，形成了一套"变量驱动"的主题引擎。
它的核心运转机制可以概括为三点：
第一，所有视觉 token（颜色、圆角、间距等）都被抽象成 CSS 变量，集中定义在:root这个根作用域里。比如主品牌色对应的变量是--color-brand-primary，它的值用的是现代的oklch()颜色函数，例如oklch(62.8% 0.25 29.2)——这是一种感知均匀的颜色空间，调色时比传统的#hex或rgb()更不容易出现"亮度跳变"。
第二，深色/浅色模式通过在根元素上切换一个主题属性（类似[data-theme]或[theme-mode]）来实现。切换时，同一套变量名会被赋予不同的值，整个界面随之联动。这也是为什么你在设置里点一下"深色模式"，所有组件能瞬间换色——并没有重新渲染，只是变量值被替换了。
第三，Cherry Studio 在设置中开放了一个"自定义 CSS"输入框，允许你直接往应用里注入任意 CSS 代码。这段代码会在界面加载后被注入，优先级足够覆盖默认样式。这意味着即使你不改源码、不重新编译，也能通过覆盖变量或直接写选择器来改变任何外观。
一句话总结：Cherry Studio 的皮肤 = 一组 CSS 变量 + 明暗模式切换 + 一段可注入的自定义 CSS。理解了这一点，接下来的三套方案就是顺着这个结构层层递进。
