From 0ecf6f9bcab879d948b3fe7ca02a23c19fc4a7ff Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 8 Nov 2025 18:07:46 +0000 Subject: [PATCH] Improve dark mode scrollbar styling for Chrome 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 --- templates/base.html | 46 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/templates/base.html b/templates/base.html index 38cba5a..96f117d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -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); + } +