From 8531f2b97269b9bd4169946e1b25dc9a5796e4cc Mon Sep 17 00:00:00 2001
From: logikonline <dave@marketally.com>
Date: Sun, 11 Jan 2026 13:34:36 -0500
Subject: [PATCH] Icon work - and apptheming

---
 ShellDemo/AppShell.xaml                       |  72 +++-------
 ShellDemo/Pages/HomePage.xaml.cs              |   1 +
 .../Resources/Images/calendar_month_dark.svg  |   1 +
 .../Resources/Images/calendar_month_light.svg |   1 +
 ShellDemo/Resources/Images/check_box_dark.svg |   1 +
 .../Resources/Images/check_box_light.svg      |   1 +
 ShellDemo/Resources/Images/edit_note_dark.svg |   1 +
 .../Resources/Images/edit_note_light.svg      |   1 +
 .../Images/format_list_bulleted_dark.svg      |   1 +
 .../Images/format_list_bulleted_light.svg     |   1 +
 ShellDemo/Resources/Images/grid_view_dark.svg |   1 +
 .../Resources/Images/grid_view_light.svg      |   1 +
 ShellDemo/Resources/Images/home_dark.svg      |   1 +
 ShellDemo/Resources/Images/home_light.svg     |   1 +
 .../Resources/Images/hourglass_empty_dark.svg |   1 +
 .../Images/hourglass_empty_light.svg          |   1 +
 ShellDemo/Resources/Images/info_dark.svg      |   1 +
 ShellDemo/Resources/Images/info_light.svg     |   1 +
 .../Resources/Images/smart_button_dark.svg    |   1 +
 .../Resources/Images/smart_button_light.svg   |   1 +
 ShellDemo/ShellDemo.csproj                    |   4 +
 TodoApp/App.cs                                |  21 ---
 TodoApp/App.xaml                              |  76 ++++++++++
 TodoApp/App.xaml.cs                           |  35 +++++
 TodoApp/Pages/NewTodoPage.xaml                |  35 ++---
 TodoApp/Pages/TodoDetailPage.xaml             |  44 +++---
 TodoApp/Pages/TodoListPage.xaml               |  22 +--
 TodoApp/Pages/TodoListPage.xaml.cs            |  32 +++--
 TodoApp/Resources/Images/add_white.svg        |   1 +
 TodoApp/Resources/Images/delete_white.svg     |   1 +
 TodoApp/Resources/Images/save_white.svg       |   1 +
 TodoApp/TodoApp.csproj                        |   6 +-
 WebViewDemo/App.cs                            |  21 ---
 WebViewDemo/App.xaml                          |  71 ++++++++++
 WebViewDemo/App.xaml.cs                       |  35 +++++
 WebViewDemo/Pages/WebViewPage.xaml            | 130 ++++++++----------
 .../Resources/Images/arrow_back_dark.svg      |   1 +
 .../Resources/Images/arrow_back_light.svg     |   1 +
 .../Resources/Images/arrow_forward_dark.svg   |   1 +
 .../Resources/Images/arrow_forward_light.svg  |   1 +
 WebViewDemo/Resources/Images/code_dark.svg    |   1 +
 WebViewDemo/Resources/Images/code_light.svg   |   1 +
 .../Resources/Images/play_arrow_dark.svg      |   1 +
 .../Resources/Images/play_arrow_light.svg     |   1 +
 WebViewDemo/Resources/Images/refresh_dark.svg |   1 +
 .../Resources/Images/refresh_light.svg        |   1 +
 WebViewDemo/Resources/Images/send_dark.svg    |   1 +
 WebViewDemo/Resources/Images/send_light.svg   |   1 +
 WebViewDemo/WebViewDemo.csproj                |   4 +
 maui-linux-samples.sln                        |  36 +++++
 50 files changed, 441 insertions(+), 237 deletions(-)
 create mode 100644 ShellDemo/Resources/Images/calendar_month_dark.svg
 create mode 100644 ShellDemo/Resources/Images/calendar_month_light.svg
 create mode 100644 ShellDemo/Resources/Images/check_box_dark.svg
 create mode 100644 ShellDemo/Resources/Images/check_box_light.svg
 create mode 100644 ShellDemo/Resources/Images/edit_note_dark.svg
 create mode 100644 ShellDemo/Resources/Images/edit_note_light.svg
 create mode 100644 ShellDemo/Resources/Images/format_list_bulleted_dark.svg
 create mode 100644 ShellDemo/Resources/Images/format_list_bulleted_light.svg
 create mode 100644 ShellDemo/Resources/Images/grid_view_dark.svg
 create mode 100644 ShellDemo/Resources/Images/grid_view_light.svg
 create mode 100644 ShellDemo/Resources/Images/home_dark.svg
 create mode 100644 ShellDemo/Resources/Images/home_light.svg
 create mode 100644 ShellDemo/Resources/Images/hourglass_empty_dark.svg
 create mode 100644 ShellDemo/Resources/Images/hourglass_empty_light.svg
 create mode 100644 ShellDemo/Resources/Images/info_dark.svg
 create mode 100644 ShellDemo/Resources/Images/info_light.svg
 create mode 100644 ShellDemo/Resources/Images/smart_button_dark.svg
 create mode 100644 ShellDemo/Resources/Images/smart_button_light.svg
 delete mode 100644 TodoApp/App.cs
 create mode 100644 TodoApp/App.xaml
 create mode 100644 TodoApp/App.xaml.cs
 create mode 100644 TodoApp/Resources/Images/add_white.svg
 create mode 100644 TodoApp/Resources/Images/delete_white.svg
 create mode 100644 TodoApp/Resources/Images/save_white.svg
 delete mode 100644 WebViewDemo/App.cs
 create mode 100644 WebViewDemo/App.xaml
 create mode 100644 WebViewDemo/App.xaml.cs
 create mode 100644 WebViewDemo/Resources/Images/arrow_back_dark.svg
 create mode 100644 WebViewDemo/Resources/Images/arrow_back_light.svg
 create mode 100644 WebViewDemo/Resources/Images/arrow_forward_dark.svg
 create mode 100644 WebViewDemo/Resources/Images/arrow_forward_light.svg
 create mode 100644 WebViewDemo/Resources/Images/code_dark.svg
 create mode 100644 WebViewDemo/Resources/Images/code_light.svg
 create mode 100644 WebViewDemo/Resources/Images/play_arrow_dark.svg
 create mode 100644 WebViewDemo/Resources/Images/play_arrow_light.svg
 create mode 100644 WebViewDemo/Resources/Images/refresh_dark.svg
 create mode 100644 WebViewDemo/Resources/Images/refresh_light.svg
 create mode 100644 WebViewDemo/Resources/Images/send_dark.svg
 create mode 100644 WebViewDemo/Resources/Images/send_light.svg
 create mode 100644 maui-linux-samples.sln

