Skip to content

Commit 45a91d8

Browse files
danielchalmersdanielchalmers
authored
Fluent Design Theme (#131)
* First redesign **`Themes/ModernTheme.xaml`** *(new file, merged via App.xaml)* - **ContextMenu** — white background, subtle `#D8DEE9` border, system drop shadow, `Segoe UI 13` - **MenuItem** — full `ControlTemplate`: rounded hover tiles (`#EFF6FF`), blue text on hover (`#1D4ED8`), SVG checkmark for checkable items (stay on top), graceful disabled state (`#94A3B8`) - **Separator** — slim 1 px `#E8ECF0` line with breathing room **SettingsWindow.xaml** — full style overhaul: - **Sidebar** — deep navy `#111B2E` with a dark border; app title in crisp `#E2E8F0`, version in muted `#4B6080` - **Sidebar nav buttons** — transparent base, rounded 8 px hover tile `#1E2D45`, custom `ControlTemplate` so system colours don't bleed through - **Sidebar tool buttons** — subtle navy `#192540` fill, hover lightens, disabled dims cleanly - **Content area** — `#F2F5F9` background so white cards visually float - **CardGroupBox** — proper card with 10 px rounded corners, `#F7F9FC` header strip separated by a 1 px rule, body padding 16 px - **TextBox** — 6 px corners, blue focus ring (`#3B82F6`), light blue focus background - **Button** — 6 px corners, hover/press states, disabled dimming - **Typography** — labels `#1E293B`, descriptions `#64748B`, slider values `#64748B`, hyperlinks `#2563EB` - **Spacing** — content padding increased to 20 px all sides, bottom padding added so last card isn't clipped **MainWindow.xaml / App.xaml** — `UseLayoutRounding="True"` and `FontFamily="Segoe UI"` wired in; `ModernTheme.xaml` merged at application level so the context menu picks it up globally. \ * more windows 11 style > I like it but let's go in a direction that fits closer to the modern Windows 11 fluent design for 2026 since this is a Windows app * Revert "more windows 11 style" This reverts commit d483c30. * Revert "First redesign" This reverts commit 0b5920c. * third version (fluent design) > refine our theme visuals including the settings window and context menus. create a clean coherent modern design that fits with Windows 11 fluent design visuals. Do not overextend and apply overly-heavy styles or regress support for older versions of Windows. * Revert "third version (fluent design)" This reverts commit ce7a0d5. * opus 4.6 **Key visual improvements:** - **GroupBox cards** → rounded 8px border with subtle shadow (replaces classic WPF chrome) - **Buttons** → rounded 4px corners with clean hover/pressed states - **Context menu** → rounded 8px corners, soft shadow, modern MenuItem hover - **Sidebar** → uses theme tokens instead of hardcoded hex colors - **Typography** → Segoe UI Variable (Win11 font, falls back to Segoe UI on older Windows), slightly larger 13px base size
1 parent 43024ac commit 45a91d8

3 files changed

Lines changed: 412 additions & 111 deletions

File tree

‎DesktopClock/App.xaml‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
<Application x:Class="DesktopClock.App"
1+
<Application x:Class="DesktopClock.App"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
StartupUri="MainWindow.xaml">
5-
<Application.Resources />
5+
<Application.Resources>
6+
<ResourceDictionary>
7+
<ResourceDictionary.MergedDictionaries>
8+
<ResourceDictionary Source="Themes/FluentTheme.xaml" />
9+
</ResourceDictionary.MergedDictionaries>
10+
</ResourceDictionary>
11+
</Application.Resources>
612
</Application>

‎DesktopClock/SettingsWindow.xaml‎

Lines changed: 10 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Window x:Class="DesktopClock.SettingsWindow"
1+
<Window x:Class="DesktopClock.SettingsWindow"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -13,110 +13,11 @@
1313
MinWidth="800"
1414
MinHeight="600"
1515
ResizeMode="CanResize"
16-
WindowStartupLocation="CenterScreen">
17-
<Window.Resources>
18-
<Style TargetType="Button">
19-
<Setter Property="Padding" Value="8,4" />
20-
<Setter Property="MinHeight" Value="28" />
21-
<Setter Property="BorderThickness" Value="1" />
22-
<Setter Property="Margin" Value="0,0,0,4" />
23-
</Style>
24-
25-
<Style x:Key="SidebarButton"
26-
TargetType="Button"
27-
BasedOn="{StaticResource {x:Type Button}}">
28-
<Setter Property="HorizontalContentAlignment" Value="Left" />
29-
<Setter Property="Background" Value="Transparent" />
30-
<Setter Property="BorderThickness" Value="0" />
31-
<Setter Property="Margin" Value="0,0,0,2" />
32-
<Setter Property="Padding" Value="8,6,24,6" />
33-
<Setter Property="MinHeight" Value="32" />
34-
</Style>
35-
36-
<Style x:Key="SidebarToolButton"
37-
TargetType="Button"
38-
BasedOn="{StaticResource SidebarButton}">
39-
<Setter Property="Background" Value="#FFFFFF" />
40-
<Setter Property="BorderBrush" Value="#DADDE3" />
41-
<Setter Property="BorderThickness" Value="1" />
42-
<Setter Property="Padding" Value="8,4,20,4" />
43-
<Setter Property="MinWidth" Value="150" />
44-
<Setter Property="MinHeight" Value="0" />
45-
<Setter Property="Margin" Value="0,0,0,4" />
46-
</Style>
47-
48-
<Style x:Key="SidebarToolDescription"
49-
TargetType="TextBlock">
50-
<Setter Property="FontSize" Value="11" />
51-
<Setter Property="FontWeight" Value="Normal" />
52-
<Setter Property="TextWrapping" Value="Wrap" />
53-
<Setter Property="Opacity" Value="0.75" />
54-
<Setter Property="Margin" Value="0,2,0,0" />
55-
</Style>
56-
57-
<Style x:Key="ColorSwatchButton"
58-
TargetType="Button"
59-
BasedOn="{StaticResource {x:Type Button}}">
60-
<Setter Property="Width" Value="32" />
61-
<Setter Property="Padding" Value="0" />
62-
</Style>
63-
64-
<Style TargetType="TextBox">
65-
<Setter Property="MinHeight" Value="26" />
66-
<Setter Property="Padding" Value="2" />
67-
<Setter Property="VerticalContentAlignment" Value="Center" />
68-
<Setter Property="BorderThickness" Value="1" />
69-
<Setter Property="Margin" Value="0,0,0,4" />
70-
</Style>
71-
72-
<Style TargetType="ComboBox">
73-
<Setter Property="MinHeight" Value="26" />
74-
<Setter Property="Padding" Value="6,4" />
75-
<Setter Property="BorderBrush" Value="#D0D0D0" />
76-
<Setter Property="Margin" Value="0,0,0,4" />
77-
</Style>
78-
79-
<Style TargetType="CheckBox">
80-
<Setter Property="Margin" Value="0,0,0,4" />
81-
</Style>
82-
83-
<Style TargetType="Slider">
84-
<Setter Property="Margin" Value="0,0,0,4" />
85-
</Style>
86-
87-
<Style x:Key="CardGroupBox"
88-
TargetType="GroupBox">
89-
<Setter Property="Margin" Value="0,0,0,16" />
90-
<Setter Property="Focusable" Value="True" />
91-
</Style>
92-
93-
<Style x:Key="CardBodyPanel"
94-
TargetType="StackPanel">
95-
<Setter Property="Margin" Value="8" />
96-
</Style>
97-
98-
<Style x:Key="LabelTextBlock"
99-
TargetType="TextBlock">
100-
<Setter Property="FontWeight" Value="SemiBold" />
101-
<Setter Property="Margin" Value="0,0,0,4" />
102-
</Style>
103-
104-
<Style x:Key="DescriptionTextBlock"
105-
TargetType="TextBlock">
106-
<Setter Property="FontSize" Value="11" />
107-
<Setter Property="TextWrapping" Value="Wrap" />
108-
</Style>
109-
110-
<Style x:Key="SliderValueTextBlock"
111-
TargetType="TextBlock">
112-
<Setter Property="VerticalAlignment" Value="Center" />
113-
<Setter Property="HorizontalAlignment" Value="Right" />
114-
</Style>
115-
116-
<Style TargetType="Hyperlink">
117-
<Setter Property="TextDecorations" Value="None" />
118-
</Style>
119-
</Window.Resources>
16+
WindowStartupLocation="CenterScreen"
17+
FontFamily="Segoe UI Variable Text, Segoe UI"
18+
FontSize="13"
19+
UseLayoutRounding="True">
20+
12021

12122
<Grid>
12223
<Grid.ColumnDefinitions>
@@ -125,8 +26,8 @@
12526
</Grid.ColumnDefinitions>
12627

12728
<Border Grid.Column="0"
128-
Background="#FAFAFA"
129-
BorderBrush="#E1E4E8"
29+
Background="{DynamicResource SubtleBrush}"
30+
BorderBrush="{DynamicResource SeparatorBrush}"
13031
BorderThickness="0,0,1,0">
13132
<Grid Margin="8">
13233
<Grid.RowDefinitions>
@@ -141,7 +42,7 @@
14142
FontSize="20"
14243
FontWeight="SemiBold" />
14344
<TextBlock Text="{Binding AppVersion, StringFormat=v{0}}"
144-
Foreground="#5B6F8E"
45+
Foreground="{DynamicResource TextSecondaryBrush}"
14546
Margin="0,0,0,6" />
14647
</StackPanel>
14748

@@ -227,7 +128,7 @@
227128
ScrollChanged="SettingsScrollViewer_ScrollChanged"
228129
Loaded="SettingsScrollViewer_Loaded">
229130
<StackPanel x:Name="SettingsContent"
230-
Margin="16,16,16,0">
131+
Margin="24,24,24,0">
231132
<GroupBox x:Name="DisplaySection"
232133
Header="Display"
233134
Style="{StaticResource CardGroupBox}">

0 commit comments

Comments
 (0)