feat: Add theme-aware custom scrollbars

Thin 6px scrollbars using design tokens (--border, --muted-foreground)
so they blend properly in both light and dark mode. Uses standard
scrollbar-width/scrollbar-color plus WebKit pseudo-elements for
cross-browser coverage.
This commit is contained in:
Lukas May
2026-03-04 12:44:54 +01:00
parent cc72c6d478
commit d03b204096

View File

@@ -336,6 +336,38 @@ select:focus-visible {
}
}
/* Custom scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
}
*:hover {
scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: hsl(var(--border));
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(var(--muted-foreground) / 0.5);
}
::-webkit-scrollbar-corner {
background: transparent;
}
@layer base {
* {
@apply border-border;