cherry studio CSS怎么适配新的导航栏位置

开发调优
1

用了之前站内大佬的CSS设置背景图片。但是cherry studio新出了顶部导航栏，感觉颜值不错。但是应该如何适配呢

Cherry Studio设置背景图 - 开发调优 - LINUX DO

1 个赞
2

win11 v1.5.1、v1.5.3，新旧版本用此主题都是顶部导航栏/左侧导航栏不设置背景图片的，旧版的效果可以从原帖看出的。

看了下代码，确实原主题是只设置了#content-container的bg img，对比我常用的 【3/23更新】Cherry Studio​:sparkles: Mac风格磨砂玻璃主题 - 资源荟萃 / 资源荟萃, Lv1 - LINUX DO，把bg img设置到body就行，--navbar-background也设置成透明的即可。

image
image1620×900 52.3 KB

此外还发现了原主题icon在hover的时候会有样式bug，也顺手修复了。

image
image513×417 33.9 KB

image
image503×453 28.5 KB

:root {
  --light-background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  --dark-background-image: url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

body[theme-mode='light'] {
  --color-background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.9)), var(--light-background-image);
  --color-background-soft: #e8e4d8;
  --color-background-mute: #d8d4c8;
  --color-background-opacity: rgba(245, 242, 232, 0.7);
  --color-text-1: #4a4a4a;
  --color-text-2: #6a6a6a;
  --color-text-3: #8a8a8a;
  --color-primary: #6b8e23;
  --color-primary-soft: rgba(107, 142, 35, 0.6);
  --color-primary-mute: rgba(107, 142, 35, 0.2);
  --color-link: #4682b4;
  --color-error: #b22222;
  --color-white: #f8f8ff;
  --color-white-soft: #f0f0f0;
  --color-white-mute: #e0e0e0;
  --color-black: #363636;
  --color-black-soft: #464646;
  --color-black-mute: #565656;
  --color-gray-1: #708090;
  --color-gray-2: #a9a9a9;
  --color-gray-3: #c0c0c0;
  --color-icon: #6b8e23;
  --color-icon-white: #6b8e23;
  --color-border: #b2b2b2;
  --color-border-soft: #c2c2c2;
  --color-border-mute: #d2d2d2;
  --color-code-background: #e8e4d8;
  --color-hover: rgba(107, 142, 35, 0.1);
  --color-active: rgba(107, 142, 35, 0.2);
  --color-frame-border: #c8c8c8;
  --color-group-background: #e8e4d8;
  --color-reference: #b4c882;
  --color-reference-text: #363636;
  --color-reference-background: #e8f2d8;
  --navbar-background-mac: transparent;
  --navbar-background: transparent;
  --chat-background: #f0f0e8;
  --chat-background-user: #a0c46b;
  --chat-background-assistant: #e8e4d8;
  --chat-text-user: #f8f8ff;
  
  background-image: var(--color-background);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body[theme-mode='light'] .ant-collapse {
  background-color: var(--color-border-mute);
}

body[theme-mode='light'] .ant-collapse-content {
  background-color: var(--color-border-soft);
}

body[theme-mode='light'] .bubble .message-user {
  color: var(--chat-text-user);
}

body[theme-mode='light'] .bubble .message-user .markdown,
body[theme-mode='light'] .bubble .message-user .anticon,
body[theme-mode='light'] .bubble .message-user .iconfont,
body[theme-mode='light'] .bubble .message-user .message-tokens {
  color: var(--chat-text-user) !important;
}

body[theme-mode='light'] .bubble .group-message-wrapper .message-content-container {
  border: 1px solid var(--color-background-mute);
}


body[theme-mode='dark'] {
  --color-background: linear-gradient(rgba(20, 20, 30, 0.75), rgba(20, 20, 30, 0.85)), var(--dark-background-image);
  --color-background-soft: #282832;
  --color-background-mute: #32323c;
  --color-background-opacity: rgba(30, 30, 40, 0.7);
  --color-text-1: #d0d0da;
  --color-text-2: #b0b0ba;
  --color-text-3: #90909a;
  --color-primary: #82a450;
  --color-primary-soft: rgba(130, 164, 80, 0.6);
  --color-primary-mute: rgba(130, 164, 80, 0.2);
  --color-link: #6495ed;
  --color-error: #8b0000;
  --color-white: #d8d8e0;
  --color-white-soft: #b8b8c0;
  --color-white-mute: #9898a0;
  --color-black: #10101a;
  --color-black-soft: #20202a;
  --color-black-mute: #30303a;
  --color-gray-1: #708090;
  --color-gray-2: #696969;
  --color-gray-3: #a9a9a9;
  --color-icon: #82a450;
  --color-icon-white: #10101a;
  --color-border: #484852;
  --color-border-soft: #585862;
  --color-border-mute: #686872;
  --color-code-background: #282832;
  --color-hover: rgba(130, 164, 80, 0.2);
  --color-active: rgba(130, 164, 80, 0.4);
  --color-frame-border: #585862;
  --color-group-background: #282832;
  --color-reference: #6495ed;
  --color-reference-text: #10101a;
  --color-reference-background: #d0d0da;
  --navbar-background-mac: transparent;
  --navbar-background: transparent;
  --chat-background: #1a1a24;
  --chat-background-user: #6b8e23;
  --chat-background-assistant: #282832;
  --chat-text-user: #10101a;
  --color-icon-white: var(--color-primary);

  background-image: var(--color-background);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body[theme-mode='dark'] .ant-collapse {
  background-color: var(--color-border-mute);
}

body[theme-mode='dark'] .ant-collapse-content {
  background-color: var(--color-border-soft);
}

body[theme-mode='dark'] .bubble .message-user {
  color: var(--chat-text-user);
}

body[theme-mode='dark'] .bubble .message-user .markdown,
body[theme-mode='dark'] .bubble .message-user .anticon,
body[theme-mode='dark'] .bubble .message-user .iconfont,
body[theme-mode='dark'] .bubble .message-user .message-tokens {
  color: var(--chat-text-user) !important;
}

body[theme-mode='dark'] .bubble .group-message-wrapper .message-content-container {
  border: 1px solid var(--color-background-mute);
}
3 个赞
3

我靠，感谢大佬 :tieba_020:

1 个赞
4

太好了，终于找到一个没那么多样式的了