Skip to content

【已审核】fix(theme): 暗色模式去掉 shadow inset 顶高光修复滑块视觉偏下 #1064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
climashscape wants to merge 1 commit into
base: main
Choose a base branch
from
Open

【已审核】fix(theme): 暗色模式去掉 shadow inset 顶高光修复滑块视觉偏下 #1064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/electron/src/renderer/components/settings/AppearanceSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,7 +440,7 @@ function StyleCard({
{/* 图片卡片本体 */}
<div
className={cn(
'relative rounded-lg overflow-hidden w-[99px] h-[183px] transition-all duration-150',
'relative rounded-lg overflow-hidden w-[99px] h-[183px] transition-[box-shadow,transform] duration-150',
isSelected
? 'ring-2 ring-primary shadow-lg shadow-primary/20'
: 'ring-1 ring-border/50 group-hover:ring-border group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1'
Expand All @@ -453,7 +453,7 @@ function StyleCard({
<img
src={style.image}
alt={style.name}
loading="lazy"
loading="eager"
decoding="async"
className="w-full h-full object-cover"
style={style.objectPosition ? { objectPosition: style.objectPosition } : undefined}
Expand Down
2 changes: 1 addition & 1 deletion apps/electron/src/renderer/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
// 内容容器：吃 --dialog token、xl 圆角、shadow-xl（多层柔阴影 + 暗色 inset 顶高光）；
// 内容容器：吃 --dialog token、xl 圆角、shadow-xl（多层柔阴影，暗色仅外阴影无 inset 高光）；
// hairline 边框（border/50）替代默认实色边；动画时长稍微拉长到 250ms 配合 blur 过渡更自然
"fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4",
"border border-border/50 bg-dialog text-dialog-foreground rounded-xl p-6 shadow-xl duration-200 titlebar-no-drag",
Expand Down
2 changes: 1 addition & 1 deletion apps/electron/src/renderer/components/ui/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
// lg 圆角 + hairline 边框 + shadow-lg（多层柔阴影 + dark inset 高光）
// lg 圆角 + hairline 边框 + shadow-lg（多层柔阴影，暗色仅外阴影无 inset 高光）
"z-[100] w-72 rounded-lg border border-border/50 bg-popover p-4 text-popover-foreground shadow-lg outline-none titlebar-no-drag",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
Expand Down
11 changes: 7 additions & 4 deletions apps/electron/src/renderer/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,14 @@
}

.dark {
/* 暗色阴影去掉 inset 顶高光：原 inset 0 1px 0 hsl(0 0% 100% / N) 在深色滑块/按钮顶部
* 显现成亮线，与向下外阴影叠加导致视觉质心下沉（"偏下"错觉）。去掉后顶部不再发亮，
* 浮起感由外阴影承担，几何居中的滑块视觉上也居中。影响所有 shadow-* 浮起元素。 */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), inset 0 1px 0 0 hsl(0 0% 100% / 0.06);
--shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 4px 0 rgb(0 0 0 / 0.35), inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
--shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.6), 0 6px 12px -2px rgb(0 0 0 / 0.4), inset 0 1px 0 0 hsl(0 0% 100% / 0.10);
--shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.7), 0 16px 32px -8px rgb(0 0 0 / 0.5), inset 0 1px 0 0 hsl(0 0% 100% / 0.12);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
--shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 4px 0 rgb(0 0 0 / 0.35);
--shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.6), 0 6px 12px -2px rgb(0 0 0 / 0.4);
--shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.7), 0 16px 32px -8px rgb(0 0 0 / 0.5);
}

:root {
Expand Down