From 2de65f6d1033abdaa87e77b59eedce430e23836d Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Sun, 10 May 2026 13:29:44 -0400
Subject: [PATCH] Restyle ScrollBar to match dark theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Default WPF ScrollBar template renders chunky Win9x line-up/line-down arrow buttons + a 3D thumb that look out of place on the dark canvas. Replace with a slim transparent track + tinted thumb pattern (Edge / VS Code / GitHub style):

- Thumb: BorderStrong by default, lifts to Text.Tertiary on hover, switches to cyan accent while dragging.

- No arrow buttons — track-clicks above/below the thumb still page-scroll via invisible RepeatButtons (preserves PageUp/PageDown behavior).

- Horizontal orientation has its own template via Style.Triggers so it picks the right Track command set (PageLeft/PageRight).

Affects every ScrollViewer in the app — settings panel, presets dialog list, Notes window, About dialog, Help cheat sheet.
---
 src/TeamsISO.App/Themes/WildDragonTheme.xaml | 93 +++++++++++++++++++-
 1 file changed, 92 insertions(+), 1 deletion(-)

diff --git a/src/TeamsISO.App/Themes/WildDragonTheme.xaml b/src/TeamsISO.App/Themes/WildDragonTheme.xaml
index 94b7f50..bcb6ca8 100644
--- a/src/TeamsISO.App/Themes/WildDragonTheme.xaml
+++ b/src/TeamsISO.App/Themes/WildDragonTheme.xaml
@@ -687,16 +687,107 @@
         </Setter>
     </Style>
 
-    <!-- ════ ScrollBar (slim) ════ -->
+    <!-- ════ ScrollBar (slim, dark-theme-native) ════ -->
+    <!--
+        The default WPF ScrollBar template is a chunky Win9x affair (line-up
+        / line-down arrow buttons + a 3D thumb) that clashes hard with the
+        dark canvas. Replace with a slim, transparent track + thumb pattern
+        like Edge / VS Code / GitHub use: thumb is barely visible at rest,
+        pops a tone brighter on hover/drag. Track-clicks still page-scroll
+        (the RepeatButton does the work) but render as invisible hit zones.
+    -->
+    <Style x:Key="Wd.ScrollBar.Thumb" TargetType="Thumb">
+        <Setter Property="Background" Value="{StaticResource Wd.BorderStrong}"/>
+        <Setter Property="OverridesDefaultStyle" Value="True"/>
+        <Setter Property="IsTabStop" Value="False"/>
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Thumb">
+                    <Border x:Name="Bd"
+                            Background="{TemplateBinding Background}"
+                            CornerRadius="4"
+                            Margin="2"/>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Text.Tertiary}"/>
+                        </Trigger>
+                        <Trigger Property="IsDragging" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- Invisible page-scroll RepeatButton (clicks above/below thumb still page-scroll). -->
+    <Style x:Key="Wd.ScrollBar.PageButton" TargetType="RepeatButton">
+        <Setter Property="OverridesDefaultStyle" Value="True"/>
+        <Setter Property="IsTabStop" Value="False"/>
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RepeatButton">
+                    <Border Background="{TemplateBinding Background}"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style TargetType="ScrollBar">
         <Setter Property="Width" Value="10"/>
         <Setter Property="MinWidth" Value="10"/>
         <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ScrollBar">
+                    <Grid x:Name="Bg" Background="{TemplateBinding Background}">
+                        <Track x:Name="PART_Track" IsDirectionReversed="True">
+                            <Track.DecreaseRepeatButton>
+                                <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
+                                              Command="ScrollBar.PageUpCommand"/>
+                            </Track.DecreaseRepeatButton>
+                            <Track.Thumb>
+                                <Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
+                            </Track.Thumb>
+                            <Track.IncreaseRepeatButton>
+                                <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
+                                              Command="ScrollBar.PageDownCommand"/>
+                            </Track.IncreaseRepeatButton>
+                        </Track>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
         <Style.Triggers>
             <Trigger Property="Orientation" Value="Horizontal">
                 <Setter Property="Height" Value="10"/>
                 <Setter Property="MinHeight" Value="10"/>
                 <Setter Property="Width" Value="Auto"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="ScrollBar">
+                            <Grid x:Name="Bg" Background="{TemplateBinding Background}">
+                                <Track x:Name="PART_Track" IsDirectionReversed="False">
+                                    <Track.DecreaseRepeatButton>
+                                        <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
+                                                      Command="ScrollBar.PageLeftCommand"/>
+                                    </Track.DecreaseRepeatButton>
+                                    <Track.Thumb>
+                                        <Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
+                                    </Track.Thumb>
+                                    <Track.IncreaseRepeatButton>
+                                        <RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
+                                                      Command="ScrollBar.PageRightCommand"/>
+                                    </Track.IncreaseRepeatButton>
+                                </Track>
+                            </Grid>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
             </Trigger>
         </Style.Triggers>
     </Style>