hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 09:24:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: 统一明亮主题样式并优化视觉体验

Browse source 
- 修复明亮模式下的组件背景色问题，移除黑色背景
- 统一所有按钮和组件的灰色调，提升视觉一致性
- 加深灰色对比度，提高可读性和用户体验
- 优化声音组件、分类图标、删除按钮等样式
- 统一播放按钮、菜单按钮、滚动到顶部按钮风格
- 改进主题切换系统的CSS变量使用
- 新增数据库目录用于SQLite数据存储
This commit is contained in:
zl 2025-11-17 15:56:02 +08:00
parent 2ad6cbe36c
commit 27bf07e39f
8 changed files with 47 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
data/users.db Normal file
View file

Binary file not shown.

10
src/components/buttons/play/play.module.css
View file

@ -7,15 +7,15 @@
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: var(--font-base); font-size: var(--font-base);
line-height: 0; line-height: 0;
color: var(--color-neutral-200); color: var(--color-foreground);
cursor: pointer; cursor: pointer;
background-color: var(--color-neutral-950); background-color: var(--bg-secondary);
border: 1px solid var(--color-neutral-50); border: 1px solid var(--color-border);
border-radius: 100px; border-radius: 100px;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
background-color: var(--color-neutral-800); background-color: var(--bg-tertiary);
} }
&:not(.disabled):active { &:not(.disabled):active {
@ -32,7 +32,7 @@
} }
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-neutral-400); outline: 2px solid var(--color-muted);
outline-offset: 2px; outline-offset: 2px;
} }
} }

12
src/components/buttons/unselect/unselect.module.css
View file

@ -9,8 +9,8 @@
line-height: 0; line-height: 0;
color: var(--color-foreground); color: var(--color-foreground);
cursor: pointer; cursor: pointer;
background-color: var(--color-neutral-100); background-color: var(--bg-secondary);
border: 1px solid var(--color-neutral-300); border: 1px solid var(--color-border);
border-radius: 100px; border-radius: 100px;
transition: 0.2s; transition: 0.2s;
@ -25,11 +25,11 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
background-color: var(--color-neutral-200); background-color: var(--bg-tertiary);
} }
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-neutral-400); outline: 2px solid var(--color-muted);
outline-offset: 2px; outline-offset: 2px;
} }
} }
@ -37,7 +37,7 @@
.tooltip { .tooltip {
padding: 6px 12px; padding: 6px 12px;
font-size: var(--font-xsm); font-size: var(--font-xsm);
background-color: var(--color-neutral-100); background-color: var(--bg-secondary);
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-border);
border-radius: 100px; border-radius: 100px;
} }

8
src/components/categories/category/category.module.css
View file

@ -12,7 +12,7 @@
& .tail { & .tail {
width: 1px; width: 1px;
height: 75px; height: 75px;
background: linear-gradient(transparent, var(--color-neutral-300)); background: linear-gradient(transparent, var(--color-muted));
} }
& .icon { & .icon {
@ -23,10 +23,10 @@
height: 45px; height: 45px;
font-size: var(--font-md); font-size: var(--font-md);
background: linear-gradient( background: linear-gradient(
var(--color-neutral-50), var(--bg-secondary),
var(--color-neutral-100) var(--bg-tertiary)
); );
border: 1px solid var(--color-neutral-300); border: 1px solid var(--color-border);
border-radius: 50%; border-radius: 50%;
} }
} }

12
src/components/sounds/sounds.module.css
View file

@ -17,18 +17,18 @@
font-size: var(--font-xsm); font-size: var(--font-xsm);
color: var(--color-neutral-subtle); color: var(--color-neutral-subtle);
cursor: pointer; cursor: pointer;
background-color: var(--color-neutral-50); background-color: var(--bg-secondary);
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-border);
border-radius: 50px; border-radius: 50px;
transition: 0.2s; transition: 0.2s;
&:hover, &:hover,
&:focus-visible { &:focus-visible {
background-color: var(--color-neutral-100); background-color: var(--bg-tertiary);
} }
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-neutral-400); outline: 2px solid var(--color-muted);
outline-offset: 2px; outline-offset: 2px;
} }
@ -42,7 +42,7 @@
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
transparent, transparent,
var(--color-neutral-300), var(--color-muted),
transparent transparent
); );
transform: translateX(-50%); transform: translateX(-50%);
@ -55,7 +55,7 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
content: ''; content: '';
background-color: var(--color-neutral-950); background-color: var(--color-foreground);
border-radius: 50%; border-radius: 50%;
} }
} }

16
src/components/theme-toggle/theme-toggle.module.css
View file

