feat: add scrollbar style setting (themed/native/hidden)

Themed scrollbars (default) use 6px thin bars matching the existing
colour palette. Synced to body via class toggle in Providers.

1 files changed, 25 insertions, 0 deletions

diff --git a/apps/web/app/reader/settings/_components/appearance-settings.tsx b/apps/web/app/reader/settings/_components/appearance-settings.tsx
index 5068937..e1a6ecf 100644
--- a/apps/web/app/reader/settings/_components/appearance-settings.tsx
+++ b/apps/web/app/reader/settings/_components/appearance-settings.tsx
@@ -90,6 +90,12 @@ export function AppearanceSettings() {
   const setAutoRefreshTimeline = useUserInterfaceStore(
     (state) => state.setAutoRefreshTimeline
   )
+  const scrollbarStyle = useUserInterfaceStore(
+    (state) => state.scrollbarStyle
+  )
+  const setScrollbarStyle = useUserInterfaceStore(
+    (state) => state.setScrollbarStyle
+  )
   const toolbarPosition = useUserInterfaceStore(
     (state) => state.toolbarPosition
   )
@@ -150,6 +156,25 @@ export function AppearanceSettings() {
             <option value="bottom">bottom</option>
           </select>
         </div>
+        <div>
+          <h3 className="mb-2 text-text-primary">scrollbars</h3>
+          <p className="mb-3 text-text-dim">
+            choose between themed scrollbars, platform native, or hidden
+          </p>
+          <select
+            value={scrollbarStyle}
+            onChange={(event) =>
+              setScrollbarStyle(
+                event.target.value as "custom" | "native" | "hidden"
+              )
+            }
+            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
+          >
+            <option value="custom">themed</option>
+            <option value="native">native</option>
+            <option value="hidden">hidden</option>
+          </select>
+        </div>
       </SettingsSection>
 
       <SettingsSection title="entry list">