diff --git a/ShellDemo/AppShell.xaml b/ShellDemo/AppShell.xaml
index d376172..8d65f2d 100644
--- a/ShellDemo/AppShell.xaml
+++ b/ShellDemo/AppShell.xaml
@@ -44,92 +44,56 @@
     </Shell.FlyoutHeader>
 
     <!-- Home -->
-    <FlyoutItem Title="Home" Route="Home">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x1F3E0;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Home" Route="Home"
+                Icon="{AppThemeBinding Light=home_light.svg, Dark=home_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
     </FlyoutItem>
 
     <!-- Buttons -->
-    <FlyoutItem Title="Buttons" Route="Buttons">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x1F518;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Buttons" Route="Buttons"
+                Icon="{AppThemeBinding Light=smart_button_light.svg, Dark=smart_button_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:ButtonsPage}" />
     </FlyoutItem>
 
     <!-- Text Input -->
-    <FlyoutItem Title="Text Input" Route="TextInput">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x1F4DD;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Text Input" Route="TextInput"
+                Icon="{AppThemeBinding Light=edit_note_light.svg, Dark=edit_note_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:TextInputPage}" />
     </FlyoutItem>
 
     <!-- Selection -->
-    <FlyoutItem Title="Selection" Route="Selection">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x2611;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Selection" Route="Selection"
+                Icon="{AppThemeBinding Light=check_box_light.svg, Dark=check_box_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:SelectionPage}" />
     </FlyoutItem>
 
     <!-- Pickers -->
-    <FlyoutItem Title="Pickers" Route="Pickers">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x1F4C5;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Pickers" Route="Pickers"
+                Icon="{AppThemeBinding Light=calendar_month_light.svg, Dark=calendar_month_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:PickersPage}" />
     </FlyoutItem>
 
     <!-- Lists -->
-    <FlyoutItem Title="Lists" Route="Lists">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x1F4CB;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Lists" Route="Lists"
+                Icon="{AppThemeBinding Light=format_list_bulleted_light.svg, Dark=format_list_bulleted_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:ListsPage}" />
     </FlyoutItem>
 
     <!-- Progress -->
-    <FlyoutItem Title="Progress" Route="Progress">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x23F3;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Progress" Route="Progress"
+                Icon="{AppThemeBinding Light=hourglass_empty_light.svg, Dark=hourglass_empty_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:ProgressPage}" />
     </FlyoutItem>
 
     <!-- Grids -->
-    <FlyoutItem Title="Grids" Route="Grids">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x1F4CA;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="Grids" Route="Grids"
+                Icon="{AppThemeBinding Light=grid_view_light.svg, Dark=grid_view_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:GridsPage}" />
     </FlyoutItem>
 
     <!-- About -->
-    <FlyoutItem Title="About" Route="About">
-        <FlyoutItem.Icon>
-            <FontImageSource Glyph="&#x2139;"
-                             FontFamily="Default"
-                             Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
-        </FlyoutItem.Icon>
+    <FlyoutItem Title="About" Route="About"
+                Icon="{AppThemeBinding Light=info_light.svg, Dark=info_dark.svg}">
         <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
     </FlyoutItem>
 
