[Cherry Studio 主题] 少女终末旅行主题 + 毛玻璃效果

[Qyang]

再试下佬

[panyw5 (YP)]

@kinoyo

为什么我的 cherry studio 始终加载不了背景图片

直接在网页打开背景图片 url 可以吗？

[nightyu (夜宇)]

@panyw5

background

俺也是 不加载图片 就是黑色的 直接访问图片url 是可以的

[Debrief3669 (Fcat)]

下载了，感谢佬

[Debrief3669 (Fcat)]

研究了一下，本地图片导入要这样写：--background-image-url: url('file:///D:/Documents/wallhaven-5g1ep5.jpg');

另外看到有另外一个大佬分享的CSS，我觉得效果也很nice，这里再分享下，支持浅色和深色的毛玻璃效果

原帖地址：建了个仓库，备份一下我自己的CherryStudio主题

/* 0323Mac风格磨砂玻璃主题 */
/* 自行修改其他的字体 */
@font-face {
    font-family: 'LXGWWenKaiGB';
    src: url('file:///D:/Documents/LXGWWenKaiGB-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-9FFF;
}

:root {
    --duration-quick: 0.15s;
    --duration-normal: 0.3s;
    --duration-long: 0.5s;
    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius-dynamic: 12px;
    --radius-large: 12px;

    --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: 'LXGWWenKaiGB', sans-serif;

    --background-blur: 12px;

    --hover-scale: 1.01;
    --active-scale: 0.98;
    --card-translate-y: 6px;

    --chat-text-user: var(--color-text-1);

    --metal-gradient-light: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.07) 100%);
    --metal-gradient-dark: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 100%);
    --border-glow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* 深色模式 */
