open-maui/OpenMaui Samples
2
0
Fork 0
Code Issues Releases

Icon work - and apptheming

Browse Source
This commit is contained in:
David H. Friedel Jr.
2026-01-11 13:34:36 -05:00
parent 50cc186d6d
commit 8531f2b972
50 changed files with 441 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
TodoApp/App.cs
View File

@@ -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;
}
}

76
TodoApp/App.xaml Normal file
View File

@@ -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>

35
TodoApp/App.xaml.cs Normal file
View File

@@ -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;
}
}

35
TodoApp/Pages/NewTodoPage.xaml
View File

@@ -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>

44
TodoApp/Pages/TodoDetailPage.xaml
View File

@@ -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" />

22
TodoApp/Pages/TodoListPage.xaml
View File

@@ -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>

32
TodoApp/Pages/TodoListPage.xaml.cs
View File

@@ -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;
}
}

1
TodoApp/Resources/Images/add_white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 178 B

1
TodoApp/Resources/Images/delete_white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

1
TodoApp/Resources/Images/save_white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 174 B

6
TodoApp/TodoApp.csproj
View File

@@ -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>