Skip to content

Improve: fix white scrollbar issue in Tauri dark theme #234

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

Merged
merged 1 commit into from
Jul 28, 2025
Merged

Improve: fix white scrollbar issue in Tauri dark theme #234

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
3 changes: 3 additions & 0 deletions bun.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"tailwind-merge": "^2.6.0",
"tailwindcss": "^4.1.8",
"zod": "^3.24.1",
"zustand": "^5.0.6",
},
"devDependencies": {
"@tauri-apps/cli": "^2",
Expand Down Expand Up @@ -1021,6 +1022,8 @@

"zod": ["zod@3.25.67", "", {}, "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw=="],

"zustand": ["zustand@5.0.6", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A=="],

"zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],

"@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>Claudia - Claude Code Session Browser</title>
</head>

Expand Down
2 changes: 1 addition & 1 deletion src/components/ClaudeCodeSession.refactored.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
/>

{/* Main content area */}
<div className="flex-1 flex overflow-hidden">
<div className="flex-1 flex">
{showPreview ? (
<SplitPane
left={
Expand Down
11 changes: 1 addition & 10 deletions src/components/ui/scroll-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,7 @@ export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
return (
<div
ref={ref}
className={cn(
"relative overflow-auto",
// Custom scrollbar styling
"scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
"[&::-webkit-scrollbar]:w-2",
"[&::-webkit-scrollbar-track]:bg-transparent",
"[&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:rounded-full",
"[&::-webkit-scrollbar-thumb:hover]:bg-border/80",
className
)}
className={cn("relative overflow-auto", className)}
{...props}
>
{children}
Expand Down
108 changes: 27 additions & 81 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@
border-color: var(--color-border);
}

html {
color-scheme: dark;
}

body {
background-color: var(--color-background);
color: var(--color-foreground);
Expand Down Expand Up @@ -556,115 +560,57 @@ button:focus-visible,
z-index: 1;
}

/* --- THEME-MATCHING SCROLLBARS --- */
/* --- ELEGANT SCROLLBARS --- */

/* For Firefox */
/* Firefox - thin and minimal */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-muted-foreground) var(--color-background);
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

/* For Webkit Browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
width: 12px;
height: 12px;
/* Global webkit scrollbar - ultra thin and elegant */
::-webkit-scrollbar {
width: 3px;
height: 3px;
}

*::-webkit-scrollbar-track {
background: var(--color-background);
::-webkit-scrollbar-track {
background: transparent;
}

*::-webkit-scrollbar-thumb {
background-color: var(--color-muted);
border-radius: 6px;
border: 3px solid var(--color-background);
::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 2px;
transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-muted-foreground);
::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.6);
}

*::-webkit-scrollbar-corner {
::-webkit-scrollbar-corner {
background: transparent;
}

/* Code blocks and editors specific scrollbar */
/* Code blocks - slightly larger for better usability */
pre::-webkit-scrollbar,
.w-md-editor-content::-webkit-scrollbar,
code::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
code::-webkit-scrollbar {
width: 8px;
height: 8px;
}

pre::-webkit-scrollbar-thumb,
.w-md-editor-content::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
background-color: rgba(107, 114, 128, 0.2);
code::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.4);
border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover,
.w-md-editor-content::-webkit-scrollbar-thumb:hover,
code::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.4);
}

/* Syntax highlighter specific */
.bg-zinc-950 ::-webkit-scrollbar {
width: 8px;
height: 8px;
}

.bg-zinc-950 ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}

.bg-zinc-950 ::-webkit-scrollbar-thumb {
background-color: rgba(107, 114, 128, 0.3);
border-radius: 4px;
}

.bg-zinc-950 ::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.5);
}

/* Code preview specific scrollbar */
.code-preview-scroll::-webkit-scrollbar {
width: 12px;
height: 12px;
}

.code-preview-scroll::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}

.code-preview-scroll::-webkit-scrollbar-thumb {
background-color: rgba(107, 114, 128, 0.4);
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
}

.code-preview-scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.6);
}

.code-preview-scroll::-webkit-scrollbar-thumb:active {
background-color: rgba(107, 114, 128, 0.8);
}

.code-preview-scroll::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}

/* Firefox scrollbar for code preview */
.code-preview-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(107, 114, 128, 0.4) rgba(0, 0, 0, 0.2);
code::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.6);
}

/* NFO Credits Scanlines Animation */
Expand Down