256 customize the modus controls colors

DemoApp/DemoApp/DemoApp.csproj

@@ -98,6 +98,12 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <Compile Update="Resources\Styles\DarkThemeColors.xaml.cs">
+	    <DependentUpon>DarkThemeColors.xaml</DependentUpon>
+	  </Compile>
+	  <Compile Update="Resources\Styles\LightThemeColors.xaml.cs">
+	    <DependentUpon>LightThemeColors.xaml</DependentUpon>
+	  </Compile>
 	  <Compile Update="Views\SegmentedControlSamplePage.xaml.cs">
 	    <DependentUpon>SegmentedControlSamplePage.xaml</DependentUpon>
 	  </Compile>
@@ -162,6 +168,12 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <MauiXaml Update="Resources\Styles\DarkThemeColors.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	  <MauiXaml Update="Resources\Styles\LightThemeColors.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Views\SliderSamplePage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

DemoApp/DemoApp/Resources/Styles/DarkThemeColors.xaml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="DemoApp.Resources.Styles.DarkThemeColors">
+
+  <Color x:Key="Primary">yellow</Color>
+  <Color x:Key="PrimaryLight">lightyellow</Color>
+  <Color x:Key="PrimaryDark">#ffeb3b</Color>
+
+  <Color x:Key="DefaultTextColor">#FFFFFF</Color>
+  <Color x:Key="AlternateTextColor">#252A2E</Color>
+
+  <Color x:Key="Danger">#d32f2f</Color>
+  <Color x:Key="DangerLight">#ef5350</Color>
+  <Color x:Key="DangerDark">#c62828</Color>
+
+  <Color x:Key="Tertiary">#3f51b5</Color>
+  <Color x:Key="TertiaryLight">#c5cae9</Color>
+  <Color x:Key="TertiaryDark">#1a237e</Color>
+
+  <Color x:Key="Warning">#ed6c02</Color>
+  <Color x:Key="WarningLight">#ff9800</Color>
+  <Color x:Key="WarningDark">#e65100</Color>
+
+  <Color x:Key="Success">#2e7d32</Color>
+  <Color x:Key="SuccessLight">#4caf50</Color>
+  <Color x:Key="SuccessDark">#1b5e20</Color>
+
+  <Color x:Key="Secondary">#9c27b0</Color>
+  <Color x:Key="SecondaryLight">#ba68c8</Color>
+  <Color x:Key="SecondaryDark">#7b1fa2</Color>
+
+  <Color x:Key="Transparent">transparent</Color>
+</ResourceDictionary>

DemoApp/DemoApp/Resources/Styles/DarkThemeColors.xaml.cs

@@ -0,0 +1,9 @@
+namespace DemoApp.Resources.Styles;
+
+public partial class DarkThemeColors : ResourceDictionary
+{
+	public DarkThemeColors()
+	{
+		InitializeComponent();
+	}
+}

DemoApp/DemoApp/Resources/Styles/LightThemeColors.xaml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                    x:Class="DemoApp.Resources.Styles.LightThemeColors">
+  <Color x:Key="Primary">#019aeb</Color>
+  <Color x:Key="PrimaryLight">#DCEDF9</Color>
+  <Color x:Key="PrimaryDark">#004f83</Color>
+
+  <Color x:Key="DefaultTextColor">#FFFFFF</Color>
+  <Color x:Key="AlternateTextColor">#252A2E</Color>
+
+  <Color x:Key="Danger">#DA212C</Color>
+  <Color x:Key="DangerLight">#FBD4D7</Color>
+  <Color x:Key="DangerDark">#AB1F26</Color>
+
+  <Color x:Key="Tertiary">#353A40</Color>
+  <Color x:Key="TertiaryLight">#E0E1E9</Color>
+  <Color x:Key="TertiaryDark">#171C1E</Color>
+
+  <Color x:Key="Warning">#FBAD26</Color>
+  <Color x:Key="WarningLight">#fff5e4</Color>
+  <Color x:Key="WarningDark">#e49325</Color>
+
+  <Color x:Key="Success">#1E8A44</Color>
+  <Color x:Key="SuccessLight">#E0ECCF</Color>
+  <Color x:Key="SuccessDark">#006638</Color>
+
+  <Color x:Key="Secondary">#6A6E79</Color>
+  <Color x:Key="SecondaryLight">#B7B9C3</Color>
+  <Color x:Key="SecondaryDark">#585C65</Color>
+
+  <Color x:Key="Transparent">transparent</Color>
+</ResourceDictionary>

DemoApp/DemoApp/Resources/Styles/LightThemeColors.xaml.cs

@@ -0,0 +1,9 @@
+namespace DemoApp.Resources.Styles;
+
+public partial class LightThemeColors : ResourceDictionary
+{
+	public LightThemeColors()
+	{
+		InitializeComponent();
+	}
+}

DemoApp/DemoApp/ViewModels/SpinnerPageViewModel.cs

@@ -1,34 +1,24 @@
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 using System.Windows.Input;
 using Trimble.Modus.Components;
 using Trimble.Modus.Components.Enums;
 
 namespace DemoApp.ViewModels
 {
-    public class SpinnerSamplePageViewModel : ObservableObject
+    public partial class SpinnerSamplePageViewModel : ObservableObject
     {
-        public ICommand SpinnerCommand { get; set; }
-        private SpinnerColor _spinnerColor;
-        public SpinnerColor SpinnerColor {
-            get
-            {
-                return _spinnerColor;
-            }
-            set
-            {
-                _spinnerColor = value;
-                OnPropertyChanged(nameof(SpinnerColor));
-            }
-        }
+
+        [ObservableProperty] private SpinnerColor spinnerColor;
         public SpinnerSamplePageViewModel()
         {
             SpinnerColor = SpinnerColor.Primary;
-            SpinnerCommand = new Command(methodsCommand);        }
-
-        private void methodsCommand(object obj)
-        {
-            TMRadioButtonEventArgs e = (TMRadioButtonEventArgs)obj;
-            SpinnerColor = ((string)e.Value == "Primary") ? SpinnerColor.Primary : SpinnerColor.Secondary;
+        }
+      
+        [RelayCommand]
+        private void SpinnerSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            SpinnerColor = e.RadioButtonIndex == 0 ? SpinnerColor.Primary : SpinnerColor.Secondary;
         }
     }
 }

