Icon work - and apptheming

2026-01-11 13:34:36 -05:00
parent 50cc186d6d
commit 8531f2b972
50 changed files with 441 additions and 237 deletions
--- a/TodoApp/Pages/NewTodoPage.xaml
+++ b/TodoApp/Pages/NewTodoPage.xaml
@@ -3,19 +3,12 @@
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TodoApp.NewTodoPage"
             Title="New Task"
-             BackgroundColor="#F5F7FA">
-
-    <ContentPage.Resources>
-        <Color x:Key="PrimaryColor">#5C6BC0</Color>
-        <Color x:Key="AccentColor">#26A69A</Color>
-        <Color x:Key="TextPrimary">#212121</Color>
-        <Color x:Key="TextSecondary">#757575</Color>
-        <Color x:Key="CardBackground">#FFFFFF</Color>
-        <Color x:Key="BorderColor">#E8EAF6</Color>
-    </ContentPage.Resources>
+             BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">

    <ContentPage.ToolbarItems>
-        <ToolbarItem Text="Save" Clicked="OnSaveClicked" />
+        <ToolbarItem Text="Save"
+                     IconImageSource="save_white.svg"
+                     Clicked="OnSaveClicked" />
    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="Auto,Auto,Auto,*" RowSpacing="16" Padding="20">
@@ -24,10 +17,10 @@
        <VerticalStackLayout Grid.Row="0" Spacing="4">
            <Label Text="Create a new task"
                   FontSize="24"
-                   TextColor="{StaticResource TextPrimary}" />
+                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
            <Label Text="Fill in the details below"
                   FontSize="14"
-                   TextColor="{StaticResource TextSecondary}" />
+                   TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
        </VerticalStackLayout>

        <!-- Title Section -->
@@ -36,8 +29,8 @@
                   FontSize="13"
                   FontAttributes="Bold"
                   TextColor="{StaticResource PrimaryColor}" />
-            <Border BackgroundColor="{StaticResource CardBackground}"
-                    Stroke="{StaticResource BorderColor}"
+            <Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
+                    Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
                    StrokeThickness="1"
                    Padding="16,12">
                <Border.StrokeShape>
@@ -46,8 +39,8 @@
                <Entry x:Name="TitleEntry"
                       Placeholder="What needs to be done?"
                       FontSize="18"
-                       TextColor="{StaticResource TextPrimary}"
-                       PlaceholderColor="{StaticResource TextSecondary}" />
+                       TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
+                       PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
            </Border>
        </VerticalStackLayout>

@@ -60,8 +53,8 @@

        <!-- Notes Section (fills remaining space) -->
        <Border Grid.Row="3"
-                BackgroundColor="{StaticResource CardBackground}"
-                Stroke="{StaticResource BorderColor}"
+                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
+                Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
                StrokeThickness="1"
                Padding="16,12">
            <Border.StrokeShape>
@@ -70,8 +63,8 @@
            <Editor x:Name="NotesEditor"
                    Placeholder="Add notes (optional)..."
                    FontSize="14"
-                    TextColor="{StaticResource TextPrimary}"
-                    PlaceholderColor="{StaticResource TextSecondary}"
+                    TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                    VerticalOptions="Fill" />
        </Border>

--- a/TodoApp/Pages/TodoDetailPage.xaml
+++ b/TodoApp/Pages/TodoDetailPage.xaml
@@ -3,21 +3,15 @@
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TodoApp.TodoDetailPage"
             Title="Task Details"
-             BackgroundColor="#F5F7FA">
-
-    <ContentPage.Resources>
-        <Color x:Key="PrimaryColor">#5C6BC0</Color>
-        <Color x:Key="AccentColor">#26A69A</Color>
-        <Color x:Key="DangerColor">#EF5350</Color>
-        <Color x:Key="TextPrimary">#212121</Color>
-        <Color x:Key="TextSecondary">#757575</Color>
-        <Color x:Key="CardBackground">#FFFFFF</Color>
-        <Color x:Key="BorderColor">#E8EAF6</Color>
-    </ContentPage.Resources>
+             BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">

    <ContentPage.ToolbarItems>