diff --git a/ShellDemo/Pages/HomePage.xaml.cs b/ShellDemo/Pages/HomePage.xaml.cs
index 3f401bf..f448c8c 100644
--- a/ShellDemo/Pages/HomePage.xaml.cs
+++ b/ShellDemo/Pages/HomePage.xaml.cs
@@ -1,6 +1,7 @@
 // HomePage - Welcome page for the demo
 
 using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Shapes;
 using Microsoft.Maui.Graphics;
 using Microsoft.Maui.Platform.Linux.Hosting;
 
diff --git a/ShellDemo/Resources/Images/calendar_month_dark.svg b/ShellDemo/Resources/Images/calendar_month_dark.svg
new file mode 100644
index 0000000..8029ad9
--- /dev/null
+++ b/ShellDemo/Resources/Images/calendar_month_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/calendar_month_light.svg b/ShellDemo/Resources/Images/calendar_month_light.svg
new file mode 100644
index 0000000..3386cd8
--- /dev/null
+++ b/ShellDemo/Resources/Images/calendar_month_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/check_box_dark.svg b/ShellDemo/Resources/Images/check_box_dark.svg
new file mode 100644
index 0000000..c44b52a
--- /dev/null
+++ b/ShellDemo/Resources/Images/check_box_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/check_box_light.svg b/ShellDemo/Resources/Images/check_box_light.svg
new file mode 100644
index 0000000..2b94886
--- /dev/null
+++ b/ShellDemo/Resources/Images/check_box_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/edit_note_dark.svg b/ShellDemo/Resources/Images/edit_note_dark.svg
new file mode 100644
index 0000000..17d7044
--- /dev/null
+++ b/ShellDemo/Resources/Images/edit_note_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/edit_note_light.svg b/ShellDemo/Resources/Images/edit_note_light.svg
new file mode 100644
index 0000000..0522fbb
--- /dev/null
+++ b/ShellDemo/Resources/Images/edit_note_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/format_list_bulleted_dark.svg b/ShellDemo/Resources/Images/format_list_bulleted_dark.svg
new file mode 100644
index 0000000..f271f76
--- /dev/null
+++ b/ShellDemo/Resources/Images/format_list_bulleted_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/format_list_bulleted_light.svg b/ShellDemo/Resources/Images/format_list_bulleted_light.svg
new file mode 100644
index 0000000..d7d9960
--- /dev/null
+++ b/ShellDemo/Resources/Images/format_list_bulleted_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/grid_view_dark.svg b/ShellDemo/Resources/Images/grid_view_dark.svg
new file mode 100644
index 0000000..32bb066
--- /dev/null
+++ b/ShellDemo/Resources/Images/grid_view_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/grid_view_light.svg b/ShellDemo/Resources/Images/grid_view_light.svg
new file mode 100644
index 0000000..0df735d
--- /dev/null
+++ b/ShellDemo/Resources/Images/grid_view_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/home_dark.svg b/ShellDemo/Resources/Images/home_dark.svg
new file mode 100644
index 0000000..09938e3
--- /dev/null
+++ b/ShellDemo/Resources/Images/home_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/home_light.svg b/ShellDemo/Resources/Images/home_light.svg
new file mode 100644
index 0000000..700d1dc
--- /dev/null
+++ b/ShellDemo/Resources/Images/home_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/hourglass_empty_dark.svg b/ShellDemo/Resources/Images/hourglass_empty_dark.svg
new file mode 100644
index 0000000..8094fa5
--- /dev/null
+++ b/ShellDemo/Resources/Images/hourglass_empty_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/hourglass_empty_light.svg b/ShellDemo/Resources/Images/hourglass_empty_light.svg
new file mode 100644
index 0000000..dc1d1ad
--- /dev/null
+++ b/ShellDemo/Resources/Images/hourglass_empty_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/info_dark.svg b/ShellDemo/Resources/Images/info_dark.svg
new file mode 100644
index 0000000..30d2443
--- /dev/null
+++ b/ShellDemo/Resources/Images/info_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/info_light.svg b/ShellDemo/Resources/Images/info_light.svg
new file mode 100644
index 0000000..a3e9264
--- /dev/null
+++ b/ShellDemo/Resources/Images/info_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/smart_button_dark.svg b/ShellDemo/Resources/Images/smart_button_dark.svg
new file mode 100644
index 0000000..ea51e13
--- /dev/null
+++ b/ShellDemo/Resources/Images/smart_button_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M160-280q-33 0-56.5-23.5T80-360v-240q0-33 23.5-56.5T160-680h640q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280h-40v-80h40v-240H160v240h240v80H160Zm420 80-44-96-96-44 96-44 44-96 44 96 96 44-96 44-44 96Zm100-200-25-55-55-25 55-25 25-55 25 55 55 25-55 25-25 55Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/Resources/Images/smart_button_light.svg b/ShellDemo/Resources/Images/smart_button_light.svg
new file mode 100644
index 0000000..195df96
--- /dev/null
+++ b/ShellDemo/Resources/Images/smart_button_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M160-280q-33 0-56.5-23.5T80-360v-240q0-33 23.5-56.5T160-680h640q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280h-40v-80h40v-240H160v240h240v80H160Zm420 80-44-96-96-44 96-44 44-96 44 96 96 44-96 44-44 96Zm100-200-25-55-55-25 55-25 25-55 25 55 55 25-55 25-25 55Z"/></svg>
\ No newline at end of file
diff --git a/ShellDemo/ShellDemo.csproj b/ShellDemo/ShellDemo.csproj
index 4d84e80..42d5daa 100644
--- a/ShellDemo/ShellDemo.csproj
+++ b/ShellDemo/ShellDemo.csproj
@@ -12,4 +12,8 @@
     <ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <EmbeddedResource Include="Resources\Images\*.svg" />
