PNArchives/Memoh
1
0
Fork 0
mirror of https://github.com/memohai/Memoh.git synced 2026-04-27 07:16:19 +09:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): theme-aware custom scrollbar to fix dark-mode contrast

Browse Source 
Default OS scrollbars look out of place in dark mode. Introduce
--scrollbar-thumb / --scrollbar-thumb-hover tokens with translucent
black/white per theme, and apply them globally via scrollbar-color
(Firefox) and ::-webkit-scrollbar rules (WebKit) with a thin rounded
thumb on a transparent track.
This commit is contained in:
Acbox
2026-04-26 15:38:22 +08:00
parent 699ec5b950
commit 6b931d9139
1 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/style.css
+30
View File
@@ -55,6 +55,8 @@
--sidebar-accent-foreground: oklch(0.141 0.005 286.375);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.55 0.22 290);
--scrollbar-thumb: oklch(0 0 0 / 0.18);
--scrollbar-thumb-hover: oklch(0 0 0 / 0.32);
}
.dark {
@@ -90,6 +92,8 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.62 0.22 290);
--scrollbar-thumb: oklch(1 0 0 / 0.14);
--scrollbar-thumb-hover: oklch(1 0 0 / 0.26);
}
@theme inline {
@@ -138,6 +142,32 @@
body {
@apply bg-background text-foreground;
}
* {
scrollbar-color: var(--scrollbar-thumb) transparent;
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border: 2px solid transparent;
border-radius: 9999px;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover);
}
}