engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve dark mode scrollbar styling for Chrome

Browse source 
Add custom scrollbar styles that properly match dark and light themes:
- Webkit browsers: styled scrollbars with theme-appropriate colors
- Firefox: thin scrollbars with matching color scheme
- Dark mode: darker gray scrollbars that blend with the UI
- Light mode: light gray scrollbars for better visibility
This commit is contained in:
Claude 2025-11-08 18:07:46 +00:00
parent ed63672e66
commit 0ecf6f9bca
No known key found for this signature in database
1 changed files with 46 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
templates/base.html
View file

@ -609,6 +609,52 @@
}
}
/* Scrollbar styling for webkit browsers (Chrome, Safari, Edge) */
/* Light mode scrollbars */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 6px;
border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Dark mode scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #4a4a4a;
border: 2px solid var(--bg-secondary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #5a5a5a;
}
/* Scrollbar styling for Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 var(--bg-secondary);
}
[data-theme="dark"] * {
scrollbar-color: #4a4a4a var(--bg-secondary);
}
</style>
</head>
<body>