+  </ItemGroup>
+
 </Project>
diff --git a/TodoApp/App.cs b/TodoApp/App.cs
deleted file mode 100644
index 7ffbb8d..0000000
--- a/TodoApp/App.cs
+++ /dev/null
@@ -1,21 +0,0 @@
-// TodoApp - Main Application with NavigationPage
-
-using Microsoft.Maui.Controls;
-
-namespace TodoApp;
-
-public class App : Application
-{
-    public static NavigationPage? NavigationPage { get; private set; }
-
-    public App()
-    {
-        NavigationPage = new NavigationPage(new TodoListPage())
-        {
-            Title = "OpenMaui Todo App",
-            BarBackgroundColor = Color.FromArgb("#2196F3"),
-            BarTextColor = Colors.White
-        };
-        MainPage = NavigationPage;
-    }
-}
diff --git a/TodoApp/App.xaml b/TodoApp/App.xaml
new file mode 100644
index 0000000..6f33625
--- /dev/null
+++ b/TodoApp/App.xaml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="TodoApp.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <!-- Primary Brand Colors -->
+            <Color x:Key="PrimaryColor">#5C6BC0</Color>
+            <Color x:Key="PrimaryDarkColor">#3949AB</Color>
+            <Color x:Key="AccentColor">#26A69A</Color>
+            <Color x:Key="DangerColor">#EF5350</Color>
+            <Color x:Key="CompletedColor">#9E9E9E</Color>
+
+            <!-- Light Theme Colors -->
+            <Color x:Key="PageBackgroundLight">#F5F7FA</Color>
+            <Color x:Key="CardBackgroundLight">#FFFFFF</Color>
+            <Color x:Key="TextPrimaryLight">#212121</Color>
+            <Color x:Key="TextSecondaryLight">#757575</Color>
+            <Color x:Key="BorderLight">#E8EAF6</Color>
+            <Color x:Key="DividerLight">#E0E0E0</Color>
+            <Color x:Key="AlternateRowLight">#F5F5F5</Color>
+
+            <!-- Dark Theme Colors -->
+            <Color x:Key="PageBackgroundDark">#121212</Color>
+            <Color x:Key="CardBackgroundDark">#1E1E1E</Color>
+            <Color x:Key="TextPrimaryDark">#FFFFFF</Color>
+            <Color x:Key="TextSecondaryDark">#B0B0B0</Color>
+            <Color x:Key="BorderDark">#424242</Color>
+            <Color x:Key="DividerDark">#424242</Color>
+            <Color x:Key="AlternateRowDark">#2A2A2A</Color>
+
+            <!-- Navigation Bar Colors -->
+            <Color x:Key="NavBarBackgroundLight">#5C6BC0</Color>
+            <Color x:Key="NavBarBackgroundDark">#3949AB</Color>
+
+            <!-- Themed Styles -->
+            <Style x:Key="ThemedCard" TargetType="Border">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}" />
+                <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}" />
+                <Setter Property="StrokeThickness" Value="1" />
+                <Setter Property="Padding" Value="16,12" />
+                <Setter Property="StrokeShape">
+                    <Setter.Value>
+                        <RoundRectangle CornerRadius="10" />
+                    </Setter.Value>
+                </Setter>
+            </Style>
+
+            <Style x:Key="ThemedEntry" TargetType="Entry">
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
+                <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
+                <Setter Property="BackgroundColor" Value="Transparent" />
+            </Style>
+
+            <Style x:Key="ThemedEditor" TargetType="Editor">
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
+                <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
+                <Setter Property="BackgroundColor" Value="Transparent" />
+            </Style>
+
+            <Style x:Key="PrimaryButton" TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="TextColor" Value="White" />
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="Padding" Value="20,12" />
+            </Style>
+
+            <Style x:Key="DangerButton" TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource DangerColor}" />
+                <Setter Property="TextColor" Value="White" />
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="Padding" Value="20,12" />
+            </Style>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/TodoApp/App.xaml.cs b/TodoApp/App.xaml.cs
new file mode 100644
index 0000000..5fea456
--- /dev/null
+++ b/TodoApp/App.xaml.cs
@@ -0,0 +1,35 @@
+// TodoApp - Main Application with NavigationPage and Theme Support
+
+using Microsoft.Maui.Controls;
+
+namespace TodoApp;
+
+public partial class App : Application
+{
+    public static NavigationPage? NavigationPage { get; private set; }
+
+    public App()
+    {
+        InitializeComponent();
+
+        // Determine current theme for navigation bar colors
+        var isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
+        var barBackground = isDarkMode ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
+
+        NavigationPage = new NavigationPage(new TodoListPage())
+        {
+            Title = "OpenMaui Todo App",
+            BarBackgroundColor = barBackground,
+            BarTextColor = Colors.White
+        };
+
+        // Update navigation bar when theme changes
+        Application.Current!.RequestedThemeChanged += (s, e) =>
+        {
+            var dark = e.RequestedTheme == AppTheme.Dark;
+            NavigationPage.BarBackgroundColor = dark ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
+        };
+
+        MainPage = NavigationPage;
+    }
+}
diff --git a/TodoApp/Pages/NewTodoPage.xaml b/TodoApp/Pages/NewTodoPage.xaml
index 7f4f1a4..c7597a3 100644
--- 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>
 