body[theme-mode="dark"] {
/* 自行修改其他的图片 */
    --background-image-url: url('file:///D:/Documents/wallhaven-5g1ep5.jpg');
    --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(30, 144, 255, 0.4) 0%, rgba(65, 172, 255, 0.4) 100%);
    --user-text-color-dark: rgba(255, 255, 255, 0.95);
    --chat-background-assistant: linear-gradient(to right, rgba(72, 72, 74, 0.4) 0%, rgba(85, 85, 87, 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(180, 180, 200, 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;

    --border-color: rgba(255, 255, 255, 0.05);
    --border-hover-color: rgba(255, 255, 255, 0.1);
    --metal-gradient: var(--metal-gradient-dark);
}

/* 浅色模式 */
body[theme-mode="light"] {
    --background-image-url: url('file:///D:/Documents/wallhaven-5g1ep5.jpg');
    --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(135, 206, 250, 0.5) 0%, rgba(165, 215, 255, 0.5) 100%);
    --chat-background-assistant: linear-gradient(to right, rgba(240, 240, 245, 0.4) 0%, rgba(235, 235, 240, 0.4) 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(80, 80, 100, 0.9);
    --code-bg-light: rgba(240, 240, 245, 0.4);
    --footnote-bg-light: rgba(245, 245, 250, 0.3);
    --theme-lightness: 1;

    --border-color: rgba(255, 255, 255, 0.15);
    --border-hover-color: rgba(255, 255, 255, 0.25);
    --metal-gradient: var(--metal-gradient-light);
}

* {
    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;
}

.message-content-container {
    will-change: transform;
    contain: layout paint style;

    background: color-mix(in srgb, var(--color-background-soft), transparent 10%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    border: none;
    border-radius: var(--radius-dynamic);
    position: relative;
    z-index: 1;

    outline: none;

    transition:
        background-color var(--duration-normal) var(--easing-standard),
        box-shadow var(--duration-normal) var(--easing-standard);

    margin-block: 8px;
    padding-inline: 12px;
    padding-block: 10px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.message-content-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-dynamic);
    background: var(--metal-gradient);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid var(--border-color);
    transition: opacity var(--duration-normal) var(--easing-standard);
}

.message-content-container:hover::before {
    opacity: 0.7;
    border-color: var(--border-hover-color);
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(var(--card-translate-y));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-item {
    animation: cardAppear var(--duration-normal) var(--easing-decelerate) forwards;
}

#inputbar {
    background: color-mix(in srgb, var(--color-background), transparent 20%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    position: relative;
    border-radius: var(--radius-large);
    margin: -15px 20px 15px 20px;
    transition: box-shadow var(--duration-normal) var(--easing-standard);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#inputbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-large);
    background: var(--metal-gradient);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid var(--border-color);
}

#inputbar:focus-within::before {
    opacity: 0.8;
    border-color: var(--color-brand-primary);
    box-shadow: var(--border-glow);
}

.navbar {
    background: color-mix(in srgb, var(--navbar-background), transparent 20%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    position: relative;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    animation: navbarAppear var(--duration-long) var(--easing-standard) forwards;
}

.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.3px;
    background: var(--metal-gradient);
    opacity: 0.5;
}

@keyframes navbarAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-container {
    background: transparent !important;
}

.chat-item.user .message-content-container {
    background: color-mix(in srgb, rgba(135, 206, 250, 0.4), transparent 20%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 3px solid rgba(30, 144, 255, 0.6);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.chat-item.assistant .message-content-container {
    background: color-mix(in srgb, rgba(255, 182, 193, 0.4), transparent 20%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 3px solid rgba(255, 182, 193, 0.6);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

@media (prefers-contrast: more) {
    .message-content-container::before {
        opacity: 0.8;
        border-width: 1px;
    }

    #inputbar::before {
        opacity: 0.8;
        border-width: 1px;
    }
}

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);
}

.ant-collapse-content-box .markdown {
    color: var(--deep-thinking-color);
    background: color-mix(in srgb, var(--color-background-soft), transparent 30%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    border-left: 2px solid rgba(180, 180, 200, 0.3);
}

body[theme-mode="dark"] .ant-collapse-content-box .markdown {
    background: color-mix(in srgb, var(--color-background-soft), transparent 50%) !important;
    border-left: 2px solid rgba(180, 180, 200, 0.2);
}

/* 浅色模式代码背景 - Mac OS风格 */
.shiki.one-light {
    background-color: var(--code-bg-light) !important;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.shiki.one-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--metal-gradient);
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid rgba(0, 0, 0, 0.05);
}

/* 深色模式代码背景 - Mac OS风格 */
.shiki.material-theme-darker {
    background-color: var(--code-bg-dark) !important;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.shiki.material-theme-darker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--metal-gradient);
    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid rgba(255, 255, 255, 0.05);
}

/* 代码块悬停效果 - 光泽变化 */
pre:hover .shiki::before {
    opacity: 0.5;
}

/* 引用来源背景透明 - Mac OS风格 */
.footnotes {
    background-color: var(--footnote-bg-light);
    border-radius: 8px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.footnotes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--metal-gradient);
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid rgba(0, 0, 0, 0.05);
}

body[theme-mode="dark"] .footnotes {
    background-color: var(--footnote-bg-dark);
}

body[theme-mode="dark"] .footnotes::before {
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.2;
}

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

/* 按钮 - Mac OS风格（移除动效） */
button,
.ant-btn {
    border-radius: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--duration-quick) var(--easing-standard);
    position: relative;
    overflow: hidden;
}

/* 按钮金属质感 */
button::before,
.ant-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--metal-gradient);
    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
}

button:hover::before,
.ant-btn:hover::before {
    opacity: 0.4;
}

/* 滚动条 - 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;
    transition: background var(--duration-quick) var(--easing-standard);
    background-image: var(--metal-gradient-light);
    background-size: 100px 100%;
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    background-image: var(--metal-gradient-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 加载时的页面过渡效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    animation: fadeIn 0.8s var(--easing-decelerate) forwards;
}

/* 卡片的内容渐入动画 */
.message-content-container .markdown {
    opacity: 0;
    animation: fadeIn 0.4s var(--easing-decelerate) 0.1s forwards;
}

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

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

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

/* 夜间/日间模式切换按钮（移除动效） */
.theme-toggle-button {
    transition: opacity var(--duration-normal) var(--easing-emphasized);
}

.theme-toggle-button:hover {
    opacity: 0.8;
}

/* 深色模式下的气泡颜色 */
body[theme-mode="dark"] .chat-item.user .message-content-container {
    background: color-mix(in srgb, rgba(30, 144, 255, 0.3), transparent 20%) !important;
    border-left: 3px solid rgba(30, 144, 255, 0.4);
}

