Cherry Studio设置背景图

开发调优
1

改主题怎么改都不好看，干脆加背景图吧，提供一个示例：
图片用了unsplash的图，如果访问不了可以自行替换为其他地址。



: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: #f8f8ff;
  --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: rgba(232, 228, 216, 0.6);
  --navbar-background: #e8e4d8;
  --chat-background: #f0f0e8;
  --chat-background-user: #a0c46b;
  --chat-background-assistant: #e8e4d8;
  --chat-text-user: #f8f8ff;
}
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);
}

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

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: rgba(40, 40, 50, 0.6);
  --navbar-background: #282832;
  --chat-background: #1a1a24;
  --chat-background-user: #6b8e23;
  --chat-background-assistant: #282832;
  --chat-text-user: #10101a;
}

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

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

1
11920×1415 152 KB

5 Likes
2

谢谢佬友分享

1 Like
3

感谢分享

4

哇！好看

5

此话题已在最后回复的 30 天后被自动关闭。不再允许新回复。