diff --git a/TodoApp/Pages/TodoDetailPage.xaml b/TodoApp/Pages/TodoDetailPage.xaml
index ea8037a..feee9ea 100644
--- 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" />
 
diff --git a/TodoApp/Pages/TodoListPage.xaml b/TodoApp/Pages/TodoListPage.xaml
index 9299260..8fa41ed 100644
--- 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>
diff --git a/TodoApp/Pages/TodoListPage.xaml.cs b/TodoApp/Pages/TodoListPage.xaml.cs
index 204541b..c992e1b 100644
--- 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;
         }
     }
 
diff --git a/TodoApp/Resources/Images/add_white.svg b/TodoApp/Resources/Images/add_white.svg
new file mode 100644
index 0000000..625febe
--- /dev/null
+++ b/TodoApp/Resources/Images/add_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>
\ No newline at end of file
diff --git a/TodoApp/Resources/Images/delete_white.svg b/TodoApp/Resources/Images/delete_white.svg
new file mode 100644
index 0000000..8bf963d
--- /dev/null
+++ b/TodoApp/Resources/Images/delete_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
\ No newline at end of file
diff --git a/TodoApp/Resources/Images/save_white.svg b/TodoApp/Resources/Images/save_white.svg
new file mode 100644
index 0000000..137ad3f
--- /dev/null
+++ b/TodoApp/Resources/Images/save_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
\ No newline at end of file
diff --git a/TodoApp/TodoApp.csproj b/TodoApp/TodoApp.csproj
index 2ffc793..42d5daa 100644
--- a/TodoApp/TodoApp.csproj
+++ b/TodoApp/TodoApp.csproj
@@ -9,7 +9,11 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="OpenMaui.Controls.Linux" Version="1.0.0-preview.*" />
+    <ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Include="Resources\Images\*.svg" />
   </ItemGroup>
 
 </Project>
