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

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

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

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

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

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

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

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

@ -7,7 +7,7 @@
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--color-foreground, #1e293b);
color: var(--color-foreground);
transition: all 0.2s ease;
font-size: 18px;
line-height: 1;
@ -17,17 +17,17 @@
top: 1rem;
right: 1rem;
z-index: 1000;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--color-border, #cbd5e1);
background: var(--bg-secondary);
border: 1px solid var(--color-border);
}
.themeToggle:hover {
background: var(--bg-tertiary, #e2e8f0);
background: var(--bg-tertiary);
transform: scale(1.05);
}
.themeToggle:focus {
outline: 2px solid var(--color-foreground, #1e293b);
outline: 2px solid var(--color-foreground);
outline-offset: 2px;
}
@ -37,10 +37,10 @@
/* 暗色主题下的特殊样式 */
:global(.dark-theme) .themeToggle {
background: var(--bg-secondary, #27272a);
border: 1px solid var(--color-border, #52525b);
background: var(--bg-secondary);
border: 1px solid var(--color-border);
}
: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-secondary', '#fafbfc'); // 次要背景 - 极浅灰白
root.style.setProperty('--bg-tertiary', '#f6f8fa'); // 第三背景 - 浅灰白
root.style.setProperty('--bg-quaternary', '#e1e4e8'); // 第四背景 - 浅灰色
root.style.setProperty('--bg-secondary', '#f8fafc'); // 次要背景 - 浅灰白（更深一点）
root.style.setProperty('--bg-tertiary', '#f1f5f9'); // 第三背景 - 中浅灰（更深一点）
root.style.setProperty('--bg-quaternary', '#e2e8f0'); // 第四背景 - 中灰色（更深一点）
// 前景色 - 明亮主题使用深色文字，确保良好对比度
root.style.setProperty('--color-foreground', '#24292f'); // 主前景色 - 深灰（GitHub风格）
root.style.setProperty('--color-foreground-subtle', '#656d76'); // 次要前景色 - 中灰色
root.style.setProperty('--color-foreground-subtler', '#57606a'); // 更次要前景色 - 深灰色
root.style.setProperty('--color-muted', '#8b949e'); // 静音色 - 灰色
root.style.setProperty('--color-border', '#d0d7de'); // 边框色 - 柔和浅灰
root.style.setProperty('--color-foreground', '#1e293b'); // 主前景色 - 深灰蓝（更深一点）
root.style.setProperty('--color-foreground-subtle', '#475569'); // 次要前景色 - 中深灰（更深一点）
root.style.setProperty('--color-foreground-subtler', '#64748b'); // 更次要前景色 - 中灰色（更深一点）
root.style.setProperty('--color-muted', '#94a3b8'); // 静音色 - 中灰（更深一点）
root.style.setProperty('--color-border', '#cbd5e1'); // 边框色 - 中浅灰（更深一点）
// 组件特定背景
root.style.setProperty('--component-bg', '#ffffff'); // 组件背景
root.style.setProperty('--component-hover', '#f3f4f6'); // 组件悬停背景
root.style.setProperty('--component-active', '#e5e7eb'); // 组件激活背景
root.style.setProperty('--modal-bg', '#ffffff'); // 模态框背景
root.style.setProperty('--input-bg', '#ffffff'); // 输入框背景
// 组件特定背景 - 明亮模式下使用浅色系
root.style.setProperty('--component-bg', '#ffffff'); // 组件背景 - 白色
root.style.setProperty('--component-hover', '#f8fafc'); // 组件悬停背景 - 浅灰白
root.style.setProperty('--component-active', '#f1f5f9'); // 组件激活背景 - 中浅灰
root.style.setProperty('--modal-bg', '#ffffff'); // 模态框背景 - 白色
root.style.setProperty('--input-bg', '#ffffff'); // 输入框背景 - 白色
// 直接设置body背景为白色
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);
pointer-events: auto;
cursor: pointer;
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
background-color: var(--bg-secondary);
border: 1px solid var(--color-border);
border-radius: 50%;
transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline: 2px solid var(--color-muted);
outline-offset: 2px;
}
&:hover,
&:focus-visible {
background-color: var(--color-neutral-200);
background-color: var(--bg-tertiary);
}
}