CherryStudio-Aero

English | 简体中文 | 繁體中文 | 廣東話

Aero: Authentic, Energetic, Reflective and Open

Give your Cherry Studio a modern, Aero theme

Note

Frosted glass effect only works on Cherry Studio for macOS.

Screenshots

Getting started

Copy the following CSS to Settings -> Display Settings -> Custom CSS

CSS

/* Cherry Studio Aero Theme */
/* https://github.com/hakadao/CherryStudio-Aero */

body[theme-mode=light] {
  --fill-1: rgba(120 120 122 / 0.1);
  --fill-2: rgba(120 120 122 / 0.15);
  --fill-3: rgba(120 120 122 / 0.20);

  --color-white: var(--fill-1);
  --color-white-soft: var(--fill-2);
  --color-white-mute: var(--fill-3);
}

:root {
  --fill-1: rgba(120 120 122 / 0.15);
  --fill-2: rgba(120 120 122 / 0.20);
  --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);
}

/* Fix Quick Assistant's transparent background on Windows (text hard to see) */
body[theme-mode=light][os=windows] {
  --color-background: hsla(0 0 100% / 1);
  --color-background-opacity: hsla(0 0 90% / 0.6);
}

/* Fix Quick Assistant's transparent background on Windows (text hard to see) */
body[theme-mode=dark][os=windows] {
  --color-background: hsla(0 0 8% / 1);
  --color-background-opacity: hsla(0 0 8% / 0.6);
}

@media (prefers-color-scheme: dark) {
  body[theme-mode=light] {
      background: rgba(255 255 255 / 0.3);
  }
}

@media (prefers-color-scheme: light) {
  body[theme-mode=dark] {
      background: rgba(0 0 0 / 0.2);
  }
}

[theme-mode=light] #content-container,
[theme-mode=light] .minapp-drawer .ant-drawer-body {
  background-color: rgba(120 120 122 / 0.05);
}

[theme-mode=dark] #content-container,
[theme-mode=dark] .minapp-drawer .ant-drawer-body {
  background-color: rgba(120 120 122 / 0.05);
}

.home-tabs,
[class^=ProgramSection],
[class^=IconSection],
#messages, 
[class^=SettingContainer] {
  background-color: transparent;
}

[class^=TopicListItem] .menu {
  background-color: transparent !important;
}

#inputbar,
.system-prompt,
[class^=CardContent],
[class^=ServerCard] {
  background-color: var(--fill-1);
}

[theme-mode=light] #chat,
[theme-mode=light] [class^=SettingGroup],
[theme-mode=light] [class^=MainContainer],
[theme-mode=light] [class^=MainContent] {
  background-color: hsla(0 0% 100% / 0.4);
}

/* On the right side of "Model Provider" in Settings */
[theme-mode=light] [class^=ProviderListContainer] + [class^=SettingContainer] {
  background: hsla(0 0% 100% / 0.4) !important;
}

[theme-mode=dark] #chat,
[theme-mode=dark] [class^=SettingGroup],
[theme-mode=dark] [class^=MainContainer],
[theme-mode=dark] [class^=MainContent] {
  background-color: hsla(0 0% 0% / 0.2);
}

/* On the right side of "Model Provider" in Settings */
[theme-mode=dark] [class^=ProviderListContainer] + [class^=SettingContainer] {
  background: hsla(0 0% 0% / 0.2) !important;
}

[theme-mode=light] [class^=ant-modal],
[theme-mode=light] #root[style*="background: var(--color-white)"] {
  --color-white: #ffffff;
  --color-white-soft: #f2f2f2;
  --color-white-mute: #eee;

  --color-background: var(--color-white);
  --color-background-soft: var(--color-white-soft);
  --color-background-mute: var(--color-white-mute);
}

[theme-mode=dark] [class^=ant-modal] {
  --color-black: #1b1b1f;
  --color-black-soft: #262626;
  --color-black-mute: #363636;

  --color-background: var(--color-black);
  --color-background-soft: var(--color-black-soft);
  --color-background-mute: var(--color-black-mute);
}

.bubble .message-user,
[class^=ant] {
  --color-black: #1b1b1f;
  --color-black-soft: #262626;
  --color-black-mute: #363636;
  --color-white: #ffffff;
  --color-white-soft: #f2f2f2;
  --color-white-mute: #eee;

  --chat-text-user: var(--color-black);
}