diff --git a/WebViewDemo/App.cs b/WebViewDemo/App.cs
deleted file mode 100644
index 6b17ad3..0000000
--- a/WebViewDemo/App.cs
+++ /dev/null
@@ -1,21 +0,0 @@
-// App.cs - Main Application with NavigationPage
-
-using Microsoft.Maui.Controls;
-
-namespace WebViewDemo;
-
-public class App : Application
-{
-    public static NavigationPage? NavigationPage { get; private set; }
-
-    public App()
-    {
-        NavigationPage = new NavigationPage(new WebViewPage())
-        {
-            Title = "OpenMaui WebView Demo",
-            BarBackgroundColor = Color.FromArgb("#5C6BC0"),
-            BarTextColor = Colors.White
-        };
-        MainPage = NavigationPage;
-    }
-}
diff --git a/WebViewDemo/App.xaml b/WebViewDemo/App.xaml
new file mode 100644
index 0000000..4ec1086
--- /dev/null
+++ b/WebViewDemo/App.xaml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="WebViewDemo.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <!-- Primary Brand Colors -->
+            <Color x:Key="PrimaryColor">#5C6BC0</Color>
+            <Color x:Key="PrimaryDarkColor">#3949AB</Color>
+            <Color x:Key="AccentColor">#26A69A</Color>
+            <Color x:Key="ButtonColor">#667EEA</Color>
+
+            <!-- Light Theme Colors -->
+            <Color x:Key="PageBackgroundLight">#F5F7FA</Color>
+            <Color x:Key="CardBackgroundLight">#FFFFFF</Color>
+            <Color x:Key="TextPrimaryLight">#212121</Color>
+            <Color x:Key="TextSecondaryLight">#757575</Color>
+            <Color x:Key="BorderLight">#E0E0E0</Color>
+
+            <!-- Dark Theme Colors -->
+            <Color x:Key="PageBackgroundDark">#121212</Color>
+            <Color x:Key="CardBackgroundDark">#1E1E1E</Color>
+            <Color x:Key="TextPrimaryDark">#FFFFFF</Color>
+            <Color x:Key="TextSecondaryDark">#B0B0B0</Color>
+            <Color x:Key="BorderDark">#424242</Color>
+
+            <!-- Navigation Bar Colors -->
+            <Color x:Key="NavBarBackgroundLight">#5C6BC0</Color>
+            <Color x:Key="NavBarBackgroundDark">#3949AB</Color>
+
+            <!-- Themed Styles -->
+            <Style x:Key="ThemedCard" TargetType="Border">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}" />
+                <Setter Property="StrokeThickness" Value="0" />
+                <Setter Property="Padding" Value="12" />
+                <Setter Property="StrokeShape">
+                    <Setter.Value>
+                        <RoundRectangle CornerRadius="8" />
+                    </Setter.Value>
+                </Setter>
+            </Style>
+
+            <Style x:Key="ThemedEntry" TargetType="Entry">
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
+                <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
+                <Setter Property="BackgroundColor" Value="Transparent" />
+            </Style>
+
+            <Style x:Key="NavButton" TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource ButtonColor}" />
+                <Setter Property="TextColor" Value="White" />
+                <Setter Property="HeightRequest" Value="36" />
+                <Setter Property="FontSize" Value="13" />
+            </Style>
+
+            <Style x:Key="PrimaryButton" TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="TextColor" Value="White" />
+                <Setter Property="HeightRequest" Value="36" />
+                <Setter Property="FontSize" Value="13" />
+            </Style>
+
+            <Style x:Key="AccentButton" TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource AccentColor}" />
+                <Setter Property="TextColor" Value="White" />
+                <Setter Property="HeightRequest" Value="36" />
+                <Setter Property="FontSize" Value="13" />
+            </Style>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/WebViewDemo/App.xaml.cs b/WebViewDemo/App.xaml.cs
new file mode 100644
index 0000000..2de92f2
--- /dev/null
+++ b/WebViewDemo/App.xaml.cs
@@ -0,0 +1,35 @@
+// App.xaml.cs - Main Application with NavigationPage and Theme Support
+
+using Microsoft.Maui.Controls;
+
+namespace WebViewDemo;
+
+public partial class App : Application
+{
+    public static NavigationPage? NavigationPage { get; private set; }
+
+    public App()
+    {
+        InitializeComponent();
+
+        // Determine current theme for navigation bar colors
+        var isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
+        var barBackground = isDarkMode ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
+
+        NavigationPage = new NavigationPage(new WebViewPage())
+        {
+            Title = "OpenMaui WebView Demo",
+            BarBackgroundColor = barBackground,
+            BarTextColor = Colors.White
+        };
+
+        // Update navigation bar when theme changes
+        Application.Current!.RequestedThemeChanged += (s, e) =>
+        {
+            var dark = e.RequestedTheme == AppTheme.Dark;
+            NavigationPage.BarBackgroundColor = dark ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
+        };
+
+        MainPage = NavigationPage;
+    }
+}
diff --git a/WebViewDemo/Pages/WebViewPage.xaml b/WebViewDemo/Pages/WebViewPage.xaml
index 6835202..80d3814 100644
--- a/WebViewDemo/Pages/WebViewPage.xaml
+++ b/WebViewDemo/Pages/WebViewPage.xaml
@@ -3,19 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="WebViewDemo.WebViewPage"
              Title="WebView Demo"
-             BackgroundColor="#F5F7FA">
-
-    <ContentPage.Resources>
-        <ResourceDictionary>
-            <Color x:Key="PrimaryColor">#5C6BC0</Color>
-            <Color x:Key="PrimaryDark">#3949AB</Color>
-            <Color x:Key="AccentColor">#26A69A</Color>
-            <Color x:Key="ButtonColor">#667EEA</Color>
-            <Color x:Key="TextPrimary">#212121</Color>
-            <Color x:Key="TextSecondary">#757575</Color>
-            <Color x:Key="CardBackground">#FFFFFF</Color>
-        </ResourceDictionary>
-    </ContentPage.Resources>
+             BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
 
     <Grid RowDefinitions="Auto,Auto,Auto,*,Auto,Auto" Padding="16" RowSpacing="12">
 
@@ -29,44 +17,44 @@
 
         <!-- Navigation Bar -->
         <Border Grid.Row="1"
-                BackgroundColor="{StaticResource CardBackground}"
+                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
                 StrokeThickness="0"
                 Padding="12">
             <Border.StrokeShape>
                 <RoundRectangle CornerRadius="8" />
             </Border.StrokeShape>
 