-        <ToolbarItem Text="Delete" Clicked="OnDeleteClicked" />
-        <ToolbarItem Text="Save" Clicked="OnSaveClicked" />
+        <ToolbarItem Text="Delete"
+                     IconImageSource="delete_white.svg"
+                     Clicked="OnDeleteClicked" />
+        <ToolbarItem Text="Save"
+                     IconImageSource="save_white.svg"
+                     Clicked="OnSaveClicked" />
    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="Auto,Auto,*,Auto,Auto" RowSpacing="16" Padding="20">
@@ -28,8 +22,8 @@
                   FontSize="13"
                   FontAttributes="Bold"
                   TextColor="{StaticResource PrimaryColor}" />
-            <Border BackgroundColor="{StaticResource CardBackground}"
-                    Stroke="{StaticResource BorderColor}"
+            <Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
+                    Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
                    StrokeThickness="1"
                    Padding="16,12">
                <Border.StrokeShape>
@@ -38,8 +32,8 @@
                <Entry x:Name="TitleEntry"
                       Placeholder="Task title"
                       FontSize="18"
-                       TextColor="{StaticResource TextPrimary}"
-                       PlaceholderColor="{StaticResource TextSecondary}" />
+                       TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
+                       PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
            </Border>
        </VerticalStackLayout>

@@ -52,8 +46,8 @@

        <!-- Notes Section (fills remaining space) -->
        <Border Grid.Row="2"
-                BackgroundColor="{StaticResource CardBackground}"
-                Stroke="{StaticResource BorderColor}"
+                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
+                Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
                StrokeThickness="1"
                Padding="16,12">
            <Border.StrokeShape>
@@ -62,8 +56,8 @@
            <Editor x:Name="NotesEditor"
                    Placeholder="Add notes here..."
                    FontSize="14"
-                    TextColor="{StaticResource TextPrimary}"
-                    PlaceholderColor="{StaticResource TextSecondary}"
+                    TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                    VerticalOptions="Fill" />
        </Border>

@@ -73,8 +67,8 @@
                   FontSize="13"
                   FontAttributes="Bold"
                   TextColor="{StaticResource PrimaryColor}" />
-            <Border BackgroundColor="{StaticResource CardBackground}"
-                    Stroke="{StaticResource BorderColor}"
+            <Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
+                    Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
                    StrokeThickness="1"
                    Padding="16,12">
                <Border.StrokeShape>
@@ -88,7 +82,7 @@
                    <Label x:Name="StatusLabel"
                           Text="In Progress"
                           FontSize="16"
-                           TextColor="{StaticResource TextPrimary}"
+                           TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
                           VerticalOptions="Center" />
                </HorizontalStackLayout>
            </Border>
@@ -98,7 +92,7 @@
        <Label Grid.Row="4"
               x:Name="CreatedLabel"
               FontSize="13"
-               TextColor="{StaticResource TextSecondary}"
+               TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
               HorizontalOptions="Center"
               HorizontalTextAlignment="Center" />

--- a/TodoApp/Pages/TodoListPage.xaml
+++ b/TodoApp/Pages/TodoListPage.xaml
@@ -4,20 +4,10 @@
             xmlns:local="clr-namespace:TodoApp"
             x:Class="TodoApp.TodoListPage"
             Title="My Tasks"
-             BackgroundColor="#F5F7FA">
+             BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">

    <ContentPage.Resources>
        <ResourceDictionary>
-            <!-- Colors -->
-            <Color x:Key="PrimaryColor">#5C6BC0</Color>
-            <Color x:Key="PrimaryDark">#3949AB</Color>
-            <Color x:Key="AccentColor">#26A69A</Color>
-            <Color x:Key="TextPrimary">#212121</Color>
-            <Color x:Key="TextSecondary">#757575</Color>
-            <Color x:Key="CardBackground">#FFFFFF</Color>
-            <Color x:Key="DividerColor">#E0E0E0</Color>
-            <Color x:Key="CompletedColor">#9E9E9E</Color>
-
            <!-- Converters -->
            <local:AlternatingRowColorConverter x:Key="AlternatingRowColorConverter" />
            <local:CompletedToColorConverter x:Key="CompletedToColorConverter" />