body[theme-mode="dark"] .chat-item.assistant .message-content-container {
    background: color-mix(in srgb, rgba(255, 182, 193, 0.3), transparent 20%) !important;
    border-left: 3px solid rgba(255, 182, 193, 0.4);
}

/* 修复注释悬停弹出窗口样式 */
/* 适用于VS Code和类似编辑器的注释悬停提示 */
.hover-contents,
.monaco-hover,
.monaco-hover-content,
.hover-row,
.markdown-hover,
.hover-tooltip,
.tooltip-content,
[role="tooltip"],
div[class*="hover"],
div[class*="tooltip"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: rgba(0, 0, 0, 0.9) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15) !important;
}

/* 确保深色模式下的悬停提示内容可读 */
body[theme-mode="dark"] .hover-contents,
body[theme-mode="dark"] .monaco-hover,
body[theme-mode="dark"] .monaco-hover-content,
body[theme-mode="dark"] .hover-row,
body[theme-mode="dark"] .markdown-hover,
body[theme-mode="dark"] .hover-tooltip,
body[theme-mode="dark"] .tooltip-content,
body[theme-mode="dark"] [role="tooltip"],
body[theme-mode="dark"] div[class*="hover"],
body[theme-mode="dark"] div[class*="tooltip"] {
    background-color: rgba(50, 50, 55, 0.95) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
}

/* 悬停提示内部链接样式 */
.hover-contents a,
.monaco-hover a,
.hover-tooltip a,
.tooltip-content a,
[role="tooltip"] a,
div[class*="hover"] a,
div[class*="tooltip"] a {
    color: var(--color-brand-primary) !important;
}

/* 悬停提示内部代码块样式 */
.hover-contents code,
.monaco-hover code,
.hover-tooltip code,
.tooltip-content code,
[role="tooltip"] code,
div[class*="hover"] code,
div[class*="tooltip"] code {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: inherit !important;
    padding: 0.1em 0.3em !important;
    border-radius: 3px !important;
}

body[theme-mode="dark"] .hover-contents code,
body[theme-mode="dark"] .monaco-hover code,
body[theme-mode="dark"] .hover-tooltip code,
body[theme-mode="dark"] .tooltip-content code,
body[theme-mode="dark"] [role="tooltip"] code,
body[theme-mode="dark"] div[class*="hover"] code,
body[theme-mode="dark"] div[class*="tooltip"] code {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[Aimen (mariahlamb)]

哈哈 这个主题好久了 估计现在不适用了 正常的url跟本地图片都行的

[Debrief3669 (Fcat)]

@Aimen

哈 这个主题好久了 估计现在不适用了 正常的url跟本

我试了是可以的，效果图是这样的：

[Aimen (mariahlamb)]

那就好，我这有的部分会变形，后面换别的了这个没管了

[taoxiaohuang]

这个好用

[zhubaiwan-oozzxx (朱百万oOZZXX)]

一点CSS都不会写，拿Gemini疯狂改了两天，我也不清楚有什么问题

/*
 * 主题名称: 少女终末旅行 - 百万优化版
 * 描述: 一款融合了“少女终末旅行”壁纸、霞鹜文楷字体、炫彩输入框以及透明化UI的美化主题
 * 原作者: https://linux.do/t/topic/755792
 */

/* 导入“霞鹜文楷”字体 */
@import url("https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css");

/*
 * 动画关键帧
 */

/* 输入框流光边框动画 */
@keyframes elegantFlow {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* 输入框聚焦发光动画 */
@keyframes softGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 106, 1, 0.1); }
    50% { box-shadow: 0 0 15px rgba(138, 43, 226, 0.15); }
}

/* 通用点击反馈动画 */
@keyframes clickAnimation {
  0%, 30%, 60%, 100% { transform: scale(1); }
}


/*------------------------------------*\
  根元素变量与全局样式
\*------------------------------------*/