-            <HorizontalStackLayout Spacing="8" HorizontalOptions="Center">
-                <Button x:Name="BackButton"
-                        Text="Back"
-                        WidthRequest="70"
-                        HeightRequest="36"
-                        FontSize="13"
-                        BackgroundColor="{StaticResource ButtonColor}"
-                        TextColor="White"
-                        Clicked="OnBackClicked" />
-                <Button x:Name="ForwardButton"
-                        Text="Forward"
-                        WidthRequest="80"
-                        HeightRequest="36"
-                        FontSize="13"
-                        BackgroundColor="{StaticResource ButtonColor}"
-                        TextColor="White"
-                        Clicked="OnForwardClicked" />
-                <Button x:Name="ReloadButton"
-                        Text="Reload"
-                        WidthRequest="70"
-                        HeightRequest="36"
-                        FontSize="13"
-                        BackgroundColor="{StaticResource ButtonColor}"
-                        TextColor="White"
-                        Clicked="OnReloadClicked" />
+            <HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
+                <ImageButton x:Name="BackButton"
+                             Source="{AppThemeBinding Light=arrow_back_light.svg, Dark=arrow_back_dark.svg}"
+                             WidthRequest="44"
+                             HeightRequest="44"
+                             Padding="10"
+                             BackgroundColor="{StaticResource ButtonColor}"
+                             CornerRadius="8"
+                             Clicked="OnBackClicked" />
+                <ImageButton x:Name="ForwardButton"
+                             Source="{AppThemeBinding Light=arrow_forward_light.svg, Dark=arrow_forward_dark.svg}"
+                             WidthRequest="44"
+                             HeightRequest="44"
+                             Padding="10"
+                             BackgroundColor="{StaticResource ButtonColor}"
+                             CornerRadius="8"
+                             Clicked="OnForwardClicked" />
+                <ImageButton x:Name="ReloadButton"
+                             Source="{AppThemeBinding Light=refresh_light.svg, Dark=refresh_dark.svg}"
+                             WidthRequest="44"
+                             HeightRequest="44"
+                             Padding="10"
+                             BackgroundColor="{StaticResource ButtonColor}"
+                             CornerRadius="8"
+                             Clicked="OnReloadClicked" />
             </HorizontalStackLayout>
         </Border>
 
         <!-- URL Bar -->
         <Border Grid.Row="2"
-                BackgroundColor="{StaticResource CardBackground}"
+                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
                 StrokeThickness="0"
                 Padding="12">
             <Border.StrokeShape>
@@ -79,25 +67,27 @@
                        Placeholder="Enter URL..."
                        Text="https://dotnet.microsoft.com"
                        FontSize="14"
+                       TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
+                       PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                        VerticalOptions="Center"
                        Completed="OnUrlSubmitted" />
-                <Button x:Name="GoButton"
-                        Grid.Column="1"
-                        Text="Go"
-                        WidthRequest="60"
-                        HeightRequest="36"
-                        FontSize="13"
-                        BackgroundColor="{StaticResource AccentColor}"
-                        TextColor="White"
-                        Clicked="OnGoClicked" />
+                <ImageButton x:Name="GoButton"
+                             Grid.Column="1"
+                             Source="{AppThemeBinding Light=send_light.svg, Dark=send_dark.svg}"
+                             WidthRequest="44"
+                             HeightRequest="44"
+                             Padding="10"
+                             BackgroundColor="{StaticResource AccentColor}"
+                             CornerRadius="8"
+                             Clicked="OnGoClicked" />
             </Grid>
         </Border>
 
         <!-- WebView -->
         <Border Grid.Row="3"
-                BackgroundColor="{StaticResource CardBackground}"
+                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
                 StrokeThickness="1"
-                Stroke="#E0E0E0">
+                Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}">
             <Border.StrokeShape>
                 <RoundRectangle CornerRadius="8" />
             </Border.StrokeShape>
@@ -111,36 +101,36 @@
 
         <!-- Action Buttons -->
         <Border Grid.Row="4"
-                BackgroundColor="{StaticResource CardBackground}"
+                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
                 StrokeThickness="0"
                 Padding="12">
             <Border.StrokeShape>
                 <RoundRectangle CornerRadius="8" />
             </Border.StrokeShape>
 
-            <HorizontalStackLayout Spacing="8" HorizontalOptions="Center">
-                <Button x:Name="LoadHtmlButton"
-                        Text="Load HTML"
-                        WidthRequest="110"
-                        HeightRequest="36"
-                        FontSize="13"
-                        BackgroundColor="{StaticResource PrimaryColor}"
-                        TextColor="White"
-                        Clicked="OnLoadHtmlClicked" />
-                <Button x:Name="EvalJsButton"
-                        Text="Run JS"
-                        WidthRequest="90"
-                        HeightRequest="36"
-                        FontSize="13"
-                        BackgroundColor="{StaticResource PrimaryColor}"
-                        TextColor="White"
-                        Clicked="OnEvalJsClicked" />
+            <HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
+                <ImageButton x:Name="LoadHtmlButton"
+                             Source="{AppThemeBinding Light=code_light.svg, Dark=code_dark.svg}"
+                             WidthRequest="44"
+                             HeightRequest="44"
+                             Padding="10"
+                             BackgroundColor="{StaticResource PrimaryColor}"
+                             CornerRadius="8"
+                             Clicked="OnLoadHtmlClicked" />
+                <ImageButton x:Name="EvalJsButton"
+                             Source="{AppThemeBinding Light=play_arrow_light.svg, Dark=play_arrow_dark.svg}"
+                             WidthRequest="44"
+                             HeightRequest="44"
+                             Padding="10"
+                             BackgroundColor="{StaticResource PrimaryColor}"
+                             CornerRadius="8"
+                             Clicked="OnEvalJsClicked" />
             </HorizontalStackLayout>
         </Border>
 
         <!-- Status Bar -->
         <Border Grid.Row="5"