@ -7,7 +7,7 @@
border: none; border: none;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
color: var(--color-foreground, #1e293b); color: var(--color-foreground);
transition: all 0.2s ease; transition: all 0.2s ease;
font-size: 18px; font-size: 18px;
line-height: 1; line-height: 1;
@ -17,17 +17,17 @@
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
z-index: 1000; z-index: 1000;
background: var(--bg-secondary, #f8fafc); background: var(--bg-secondary);
border: 1px solid var(--color-border, #cbd5e1); border: 1px solid var(--color-border);
} }
.themeToggle:hover { .themeToggle:hover {
background: var(--bg-tertiary, #e2e8f0); background: var(--bg-tertiary);
transform: scale(1.05); transform: scale(1.05);
} }
.themeToggle:focus { .themeToggle:focus {
outline: 2px solid var(--color-foreground, #1e293b); outline: 2px solid var(--color-foreground);
outline-offset: 2px; outline-offset: 2px;
} }
@ -37,10 +37,10 @@
/* 暗色主题下的特殊样式 */ /* 暗色主题下的特殊样式 */
:global(.dark-theme) .themeToggle { :global(.dark-theme) .themeToggle {
background: var(--bg-secondary, #27272a); background: var(--bg-secondary);
border: 1px solid var(--color-border, #52525b); border: 1px solid var(--color-border);
} }
:global(.dark-theme) .themeToggle:hover { :global(.dark-theme) .themeToggle:hover {
background: var(--bg-tertiary, #3f3f46); background: var(--bg-tertiary);
} }

28
src/components/theme-toggle/theme-toggle.tsx
View file

@ -52,23 +52,23 @@ export function ThemeToggle() {
// 明亮主题 - 参考现代简洁设计，更干净的白色系 // 明亮主题 - 参考现代简洁设计，更干净的白色系
root.style.setProperty('--bg-primary', '#ffffff'); // 主背景 - 纯白色 root.style.setProperty('--bg-primary', '#ffffff'); // 主背景 - 纯白色
root.style.setProperty('--bg-secondary', '#fafbfc'); // 次要背景 - 极浅灰白 root.style.setProperty('--bg-secondary', '#f8fafc'); // 次要背景 - 浅灰白（更深一点）
root.style.setProperty('--bg-tertiary', '#f6f8fa'); // 第三背景 - 浅灰白 root.style.setProperty('--bg-tertiary', '#f1f5f9'); // 第三背景 - 中浅灰（更深一点）
root.style.setProperty('--bg-quaternary', '#e1e4e8'); // 第四背景 - 浅灰色 root.style.setProperty('--bg-quaternary', '#e2e8f0'); // 第四背景 - 中灰色（更深一点）
// 前景色 - 明亮主题使用深色文字，确保良好对比度 // 前景色 - 明亮主题使用深色文字，确保良好对比度
root.style.setProperty('--color-foreground', '#24292f'); // 主前景色 - 深灰（GitHub风格） root.style.setProperty('--color-foreground', '#1e293b'); // 主前景色 - 深灰蓝（更深一点）
root.style.setProperty('--color-foreground-subtle', '#656d76'); // 次要前景色 - 中灰色 root.style.setProperty('--color-foreground-subtle', '#475569'); // 次要前景色 - 中深灰（更深一点）
root.style.setProperty('--color-foreground-subtler', '#57606a'); // 更次要前景色 - 深灰色 root.style.setProperty('--color-foreground-subtler', '#64748b'); // 更次要前景色 - 中灰色（更深一点）
root.style.setProperty('--color-muted', '#8b949e'); // 静音色 - 灰色 root.style.setProperty('--color-muted', '#94a3b8'); // 静音色 - 中灰（更深一点）
root.style.setProperty('--color-border', '#d0d7de'); // 边框色 - 柔和浅灰 root.style.setProperty('--color-border', '#cbd5e1'); // 边框色 - 中浅灰（更深一点）
// 组件特定背景 // 组件特定背景 - 明亮模式下使用浅色系
root.style.setProperty('--component-bg', '#ffffff'); // 组件背景 root.style.setProperty('--component-bg', '#ffffff'); // 组件背景 - 白色
root.style.setProperty('--component-hover', '#f3f4f6'); // 组件悬停背景 root.style.setProperty('--component-hover', '#f8fafc'); // 组件悬停背景 - 浅灰白
root.style.setProperty('--component-active', '#e5e7eb'); // 组件激活背景 root.style.setProperty('--component-active', '#f1f5f9'); // 组件激活背景 - 中浅灰
root.style.setProperty('--modal-bg', '#ffffff'); // 模态框背景 root.style.setProperty('--modal-bg', '#ffffff'); // 模态框背景 - 白色
root.style.setProperty('--input-bg', '#ffffff'); // 输入框背景 root.style.setProperty('--input-bg', '#ffffff'); // 输入框背景 - 白色
// 直接设置body背景为白色 // 直接设置body背景为白色
body.style.backgroundColor = '#ffffff'; body.style.backgroundColor = '#ffffff';

8
src/components/toolbar/scroll-to-top/scroll-to-top.module.css
View file

@ -8,18 +8,18 @@
color: var(--color-foreground); color: var(--color-foreground);
pointer-events: auto; pointer-events: auto;
cursor: pointer; cursor: pointer;
background-color: var(--color-neutral-100); background-color: var(--bg-secondary);
border: 1px solid var(--color-neutral-300); border: 1px solid var(--color-border);
border-radius: 50%; border-radius: 50%;
transition: 0.2s; transition: 0.2s;
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-neutral-400); outline: 2px solid var(--color-muted);
outline-offset: 2px; outline-offset: 2px;
} }
&:hover, &:hover,
&:focus-visible { &:focus-visible {
background-color: var(--color-neutral-200); background-color: var(--bg-tertiary);
} }
} }