DemoApp/DemoApp/ViewModels/SwitchViewModel.cs

@@ -1,15 +1,32 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
 using Trimble.Modus.Components;
+using Trimble.Modus.Components.Enums;
 
 namespace DemoApp.ViewModels
 {
     public partial class SwitchSamplePageViewModel : ObservableObject
     {
+
+        [ObservableProperty] private bool isEnabled = true;
+        [ObservableProperty] private SwitchSize switchSize;
         public SwitchSamplePageViewModel()
         {
 
         }
+
+        [RelayCommand]
+        public void EnableSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            IsEnabled = e.RadioButtonIndex == 0;
+        }
+
+        [RelayCommand]
+        public void SizeSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            SwitchSize = e.RadioButtonIndex == 0 ? SwitchSize.Medium : SwitchSize.Large;
+        }
+
         [RelayCommand]
         private void Switch(object e)
         {

DemoApp/DemoApp/ViewModels/TMChipsPageViewModel.cs

@@ -14,7 +14,19 @@ internal partial class ChipsSamplePageViewModel : ObservableObject
         public ObservableCollection<ChipsItem> ChipsCollection { get; } = new ObservableCollection<ChipsItem>();
 
         [ObservableProperty]
-        private ChipSize chipSize;
+        private ChipSize chipSize;
+
+        [ObservableProperty]
+        private ChipState chipState;
+
+        [ObservableProperty]
+        private ChipStyle chipStyle;
+
+        [ObservableProperty]
+        private ChipType chipType;
+
+        [ObservableProperty]
+        private bool isEnabled = true;
 
         public ChipsSamplePageViewModel()
         {
@@ -28,12 +40,36 @@ public ChipsSamplePageViewModel()
         public void SizeSelectionChanged(TMRadioButtonEventArgs e)
         {
             ChipSize = e.RadioButtonIndex == 0 ? ChipSize.Default : ChipSize.Small;
+        }
+
+        [RelayCommand]
+        public void EnableSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            IsEnabled = e.RadioButtonIndex == 0;
+        }
+
+        [RelayCommand]
+        public void StateSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            ChipState = e.RadioButtonIndex == 0 ? ChipState.Default : ChipState.Error;
+        }
+
+        [RelayCommand]
+        public void StyleSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            ChipStyle = e.RadioButtonIndex == 0 ? ChipStyle.Fill : ChipStyle.Outline;
+        }
+
+        [RelayCommand]
+        public void TypeSelectionChanged(TMRadioButtonEventArgs e)
+        {
+            ChipType = e.RadioButtonIndex == 0 ? ChipType.Filter : ChipType.Input;
         }
 
         [RelayCommand]
         public void ClickChip(object tMChips)
         {
-            Console.WriteLine("Clicked "+((TMChips)tMChips).Title);
+            Console.WriteLine("Clicked " + ((TMChips)tMChips).Title);
         }
 
         [RelayCommand]
@@ -45,7 +81,7 @@ public void CloseChip(object tMChips)
             {
                 ChipsCollection.Remove(chipToRemove);
             }
-        }        
+        }
         [RelayCommand]
         public void AddChip()
         {

DemoApp/DemoApp/ViewModels/TableViewModel.cs

@@ -1,16 +1,16 @@
 using CommunityToolkit.Mvvm.ComponentModel;
-using DemoApp.Constant;
+using DemoApp.Helper;
 using DemoApp.Models;
-using Microsoft.Maui.Controls;
 using Newtonsoft.Json;
+using System.Collections.ObjectModel;
 
 namespace DemoApp.ViewModels;
 public partial class TableViewModel : ObservableObject
 {
     Random rnd = new Random();
 
     [ObservableProperty]
-    private List<User> _users;
+    private ObservableCollection<User> _users;
     [ObservableProperty]
     private User _selectedItem;
     [ObservableProperty]
@@ -27,8 +27,12 @@ public partial class TableViewModel : ObservableObject
 
     public TableViewModel()
     {
-        Users = new List<User>();
-        LoadData();
+        InitialzeUsers();
+    }
+
+    private async void InitialzeUsers()
+    {
+        Users = await UserDataCreator.LoadData();
     }
 
     private async void LoadData()

DemoApp/DemoApp/Views/AlertSamplePage.xaml

@@ -6,8 +6,8 @@
              xmlns:viewmodels="clr-namespace:DemoApp.ViewModels"
              x:DataType="viewmodels:AlertSamplePageViewModel"
              Title="Alerts">
-    <VerticalStackLayout>
-      <VerticalStackLayout x:Name="alertLayout" />
+    <VerticalStackLayout Padding="10">
+      <VerticalStackLayout x:Name="alertLayout"/>
       <Label Text="Alert Type"
              FontAttributes="Bold"
              FontSize="Large"
@@ -48,4 +48,4 @@
               Margin="50, 10"
               Command="{Binding ShowAlertCommand}" />
     </VerticalStackLayout>
-</ContentPage>
+</ContentPage>