https://github.com/hakadao/cherrystudio-aero
Give your Cherry Studio a modern, Aero theme | 給你的 CherryStudio 一個現代和 Aero 主題
https://github.com/hakadao/cherrystudio-aero
aero cherry-studio glassmorphism theme
Last synced: about 1 month ago
JSON representation
Give your Cherry Studio a modern, Aero theme | 給你的 CherryStudio 一個現代和 Aero 主題
- Host: GitHub
- URL: https://github.com/hakadao/cherrystudio-aero
- Owner: hakadao
- License: agpl-3.0
- Created: 2025-03-23T08:30:17.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-23T13:07:29.000Z (2 months ago)
- Last Synced: 2025-03-23T14:21:48.324Z (2 months ago)
- Topics: aero, cherry-studio, glassmorphism, theme
- Homepage:
- Size: 28.3 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CherryStudio-Aero
English | [简体中文](README-cmn_CN.md) | [繁體中文](README-cmn_TW.md) | [廣東話](README-jyut.md)
> [Aero: **A**uthentic, **E**nergetic, **R**eflective and **O**pen](https://en.wikipedia.org/wiki/Windows_Aero)
Give your [Cherry Studio](https://github.com/CherryHQ/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
```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);
}
```