-                BackgroundColor="{StaticResource PrimaryDark}"
+                BackgroundColor="{StaticResource PrimaryDarkColor}"
                 StrokeThickness="0"
                 Padding="12,8">
             <Border.StrokeShape>
diff --git a/WebViewDemo/Resources/Images/arrow_back_dark.svg b/WebViewDemo/Resources/Images/arrow_back_dark.svg
new file mode 100644
index 0000000..d41c945
--- /dev/null
+++ b/WebViewDemo/Resources/Images/arrow_back_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/arrow_back_light.svg b/WebViewDemo/Resources/Images/arrow_back_light.svg
new file mode 100644
index 0000000..a2fb627
--- /dev/null
+++ b/WebViewDemo/Resources/Images/arrow_back_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/arrow_forward_dark.svg b/WebViewDemo/Resources/Images/arrow_forward_dark.svg
new file mode 100644
index 0000000..5b55078
--- /dev/null
+++ b/WebViewDemo/Resources/Images/arrow_forward_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/arrow_forward_light.svg b/WebViewDemo/Resources/Images/arrow_forward_light.svg
new file mode 100644
index 0000000..8ddf0ed
--- /dev/null
+++ b/WebViewDemo/Resources/Images/arrow_forward_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/code_dark.svg b/WebViewDemo/Resources/Images/code_dark.svg
new file mode 100644
index 0000000..fe9b690
--- /dev/null
+++ b/WebViewDemo/Resources/Images/code_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/code_light.svg b/WebViewDemo/Resources/Images/code_light.svg
new file mode 100644
index 0000000..d92782a
--- /dev/null
+++ b/WebViewDemo/Resources/Images/code_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/play_arrow_dark.svg b/WebViewDemo/Resources/Images/play_arrow_dark.svg
new file mode 100644
index 0000000..4b84d66
--- /dev/null
+++ b/WebViewDemo/Resources/Images/play_arrow_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/play_arrow_light.svg b/WebViewDemo/Resources/Images/play_arrow_light.svg
new file mode 100644
index 0000000..d393f01
--- /dev/null
+++ b/WebViewDemo/Resources/Images/play_arrow_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/refresh_dark.svg b/WebViewDemo/Resources/Images/refresh_dark.svg
new file mode 100644
index 0000000..d4b9ff6
--- /dev/null
+++ b/WebViewDemo/Resources/Images/refresh_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/refresh_light.svg b/WebViewDemo/Resources/Images/refresh_light.svg
new file mode 100644
index 0000000..58969c5
--- /dev/null
+++ b/WebViewDemo/Resources/Images/refresh_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/send_dark.svg b/WebViewDemo/Resources/Images/send_dark.svg
new file mode 100644
index 0000000..2609b99
--- /dev/null
+++ b/WebViewDemo/Resources/Images/send_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/Resources/Images/send_light.svg b/WebViewDemo/Resources/Images/send_light.svg
new file mode 100644
index 0000000..1061506
--- /dev/null
+++ b/WebViewDemo/Resources/Images/send_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>
\ No newline at end of file
diff --git a/WebViewDemo/WebViewDemo.csproj b/WebViewDemo/WebViewDemo.csproj
index 4d84e80..42d5daa 100644
--- a/WebViewDemo/WebViewDemo.csproj
+++ b/WebViewDemo/WebViewDemo.csproj
@@ -12,4 +12,8 @@
     <ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <EmbeddedResource Include="Resources\Images\*.svg" />
+  </ItemGroup>
+
 </Project>
diff --git a/maui-linux-samples.sln b/maui-linux-samples.sln
new file mode 100644
index 0000000..6bc11f1
--- /dev/null
+++ b/maui-linux-samples.sln
@@ -0,0 +1,36 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.2.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WebViewDemo", "WebViewDemo\WebViewDemo.csproj", "{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ShellDemo", "ShellDemo\ShellDemo.csproj", "{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TodoApp", "TodoApp\TodoApp.csproj", "{5480FAA2-4085-4140-B92A-C61C23E9C67A}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Release|Any CPU.Build.0 = Release|Any CPU
+		{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {84FA1771-C9A8-4550-AD7F-0EA3DACCC3B7}
+	EndGlobalSection
+EndGlobal