cherry studio主题 星空 (浅深都有) 加了一个类似的新版本

改版自

/*  ======================== 春梅 (Chun-mei) ======================== Theme inspired by plum blossoms in early spring, featuring delicate pink tones that capture the first blooms against winter snow. The colors reflect both the subtle and vibrant hues of plum blossoms, a symbol of resilience in Chinese art. */  /* Root variables */ :root {     --color-white-soft: #FFF8F8;     --color-black-soft: #8C4356;  /* Deep plum red */      /* Primary color (accent color) and variants */     --color-primary: #E4707C;     /* Plum blossom pink */     --color-primary-soft: rgba(228, 112, 124, 0.6);     --color-primary-mute: rgba(228, 112, 124, 0.2); }  /* Dark mode */ body[theme-mode="dark"] {     --color-background: #8C4356;       /* Deep plum */     --color-background-mute: #94505F;  /* Rich plum */     --color-background-soft: #B4657A;  /* Medium plum */      --navbar-background-mac: rgba(140, 67, 86, 0.85);     --navbar-background: #8C4356;     --chat-background: #8C4356;     --chat-background-user: #A25768;     --chat-background-assistant: #763848;      --chat-text-user: #FFE6EC;     --color-text: #FFE6EC;      --color-hover: #B4657A;     --color-active: #C67688;      --color-border: rgba(255, 230, 236, 0.15);     --color-border-soft: rgba(255, 230, 236, 0.08); }  /* Light mode */ body[theme-mode="light"] {     --color-background: #FFEEF2;       /* Soft plum white */     --color-background-mute: #FFDEE6;  /* Light plum */     --color-background-soft: #FFE6EC;  /* Medium light plum */      --navbar-background: #FFF1F5;     --chat-background: #FFF6F9;     --chat-background-user: #FFEEF2;     --chat-background-assistant: #FFE6EC;      --color-text: #8C4356;      --color-hover: #FFE8EA;     --color-active: #FFDEE2;      --color-border: rgba(140, 67, 86, 0.12);     --color-border-soft: rgba(140, 67, 86, 0.06);      --color-white: #FFF6F9; }  /* Bug fixes */ .bubble .message-user .message-action-button:hover {   background-color: var(--color-background-mute); }

效果



/*
========================
星空 (Xing Kong)
========================
主题灵感来源于浩瀚神秘的星空,现在加入了微妙的渐变以增强深度感和氛围。
它使用深邃的蓝色和黑色作为宇宙背景,点缀着闪耀的金色和白色代表遥远的恒星和星系。
这些颜色唤起一种奇妙和无限空间的感觉。
*/

/* 根变量 */
:root {
    --color-white-soft: #FAFAD2;  /* 柔和的星光黄色 */
    --color-black-soft: #0A141E;  /* 深邃的太空黑蓝色 */

    /* 主色 (强调色) 及变体 - 星星/强调元素 */
    --color-primary: #FFD700;     /* 金色 (明亮的星星) */
    --color-primary-soft: rgba(255, 215, 0, 0.6);
    --color-primary-mute: rgba(255, 215, 0, 0.2);
}

/* 暗色模式 - 带有渐变的深邃夜空 */
body[theme-mode="dark"] {
    /* 主体背景渐变 */
    background: linear-gradient(to bottom, #0A141E 0%, #1A2B3C 100%); /* 从深邃太空到暗宇宙蓝的渐变 */
    /* 保留变量供可能将其用作备用或基础的元素使用 */
    --color-background: #0A141E;       /* 最深邃的太空 */

    --color-background-mute: #1A2B3C;  /* 暗宇宙蓝 (用于上层元素) */
    --color-background-soft: #2C3E50;  /* 中等暗蓝灰色 (用于上层元素) */

    --navbar-background-mac: rgba(10, 20, 30, 0.85); /* 半透明深蓝色 */
    --navbar-background: #0A141E;      /* 纯色深邃太空 */
    --chat-background: #0A141E;        /* 聊天区域背景 (可以是纯色或有自己的渐变) */
    --chat-background-user: #1A2B3C;   /* 用户气泡背景 */
    --chat-background-assistant: #2C3E50; /* 助手气泡背景 */

    --chat-text-user: #FAFAD2;         /* 用户文本 (柔和的星光黄色) */
    --color-text: #E0E0E0;             /* 通用文本 (浅灰色,用于提高可见性) */

    --color-hover: #2C3E50;            /* 悬停状态背景 */
    --color-active: #34495E;           /* 激活状态背景 */

    --color-border: rgba(224, 224, 224, 0.15); /* 微妙的星光边框 */
    --color-border-soft: rgba(224, 224, 224, 0.08); /* 更柔和的星光边框 */
}

/* 亮色模式 - 带有渐变的黎明/黄昏天空 */
body[theme-mode="light"] {
     /* 主体背景渐变 */
    background: linear-gradient(to bottom, #E0F2F7 0%, #B3E5FC 100%); /* 从极浅天蓝色到浅蓝色的渐变 */
    /* 保留变量供可能将其用作备用或基础的元素使用 */
    --color-background: #E0F2F7;       /* 极浅天蓝色 */

    --color-background-mute: #B3E5FC;  /* 浅蓝色 (用于上层元素) */
    --color-background-soft: #81D4FA;  /* 中等浅蓝色 (用于上层元素) */

    --navbar-background: #E0F2F7;      /* 导航栏背景 */
    --chat-background: #E0F2F7;        /* 聊天区域背景 */
    --chat-background-user: #B3E5FC;   /* 用户气泡背景 */
    --chat-background-assistant: #81D4FA; /* 助手气泡背景 */

    --color-text: #0A141E;             /* 深色文本 (深邃的太空黑蓝色) */

    --color-hover: #B3E5FC;            /* 悬停状态背景 */
    --color-active: #81D4FA;           /* 激活状态背景 */

    --color-border: rgba(10, 20, 30, 0.12); /* 微妙的深色边框 */
    --color-border-soft: rgba(10, 20, 30, 0.06); /* 更柔和的深色边框 */

    --color-white: #E0F2F7;            /* 白色等效 */
}

/* Bug 修复 */
.bubble .message-user .message-action-button:hover {
  background-color: var(--color-background-mute);
}

/*
========================
星空主题 (Cosmic Sky)
========================
灵感来源于浩瀚神秘的宇宙,深邃星空与璀璨星辰的完美结合。
深色模式采用深蓝黑渐变背景,象征无尽宇宙,点缀金色和蓝紫色光点代表遥远星系。
浅色模式则呈现黎明天际线的柔和蓝紫色渐变,如同宇宙中最壮丽的星云。
*/

/* 根变量 */
:root {
    --color-white-soft: #E6E7FF;  /* 柔和的星光白 */
    --color-black-soft: #0A0E1B;  /* 深邃的太空黑蓝色 */

    /* 主色 (强调色) 及变体 - 星星/强调元素 */
    --color-primary: #7B68EE;     /* 鲜亮的星蓝色 */
    --color-primary-soft: rgba(123, 104, 238, 0.6);
    --color-primary-mute: rgba(123, 104, 238, 0.2);
    
    /* 辅助色彩 - 用于特殊元素 */
    --color-accent-1: #FF5E85;    /* 星云红 */
    --color-accent-2: #00BFFF;    /* 星际蓝 */
    --color-accent-gold: #FFD700; /* 星光金 */
    
    /* 开关颜色 */
    --switch-active: #7B68EE;     /* 开关激活状态为星蓝色 */
}

/* 暗色模式 - 深邃星空 */
body[theme-mode="dark"] {
    /* 主体背景渐变 */
    background: linear-gradient(135deg, #0A0E1B 0%, #1A1F35 50%, #232B4A 100%); /* 深空到星际蓝的渐变 */
    --color-background: #0A0E1B;        /* 深邃太空底色 */

    --color-background-mute: #1A1F35;   /* 暗宇宙蓝 (用于卡片和面板) */
    --color-background-soft: #232B4A;   /* 中等暗蓝 (用于悬停状态) */

    --navbar-background-mac: rgba(10, 14, 27, 0.85); /* 半透明深蓝色 */
    --navbar-background: #0A0E1B;       /* 纯色深邃太空 */
    --chat-background: rgba(10, 14, 27, 0.7);  /* 聊天区域背景 (半透明) */
    --chat-background-user: rgba(26, 31, 53, 0.8);   /* 用户气泡背景 */
    --chat-background-assistant: rgba(35, 43, 74, 0.8); /* 助手气泡背景 */

    --chat-text-user: #E6E7FF;          /* 用户文本 (柔和的星光白) */
    --color-text: #E0E6FF;              /* 通用文本 (柔和的浅蓝白) */
    --color-text-soft: #B0B7DB;         /* 次要文本 (淡蓝灰色) */

    --color-hover: rgba(123, 104, 238, 0.15);  /* 悬停状态背景 */
    --color-active: rgba(123, 104, 238, 0.25); /* 激活状态背景 */

    --color-border: rgba(224, 230, 255, 0.15); /* 微妙的星光边框 */
    --color-border-soft: rgba(224, 230, 255, 0.08); /* 更柔和的星光边框 */
    
    /* 侧边栏选中项 */
    --sidebar-active: #232B4A;
    --sidebar-active-border: #7B68EE;
}

/* 亮色模式 - 星云天空 */
body[theme-mode="light"] {
    /* 主体背景渐变 */
    background: linear-gradient(135deg, #E5E9FF 0%, #D1DEFF 50%, #C0D6FF 100%); /* 浅蓝紫渐变背景 */
    --color-background: #E5E9FF;       /* 浅星云色 */

    --color-background-mute: #D1DEFF;  /* 淡蓝色 (用于卡片和面板) */
    --color-background-soft: #C0D6FF;  /* 中等淡蓝色 (用于悬停状态) */

    --navbar-background-mac: rgba(229, 233, 255, 0.85); /* 半透明浅蓝色 */
    --navbar-background: #E5E9FF;      /* 导航栏背景 */
    --chat-background: rgba(229, 233, 255, 0.7);  /* 聊天区域背景 (半透明) */
    --chat-background-user: rgba(209, 222, 255, 0.8);   /* 用户气泡背景 */
    --chat-background-assistant: rgba(192, 214, 255, 0.8); /* 助手气泡背景 */

    --color-text: #2A2F4E;             /* 深色文本 (深邃的星际蓝) */
    --color-text-soft: #4A5385;        /* 次要文本 (中等深蓝) */

    --color-hover: rgba(123, 104, 238, 0.1);  /* 悬停状态背景 */
    --color-active: rgba(123, 104, 238, 0.2); /* 激活状态背景 */

    --color-border: rgba(42, 47, 78, 0.12); /* 微妙的深色边框 */
    --color-border-soft: rgba(42, 47, 78, 0.06); /* 更柔和的深色边框 */

    --color-white: #FFFFFF;            /* 纯白色 */
    
    /* 侧边栏选中项 */
    --sidebar-active: #C0D6FF;
    --sidebar-active-border: #7B68EE;
}

/* 特殊元素样式 */
.toggle-switch-active {
    background-color: var(--switch-active) !important;
    border-color: var(--switch-active) !important;
}

/* 红蓝文本标题样式 */
.title-accent-red {
    color: var(--color-accent-1);
    font-weight: 600;
    text-shadow: 0 0 5px rgba(255, 94, 133, 0.3);
}

.title-accent-blue {
    color: var(--color-accent-2);
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.3);
}

/* 侧边栏活跃项样式 */
.sidebar-item.active {
    background-color: var(--sidebar-active);
    border-left: 3px solid var(--sidebar-active-border);
}

/* 按钮样式美化 */
button.primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-2) 100%);
    border: none;
    box-shadow: 0 2px 10px rgba(123, 104, 238, 0.3);
    transition: all 0.3s ease;
}

button.primary:hover {
    box-shadow: 0 4px 15px rgba(123, 104, 238, 0.5);
    transform: translateY(-1px);
}

/* 卡片容器样式 */
.card, .panel {
    background-color: var(--color-background-mute);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(10, 14, 27, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
}

/* Bug 修复 */
.bubble .message-user .message-action-button:hover {
    background-color: var(--color-hover);
}

/* 边栏图标的星空效果 */
.sidebar-icon {
    position: relative;
}

.sidebar-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-icon:hover::after {
    opacity: 0.3;
}

32 Likes

感谢佬友分享!

3 Likes

好看好看,拿下!

2 Likes

感谢分享,刚好在用

2 Likes

深色好看 浅色有种umm… 的感觉

2 Likes

很难说吗
愿闻其详 :melting_face:
我计划等会儿把绿色改一改

有种我刚学css的时候的感觉喵()感觉青色不太适合 可能我个人观点
以及佬的代码块坏了喵

1 Like

我看了一下 坏哪了 不太懂 :face_holding_back_tears:


是我这的问题? 挤一行了

1 Like

现在它也是我的了

1 Like

感谢佬友分享!

1 Like

这个确实挤一行了不过应该没什么太大的问题吧 :upside_down_face:
另外也是更新了 不过绿色… 还是没有更新
(我为什么会奇奇怪怪找不到在哪里是绿色啊)

我又看了一眼 问题应该出在复制粘贴莫名其妙的换行全部没了 变成了一个空格

那里的绿色? 我咋没看到绿色()

1 Like

左下角的绿色齿轮设置按钮

有些黑感觉

1 Like

原来还能这么玩,学习了

1 Like

佬哥试试莫兰迪配色,哈哈哈,ai改改

1 Like
/*
========================
莫兰迪静谧 (Morandi Serenity)
========================
灵感来源于乔治·莫兰迪的画作,采用低饱和度、柔和、灰调的色彩,营造平静、和谐、优雅的氛围。
深色模式采用深邃的灰蓝或灰绿色调,如同黄昏时分宁静的天空。
浅色模式则呈现柔和的米白、浅灰或淡雅的灰粉色调,如同清晨薄雾笼罩的风景。
*/

/* 根变量 */
:root {
    /* 柔和的莫兰迪色基础 */
    --color-morandi-light-base: #EAE7E4; /* 柔和的米白/浅灰 */
    --color-morandi-dark-base: #3D4A4E;  /* 深邃的灰蓝绿 */

    /* 主色 (强调色) 及变体 - 柔和的强调元素 */
    --color-primary: #A0B9BA;     /* 莫兰迪蓝绿 */
    --color-primary-soft: rgba(160, 185, 186, 0.6);
    --color-primary-mute: rgba(160, 185, 186, 0.2);
    
    /* 辅助色彩 - 用于特殊元素,同样低饱和度 */
    --color-accent-1: #C2A3A3;    /* 莫兰迪灰粉/灰红 */
    --color-accent-2: #AABBC3;    /* 莫兰迪灰蓝 */
    --color-accent-gold: #C0B283; /* 莫兰迪暖灰/浅棕 */
    
    /* 开关颜色 */
    --switch-active: #A0B9BA;     /* 开关激活状态为莫兰迪蓝绿 */
}

/* 暗色模式 - 深邃莫兰迪 */
body[theme-mode="dark"] {
    /* 主体背景渐变 (使用深色莫兰迪调色) */
    background: linear-gradient(135deg, #3D4A4E 0%, #4B5C61 50%, #5A6D72 100%); /* 深灰蓝绿渐变 */
    --color-background: #3D4A4E;        /* 深邃莫兰迪底色 */

    --color-background-mute: #4B5C61;   /* 稍浅的深莫兰迪 (用于卡片和面板) */
    --color-background-soft: #5A6D72;   /* 中等深莫兰迪 (用于悬停状态) */

    --navbar-background-mac: rgba(61, 74, 78, 0.85); /* 半透明深莫兰迪 */
    --navbar-background: #3D4A4E;       /* 纯色深邃莫兰迪 */
    --chat-background: rgba(61, 74, 78, 0.7);  /* 聊天区域背景 (半透明) */
    --chat-background-user: rgba(75, 92, 97, 0.8);   /* 用户气泡背景 */
    --chat-background-assistant: rgba(90, 109, 114, 0.8); /* 助手气泡背景 */

    --chat-text-user: #C9D3D6;          /* 用户文本 (柔和的浅灰蓝) */
    --color-text: #C9D3D6;              /* 通用文本 (柔和的浅灰蓝) */
    --color-text-soft: #AABBC3;         /* 次要文本 (莫兰迪灰蓝) */

    --color-hover: rgba(160, 185, 186, 0.15);  /* 悬停状态背景 (使用主色低透明度) */
    --color-active: rgba(160, 185, 186, 0.25); /* 激活状态背景 (使用主色低透明度) */

    --color-border: rgba(201, 211, 214, 0.15); /* 微妙的浅色边框 */
    --color-border-soft: rgba(201, 211, 214, 0.08); /* 更柔和的浅色边框 */
    
    /* 侧边栏选中项 */
    --sidebar-active: #5A6D72; /* 中等深莫兰迪 */
    --sidebar-active-border: #A0B9BA; /* 莫兰迪蓝绿强调 */
}

/* 亮色模式 - 柔和莫兰迪 */
body[theme-mode="light"] {
    /* 主体背景渐变 (使用浅色莫兰迪调色) */
    background: linear-gradient(135deg, #EAE7E4 0%, #DEDBD7 50%, #D5D2CE 100%); /* 柔和米白/浅灰渐变 */
    --color-background: #EAE7E4;       /* 柔和莫兰迪底色 */

    --color-background-mute: #DEDBD7;  /* 稍深的浅莫兰迪 (用于卡片和面板) */
    --color-background-soft: #D5D2CE;  /* 中等浅莫兰迪 (用于悬停状态) */

    --navbar-background-mac: rgba(234, 231, 228, 0.85); /* 半透明柔和莫兰迪 */
    --navbar-background: #EAE7E4;      /* 导航栏背景 */
    --chat-background: rgba(234, 231, 228, 0.7);  /* 聊天区域背景 (半透明) */
    --chat-background-user: rgba(222, 219, 215, 0.8);   /* 用户气泡背景 */
    --chat-background-assistant: rgba(213, 210, 206, 0.8); /* 助手气泡背景 */

    --color-text: #5A6D72;             /* 深色文本 (深莫兰迪灰蓝绿) */
    --color-text-soft: #7A8B8F;        /* 次要文本 (中等深莫兰迪) */

    --color-hover: rgba(160, 185, 186, 0.1);  /* 悬停状态背景 (使用主色低透明度) */
    --color-active: rgba(160, 185, 186, 0.2); /* 激活状态背景 (使用主色低透明度) */

    --color-border: rgba(90, 109, 114, 0.12); /* 微妙的深色边框 */
    --color-border-soft: rgba(90, 109, 114, 0.06); /* 更柔和的深色边框 */

    --color-white: #FFFFFF;            /* 纯白色 (保留,但尽量少用,或调整为非常浅的莫兰迪色) */
    
    /* 侧边栏选中项 */
    --sidebar-active: #D5D2CE; /* 中等浅莫兰迪 */
    --sidebar-active-border: #A0B9BA; /* 莫兰迪蓝绿强调 */
}

/* 特殊元素样式 */
.toggle-switch-active {
    background-color: var(--switch-active) !important;
    border-color: var(--switch-active) !important;
}

/* 红蓝文本标题样式 (调整为莫兰迪辅助色) */
.title-accent-red {
    color: var(--color-accent-1); /* 莫兰迪灰粉 */
    font-weight: 600;
    /* 移除 text-shadow 以符合莫兰迪的柔和感 */
    /* text-shadow: 0 0 5px rgba(255, 94, 133, 0.3); */
}

.title-accent-blue {
    color: var(--color-accent-2); /* 莫兰迪灰蓝 */
    font-weight: 600;
    /* 移除 text-shadow */
    /* text-shadow: 0 0 5px rgba(0, 191, 255, 0.3); */
}

/* 侧边栏活跃项样式 */
.sidebar-item.active {
    background-color: var(--sidebar-active);
    border-left: 3px solid var(--sidebar-active-border);
}

/* 按钮样式美化 (使用莫兰迪色渐变) */
button.primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-2) 100%); /* 莫兰迪蓝绿到灰蓝渐变 */
    border: none;
    /* 调整阴影颜色为深色背景的低透明度版本,更柔和 */
    box-shadow: 0 2px 10px rgba(61, 74, 78, 0.15); 
    transition: all 0.3s ease;
}

button.primary:hover {
     /* 调整阴影颜色 */
    box-shadow: 0 4px 15px rgba(61, 74, 78, 0.25);
    transform: translateY(-1px);
}

/* 卡片容器样式 */
.card, .panel {
    background-color: var(--color-background-mute);
    border-radius: 12px;
    /* 调整阴影颜色为深色背景的低透明度版本 */
    box-shadow: 0 4px 20px rgba(61, 74, 78, 0.1);
    /* backdrop-filter: blur(10px); /* 保留或根据需要调整模糊度 */
    border: 1px solid var(--color-border);
}

/* Bug 修复 (保留,使用新的悬停颜色) */
.bubble .message-user .message-action-button:hover {
    background-color: var(--color-hover);
}

/* 边栏图标的星空效果 (移除,不符合莫兰迪的静谧感) */
/*
.sidebar-icon {
    position: relative;
}

.sidebar-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-icon:hover::after {
    opacity: 0.3;
}
*/

不好看 :tieba_087:

还是你的这个好看。无出其右。
:tieba_088:

1 Like

感谢分享~

1 Like