改版自
/* ======================== 春梅 (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;
}