:root {
  /* 全局字体定义 */
  --font-default: "LXGW WenKai Screen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  
  --color-link: #a2fdb5;
  --fill-1: rgba(120 120 122 / 0.1);
  --fill-2: rgba(120 120 122 / 0.3);
  --fill-3: rgba(120 120 122 / 0.25);
  --color-black: var(--fill-1);
  --color-black-soft: var(--fill-2);
  --color-black-mute: var(--fill-3);
  --chat-background: transparent;
  --color-list-item: #5b4057;
  --color-list-item-hover: #4d4c4d;
  --button-hover-light: #79BF55;
  --button-hover-dark: #009A39;
  --input-bg-light: #E6E6E6;
  --input-bg-dark: #202020;
  --button-border-radius: 12px;
  --button-border-radius-hover: 8px;
  --button-border-radius-active: 12px;
  --background-light-new: #F3F3F3;
  --background-assistant-light-new: #E3E3E3;
  --animation: cubic-bezier(.56, -0.37, .46, 1.58);
  --short-timer: 0.2s;
  --long-timer: 0.5s;
}

/* 应用全局字体，并排除图标、公式等特殊元素 */
*:not(.katex):not(.katex *):not(.iconfont):not(.markdown code):not(.markdown pre):not(.MathJax) {
  font-family: var(--font-default) !important;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* 继承字体粗细，保持全局一致性 */
*, *::before, *::after {
	font-weight: inherit;
}

/* “少女终末旅行”主题背景 (仅黑暗模式) */
body[theme-mode="dark"] {
  position: relative;
  z-index: 1; 
}
body[theme-mode="dark"]::before {
  content: ''; 
  background-image: url('https://img.moegirl.org.cn/common/d/d6/Girls_Last_Tour_KV3.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: blur(0px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/* 核心UI元素透明化 */
#root,
body[theme-mode=dark] #chat,
#content-container,
[class^=SettingGroup],
[class^=SettingContainer],
[class^=MainContainer],
[class^=MainContent],
.home-tabs, 
[class^=ProgramSection], 
[class^=IconSection], 
#messages,
[theme-mode=dark] #content-container,
[theme-mode=dark] .minapp-drawer .ant-drawer-body {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
}


/*------------------------------------*\
  对话气泡样式
\*------------------------------------*/

.message-assistant .block-wrapper .markdown p {
  color: #efc3ea;
}
.bubble:not(.multi-select-mode) .message-assistant .message-content-container {
  border-radius: 15px;
  padding: 30px;
  background: rgb(76 50 68 / 30%);
  backdrop-filter: blur(15px);
}

.message-user {
	font-weight: 800 !important;
}
.message-user .block-wrapper .markdown p {
  color: #b5f8b9;
}
.bubble:not(.multi-select-mode) .message-user .message-content-container {
  border-radius: 15px;
  padding: 30px;
	backdrop-filter: blur(15px);
  background: rgba(41, 29, 34, 0.5);
}


/*------------------------------------*\
  输入框样式与动效
\*------------------------------------*/

#inputbar {
    position: relative;
    background: rgba(41, 29, 34, 0.5);
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid #615325;
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

/* 固定输入框尺寸 */
#inputbar textarea {
    height: 120px !important;
    padding: 15px !important;
}

/* 炫彩流光边框 */
#inputbar::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        #ff6a01, #f8c91c, #8a2be2, #00bfff, #ff6a01
    );
    background-size: 300% 300%;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: elegantFlow 6s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1;
}

#inputbar:focus-within::before {
    opacity: 1;
}

#inputbar:focus-within {
    animation: softGlow 3s ease-in-out infinite;
}


/*------------------------------------*\
  Markdown 内容样式
\*------------------------------------*/