@@ -27,7 +17,9 @@
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>
-        <ToolbarItem Text="+ Add" Clicked="OnAddClicked" />
+        <ToolbarItem Text="Add"
+                     IconImageSource="add_white.svg"
+                     Clicked="OnAddClicked" />
    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="*,Auto" Padding="0">
@@ -47,11 +39,11 @@
                                     Padding="40">
                    <Label Text="No tasks yet"
                           FontSize="22"
-                           TextColor="{StaticResource TextSecondary}"
+                           TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                           HorizontalOptions="Center" />
                    <Label Text="Tap '+ Add' to create your first task"
                           FontSize="14"
-                           TextColor="{StaticResource TextSecondary}"
+                           TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                           HorizontalOptions="Center"
                           Margin="0,8,0,0" />
                </VerticalStackLayout>
@@ -62,7 +54,7 @@
                    <!-- Card-style item -->
                    <Grid Padding="0,6" BackgroundColor="Transparent">
                        <Border StrokeThickness="0"
-                                BackgroundColor="{StaticResource CardBackground}"
+                                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
                                Padding="16,14"
                                Opacity="{Binding IsCompleted, Converter={StaticResource CompletedToOpacityConverter}}">
                            <Border.StrokeShape>
--- a/TodoApp/Pages/TodoListPage.xaml.cs
+++ b/TodoApp/Pages/TodoListPage.xaml.cs
@@ -80,17 +80,23 @@ public partial class TodoListPage : ContentPage
 }

 /// <summary>
-/// Converter for alternating row background colors.
+/// Converter for alternating row background colors with Light/Dark mode support.
 /// </summary>
 public class AlternatingRowColorConverter : IValueConverter
 {
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
+        bool isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
+
        if (value is int index)
        {
+            if (isDarkMode)
+            {
+                return index % 2 == 0 ? Color.FromArgb("#1E1E1E") : Color.FromArgb("#2A2A2A");
+            }
            return index % 2 == 0 ? Colors.White : Color.FromArgb("#F5F5F5");
        }
-        return Colors.White;
+        return isDarkMode ? Color.FromArgb("#1E1E1E") : Colors.White;
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
@@ -100,21 +106,25 @@ public class AlternatingRowColorConverter : IValueConverter
 }

 /// <summary>
-/// Converter for completed task text color and indicator color.
+/// Converter for completed task text color and indicator color with Light/Dark mode support.
 /// </summary>
 public class CompletedToColorConverter : IValueConverter
 {
-    // Define colors
-    private static readonly Color PrimaryColor = Color.FromArgb("#5C6BC0");
+    // Light theme colors
    private static readonly Color AccentColor = Color.FromArgb("#26A69A");
    private static readonly Color CompletedColor = Color.FromArgb("#9E9E9E");
-    private static readonly Color TextPrimary = Color.FromArgb("#212121");
-    private static readonly Color TextSecondary = Color.FromArgb("#757575");
+    private static readonly Color TextPrimaryLight = Color.FromArgb("#212121");
+    private static readonly Color TextSecondaryLight = Color.FromArgb("#757575");
+
+    // Dark theme colors
+    private static readonly Color TextPrimaryDark = Color.FromArgb("#FFFFFF");
+    private static readonly Color TextSecondaryDark = Color.FromArgb("#B0B0B0");

    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        bool isCompleted = value is bool b && b;
        string param = parameter as string ?? "";
+        bool isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;

        // Indicator bar color
        if (param == "indicator")
@@ -122,14 +132,18 @@ public class CompletedToColorConverter : IValueConverter
            return isCompleted ? CompletedColor : AccentColor;
        }

-        // Text colors
+        // Text colors with theme support
        if (isCompleted)
        {
            return CompletedColor;
        }
        else
        {
-            return param == "notes" ? TextSecondary : TextPrimary;
+            if (param == "notes")
+            {
+                return isDarkMode ? TextSecondaryDark : TextSecondaryLight;
+            }
+            return isDarkMode ? TextPrimaryDark : TextPrimaryLight;
        }
    }