CherryStudio-Aero

CherryStudio-Aero

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

Aero: Authentic, Energetic, Reflective and Open

Give your Cherry Studio a modern, Aero theme

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: hsl(220 10% 100% / 0.6);
  --fill-2: hsl(220 10% 50% / 0.1);
  --fill-3: hsl(220 10% 50% / 0.14);

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

  --color-list-item: var(--fill-1);
  --color-list-item-hover: var(--fill-2);

  --aero-background-1: hsl(0 0% 100% / 0.2);
  --aero-background-2: hsl(0 0% 100% / 0.4);
  --aero-background-3: hsl(0 0% 100% / 0.6);
  --aero-background-solid: hsl(0 0% 100% / 1);

  --navbar-background: hsl(220 20% 94%);
  /* remove the background of the navbar to make it more transparent on macOS */
  --navbar-background-mac: hsl(220 20% 94% / 0.2);
}

body[theme-mode='dark'] {
  --aero-background-1: rgba(22 22 22 / 0.2);
  --aero-background-2: rgba(22 22 22 / 0.4);
  --aero-background-3: rgba(22 22 22 / 0.6);
  --aero-background-solid: rgba(22 22 22 / 1);
}

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

  --color-list-item: var(--fill-1);
  --color-list-item-hover: var(--fill-2);
}

/* reset ant design variables */
body[theme-mode='light'] *,
body[theme-mode='light'] [class^='ant'] {
  --ant-select-selector-bg: var(--aero-background-1);
  --ant-color-bg-container: var(--aero-background-1);
  --ant-segmented-item-selected-bg: var(--aero-background-3);
  --ant-button-default-bg: var(--aero-background-1);
  --ant-radio-button-bg: var(--aero-background-1);
}

/* reset ant design variables */
body[theme-mode='dark'] *,
body[theme-mode='dark'] [class^='ant'] {
  --ant-select-selector-bg: var(--fill-1);
  --ant-color-bg-container: var(--fill-1);
  --ant-segmented-item-selected-bg: var(--fill-3);
  --ant-button-default-bg: var(--fill-1);
  --ant-radio-button-bg: var(--fill-1);
}

/* when navbar position is on the left */
[navbar-position=left][theme-mode=light] {
  --color-list-item: var(--fill-1);
  --color-list-item-hover: var(--fill-2);
}
[navbar-position=left][theme-mode=dark] {
  --color-list-item: var(--fill-1);
  --color-list-item-hover: var(--fill-2);
}
[navbar-position="left"] .home-tabs {
  background-color: var(--aero-background-1);
}

/* Fix new window background issue to adapt to new UI */
[class^='PageContainer'] {
  background-color: var(--aero-background-solid) !important;
}

@media (prefers-color-scheme: dark) {
  body[theme-mode='light'] {
    background: hsla(0 0% 100% / 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: var(--navbar-background-mac, var(--navbar-background));
}

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

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

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

/* Keep Cherry Studio 2.0's floating prompt editor legible over conversation text */
#inputbar {
  background-color: var(--aero-background-3);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

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

[theme-mode='light'] #chat,
[theme-mode='light'] [class^='SettingGroup'],
[theme-mode='light'] [class^='MainContainer'],
/* [theme-mode='light'] [class^='MainContent'], */
[theme-mode='light'] [class^='AgentCardContainer'] {
  background-color: var(--aero-background-2);
}

/* On the right side of "Model Provider" in Settings */
[theme-mode='light']
  [class^='ProviderListContainer']
  + [class^='SettingContainer'] {
  background: var(--aero-background-2) !important;
}

[theme-mode='dark'] #chat,
[theme-mode='dark'] [class^='SettingGroup'],
[theme-mode='dark'] [class^='MainContainer'],
/* [theme-mode='dark'] [class^='MainContent'], */
[theme-mode='dark'] [class^='AgentCardContainer'] {
  background-color: var(--aero-background-1);
}

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

/* https://github.com/hakadao/CherryStudio-Aero/issues/2 */
/* search result dialog becomes too transparent: https://github.com/hakadao/CherryStudio-Aero/issues/11 */
[theme-mode='light'] [class^='ant-modal'],
[theme-mode='light'] #root[style*='background: var(--color-white)'],
/* https://github.com/hakadao/CherryStudio-Aero/issues/14 */
/* selection assitant panel */
[theme-mode='light'] [class^='WindowFrame'],
/* https://github.com/hakadao/CherryStudio-Aero/

提示：代码过长已自动截断