/* 多级标题样式 */
.markdown h1 { font-size: 2em; color: #ffadad; border: none; padding-bottom: 0; }
.markdown h2 { font-size: 1.75em; color: #ffd6a5; border: none; padding-bottom: 0; }
.markdown h3 { font-size: 1.5em; color: #fdffb6; border: none; padding-bottom: 0; }
.markdown h4 { font-size: 1.25em; color: #caffbf; border: none; padding-bottom: 0; }
.markdown h5 { font-size: 1.1em; color: #9bf6ff; border: none; padding-bottom: 0; }
.markdown h6 { font-size: 1em; color: #a0c4ff; border: none; padding-bottom: 0; }

/* 加粗、代码块等元素样式 */
.markdown strong {
  color: #ffffaa;
}

body[theme-mode="dark"] pre div[class^="CodeContent"] {
  background-color: rgba(30, 30, 32, 0.7) !important;
}
.shiki.material-theme-darker {
  background-color: transparent !important;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 0.3px solid rgba(255, 255, 255, 0.05);
}


/*------------------------------------*\
  其它界面元素与交互动画
\*------------------------------------*/

/* 部分设置弹窗的毛玻璃效果 */
.eTRMVy, .iaOCiL, .faeYdD, .deaugY, .jGVA, .lfzpcl, .etgWPh  {
    backdrop-filter: blur(15px);
}
/* 快捷助手面板的毛玻璃效果 */
.iAPqoN {
  backdrop-filter: blur(50px);
}

/* 助手设置窗口最小宽度 */
/* .ant-modal-root .ant-modal-centered .ant-modal {
  width: min(900px, 70vw) !important;
} */

/* 用户交互反馈动画 */
[class^="MessageLineContainer"] {
  border-radius: var(--button-border-radius);
}
[class^="MessageLineContainer"] [class^="MessageItem"]:active {
  animation: clickAnimation var(--long-timer) var(--animation);
}

[class^="Icon"]:hover,
[class^="ant"]:hover,
[class^="ActionButton"]:hover,
[class^="TopicListItem"]:hover,
[class^="ProviderListItem"]:hover,
[class^="MenuItem"]:hover,
[class^="MenuButton"]:hover,
[class^="EmojiBackground"]:hover {
  border-radius: var(--button-border-radius-hover) !important;
  transition: border-radius var(--short-timer) var(--animation);
}

[class^="IconItem"]:active,
[class^="ant-avatar"]:active,
[class^="ant-btn"]:active,
[class^="ant-segmented-item"]:active,
[class^="anticon"]:active,
[class^="ant-upload"]:active,
[class^="ant-divider"]:active,
[class^="ant-tooltip"]:active,
[class^="ant-message"]:active,
[class^="ActionButton"]:active,
[class^="TopicListItem"]:active,
[class^="ProviderListItem"]:active,
[class^="MenuItem"]:active,
[class^="MenuButton"]:active,
[class^="EmojiBackground"]:active,
[class~="ant-dropdown-menu-item"]:active,
[class~="ant-dropdown-menu-submenu-title"]:active,
[class~="ant-select-selector"]:active,
[class~="ant-select-item"]:active {
  border-radius: var(--button-border-radius-active) !important;
  transition: border-radius var(--short-timer) var(--animation);
  animation: clickAnimation var(--long-timer) var(--animation);
}

/* 其它兼容性样式 */
.kaRosT {
	margin-bottom: 10px;
}
.css-var-«r0».ant-tag {
	--ant-tag-default-bg: #473544;
    padding: 5px;
}

主要参考了：

1. 本帖的CSS及佬友的修改
2. @Aimen 佬的多个主题，记不清哪个哪个主题了，试了好几个主题看到什么喜欢的就拿佬的去应用过来，继续用了我最喜欢的霞鹜文楷字体。
3. 渐变炫彩输入框参考了这个：CherryStudio_themes/themes/just-flowing-border.scss at master · BoningtonChen/CherryStudio_themes · GitHub

---

拼尽全力无法战胜，@Aimen 佬的CherryYou主题实在过于强大，给Gemini发的一大堆主题里只要包含了这个主题，最后都会变成CherryYou

[Aimen (mariahlamb)]

来 我又发了个cherryyou 你迭个代

[panyw5 (YP)]

@zhubaiwan-oozzxx

#inputbar:focus-within::before {
    opacity: 1;
}

#inputbar:focus-within {
    animation: softGlow 3s ease-in-out infinite;
}

好酷炫的输入框

[ert (老斯人)]

有品，太有品了

[ert (老斯人)]

谢谢，终于可以了！！！

[skysaber (辕 轩)]

报一个小bug
打开小程序，顶部菜单栏显示重叠了

[panyw5 (YP)]

似乎把 --color-black: var(--fill-1); 注释掉就好了。还得测试下，会不会导致其它 bug

[skysaber (辕 轩)]

果然可以了 谢谢 有问题再报

[wenruan (仐湫)]

太牛了

[Lin_Xiao (XiaoLin)]

感谢大佬分享