Add theming and a Windows 3.11 inspired theme.

2025-12-16 19:14:25 +00:00 · 2025-11-16 18:22:59 +00:00
parent 9567153378
commit 4c273ef661
13 changed files with 716 additions and 5 deletions
--- a/Marechai.App/App.xaml
+++ b/Marechai.App/App.xaml
@@ -8,6 +8,7 @@
            <ResourceDictionary.MergedDictionaries>
                <!-- Load WinUI resources -->
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                
                <!-- Load Uno.UI.Toolkit resources -->
                <ToolkitResources xmlns="using:Uno.Toolkit.UI" />
            </ResourceDictionary.MergedDictionaries>
--- a/Marechai.App/App.xaml.cs
+++ b/Marechai.App/App.xaml.cs
@@ -22,6 +22,7 @@ using NewsViewModel = Marechai.App.Presentation.ViewModels.NewsViewModel;
 using PhotoDetailViewModel = Marechai.App.Presentation.ViewModels.PhotoDetailViewModel;
 using ProcessorDetailViewModel = Marechai.App.Presentation.ViewModels.ProcessorDetailViewModel;
 using ProcessorsListViewModel = Marechai.App.Presentation.ViewModels.ProcessorsListViewModel;
+using SettingsViewModel = Marechai.App.Presentation.ViewModels.SettingsViewModel;
 using SoundSynthDetailViewModel = Marechai.App.Presentation.ViewModels.SoundSynthDetailViewModel;
 using SoundSynthsListViewModel = Marechai.App.Presentation.ViewModels.SoundSynthsListViewModel;

@@ -114,6 +115,10 @@ public partial class App : Application
                                                            .ConfigureServices((context, services) =>
                                                             {
                                                                 // Register application services
+                                                                 services
+                                                                    .AddSingleton<IColorThemeService,
+                                                                         ColorThemeService>();
+
                                                                 services.AddSingleton<FlagCache>();
                                                                 services.AddSingleton<CompanyLogoCache>();
                                                                 services.AddSingleton<MachinePhotoCache>();
@@ -149,6 +154,7 @@ public partial class App : Application
                                                                 services.AddTransient<ProcessorDetailViewModel>();
                                                                 services.AddTransient<SoundSynthsListViewModel>();
                                                                 services.AddTransient<SoundSynthDetailViewModel>();
+                                                                 services.AddTransient<SettingsViewModel>();
                                                             })
                                                            .UseNavigation(RegisterRoutes));

@@ -181,6 +187,7 @@ public partial class App : Application
                       new ViewMap<ProcessorDetailPage, ProcessorDetailViewModel>(),
                       new ViewMap<SoundSynthListPage, SoundSynthsListViewModel>(),
                       new ViewMap<SoundSynthDetailPage, SoundSynthDetailViewModel>(),
+                       new ViewMap<SettingsPage, SettingsViewModel>(),
                       new DataViewMap<SecondPage, SecondViewModel, Entity>());

        routes.Register(new RouteMap("",
@@ -197,7 +204,8 @@ public partial class App : Application
                                                                       true),
                                                          new RouteMap("computers",
                                                                       views.FindByViewModel<ComputersViewModel>(),
-                                                                       Nested:
+                                                                       Nested
+                                                                       :
                                                                       [
                                                                           new RouteMap("list-computers",
                                                                               views.FindByViewModel<
@@ -208,7 +216,8 @@ public partial class App : Application
                                                                       ]),
                                                          new RouteMap("consoles",
                                                                       views.FindByViewModel<ConsolesViewModel>(),
-                                                                       Nested:
+                                                                       Nested
+                                                                       :
                                                                       [
                                                                           new RouteMap("list-consoles",
                                                                               views.FindByViewModel<
@@ -216,7 +225,8 @@ public partial class App : Application
                                                                       ]),
                                                          new RouteMap("companies",
                                                                       views.FindByViewModel<CompaniesViewModel>(),
-                                                                       Nested:
+                                                                       Nested
+                                                                       :
                                                                       [
                                                                           new RouteMap("company-details",
                                                                               views.FindByViewModel<
@@ -239,7 +249,8 @@ public partial class App : Application
                                                                                   ProcessorDetailViewModel>())
                                                                       ]),
                                                          new RouteMap("sound-synths",
-                                                                       views.FindByViewModel<SoundSynthsListViewModel>(),
+                                                                       views.FindByViewModel<
+                                                                           SoundSynthsListViewModel>(),
                                                                       Nested:
                                                                       [
                                                                           new RouteMap("sound-synth-details",
@@ -249,6 +260,8 @@ public partial class App : Application
                                                                               views.FindByViewModel<
                                                                                   MachineViewViewModel>())
                                                                       ]),
+                                                          new RouteMap("settings",
+                                                                       views.FindByViewModel<SettingsViewModel>()),
                                                          new RouteMap("Second",
                                                                       views.FindByViewModel<SecondViewModel>())
                                                      ])
--- a/Marechai.App/Marechai.App.csproj
+++ b/Marechai.App/Marechai.App.csproj
@@ -35,6 +35,7 @@
      Localization;
      Navigation;
      ThemeService;
+      Storage;
      SkiaRenderer;
      Svg;
    </UnoFeatures>
--- a/Marechai.App/Presentation/ViewModels/MainViewModel.cs
+++ b/Marechai.App/Presentation/ViewModels/MainViewModel.cs
@@ -2,7 +2,9 @@ using System;
 using System.Collections.Generic;
 using System.Threading.Tasks;
 using System.Windows.Input;
+using Marechai.App.Services;
 using Uno.Extensions.Navigation;
+using Uno.Extensions.Toolkit;

 namespace Marechai.App.Presentation.ViewModels;

@@ -25,7 +27,7 @@ public partial class MainViewModel : ObservableObject
    private bool _sidebarContentVisible = true;

    public MainViewModel(IStringLocalizer localizer, IOptions<AppConfig> appInfo, INavigator navigator,
-                         NewsViewModel    newsViewModel)
+                         NewsViewModel newsViewModel, IColorThemeService colorThemeService, IThemeService themeService)
    {
        _navigator    =  navigator;
        _localizer    =  localizer;
@@ -36,6 +38,9 @@ public partial class MainViewModel : ObservableObject

        GoToSecond = new AsyncRelayCommand(GoToSecondView);

+        // Initialize color theme service with theme service
+        _ = InitializeThemeServicesAsync(colorThemeService, themeService);
+
        // Initialize localized strings
        InitializeLocalizedStrings();

@@ -81,6 +86,22 @@ public partial class MainViewModel : ObservableObject
    public ICommand LoginLogoutCommand                        { get; }
    public ICommand ToggleSidebarCommand                      { get; }

+    private async Task InitializeThemeServicesAsync(IColorThemeService colorThemeService, IThemeService themeService)
+    {
+        try
+        {
+            // Wait for theme service to be ready
+            await themeService.InitializeAsync();
+
+            // Set the theme service reference and reapply the saved theme
+            colorThemeService.SetThemeService(themeService);
+        }
+        catch
+        {
+            // Silently fail - theme will work but without refresh on startup
+        }
+    }
+
    private void InitializeLocalizedStrings()
    {
        LocalizedStrings = new Dictionary<string, string>
--- a/Marechai.App/Presentation/ViewModels/SettingsViewModel.cs
+++ b/Marechai.App/Presentation/ViewModels/SettingsViewModel.cs
@@ -0,0 +1,154 @@
+using System.Collections.Generic;
+using System.Linq;
+using Uno.Extensions.Toolkit;
+using Marechai.App.Services;
+
+namespace Marechai.App.Presentation.ViewModels;
+
+public partial class SettingsViewModel : ObservableObject
+{
+    private readonly IStringLocalizer _localizer;
+    private readonly IThemeService _themeService;
+    private readonly IColorThemeService _colorThemeService;
+
+    [ObservableProperty]
+    private List<ThemeOption> _availableThemes = new();
+
+    [ObservableProperty]
+    private ThemeOption _selectedTheme;
+
+    [ObservableProperty]
+    private List<ColorThemeOption> _availableColorThemes = new();
+
+    [ObservableProperty]
+    private ColorThemeOption _selectedColorTheme;
+
+    public SettingsViewModel(IStringLocalizer localizer, IThemeService themeService, IColorThemeService colorThemeService)
+    {
+        _localizer = localizer;
+        _themeService = themeService;
+        _colorThemeService = colorThemeService;
+        Title = _localizer["Settings"];
+
+        // Initialize immediately to ensure UI is populated
+        InitializeOptions();
+        
+        // Wait for theme service to initialize
+        _ = InitializeThemeServiceAsync();
+    }
+
+    private async System.Threading.Tasks.Task InitializeThemeServiceAsync()
+    {
+        try
+        {
+            await _themeService.InitializeAsync();
+            
+            // Ensure the color theme service has a reference to the theme service
+            _colorThemeService.SetThemeService(_themeService);
+        }
+        catch
+        {
+            // Theme service might already be initialized
+        }
+    }
+
+    public string Title { get; }
+
+    private void InitializeOptions()
+    {
+        // Initialize Light/Dark/System Themes
+        AvailableThemes = new List<ThemeOption>
+        {
+            new() { Theme = AppTheme.Light, DisplayName = _localizer["LightTheme"] },
+            new() { Theme = AppTheme.Dark, DisplayName = _localizer["DarkTheme"] },
+            new() { Theme = AppTheme.System, DisplayName = _localizer["SystemTheme"] }
+        };
+
+        // Initialize Color Themes
+        AvailableColorThemes = new List<ColorThemeOption>
+        {
+            new() { ThemeName = "Default", DisplayName = _localizer["DefaultColorTheme"] },
+            new() { ThemeName = "Windows311", DisplayName = _localizer["Windows311Theme"] }
+        };
+
+        // Try to load saved preferences
+        LoadSavedPreferences();
+    }
+
+    private async void LoadSavedPreferences()
+    {
+        try
+        {
+            // Load current theme from ThemeService
+            var currentTheme = _themeService.Theme;
+            SelectedTheme = AvailableThemes.FirstOrDefault(t => t.Theme == currentTheme)
+                            ?? AvailableThemes.FirstOrDefault(t => t.Theme == AppTheme.System)
+                            ?? AvailableThemes.First();
+
+            // Load current color theme
+            var currentColorTheme = _colorThemeService.CurrentColorTheme;
+            SelectedColorTheme = AvailableColorThemes.FirstOrDefault(t => t.ThemeName == currentColorTheme)
+                                ?? AvailableColorThemes.First();
+        }
+        catch
+        {
+            // If loading fails, use defaults
+            SelectedTheme = AvailableThemes.FirstOrDefault(t => t.Theme == AppTheme.System)
+                            ?? AvailableThemes.First();
+            SelectedColorTheme = AvailableColorThemes.First();
+        }
+    }
+
+    partial void OnSelectedThemeChanged(ThemeOption value)
+    {
+        if (value != null)
+        {
+            ApplyTheme(value);
+        }
+    }
+
+    partial void OnSelectedColorThemeChanged(ColorThemeOption value)
+    {
+        if (value != null)
+        {
+            ApplyColorTheme(value);
+        }
+    }
+
+    private async void ApplyTheme(ThemeOption theme)
+    {
+        try
+        {
+            // Apply theme immediately using ThemeService
+            await _themeService.SetThemeAsync(theme.Theme);
+        }
+        catch
+        {
+            // Silently fail
+        }
+    }
+
+    private void ApplyColorTheme(ColorThemeOption colorTheme)
+    {
+        try
+        {
+            _colorThemeService.ApplyColorTheme(colorTheme.ThemeName);
+        }
+        catch
+        {
+            // Silently fail
+        }
+    }
+}
+
+public class ThemeOption
+{
+    public AppTheme Theme { get; set; }
+    public string DisplayName { get; set; } = string.Empty;
+}
+
+public class ColorThemeOption
+{
+    public string ThemeName { get; set; } = string.Empty;
+    public string DisplayName { get; set; } = string.Empty;
+}
--- a/Marechai.App/Presentation/Views/SettingsPage.xaml
+++ b/Marechai.App/Presentation/Views/SettingsPage.xaml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page x:Class="Marechai.App.Presentation.Views.SettingsPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:vm="using:Marechai.App.Presentation.ViewModels"
+      xmlns:utu="using:Uno.Toolkit.UI"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid utu:SafeArea.Insets="VisibleBounds" Margin="16">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+
+        <!-- Header -->
+        <TextBlock Grid.Row="0" 
+                   Text="{Binding Title}"
+                   Style="{ThemeResource TitleTextBlockStyle}"
+                   Margin="0,0,0,24"/>
+
+        <!-- Settings Content -->
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Spacing="24" MaxWidth="600" HorizontalAlignment="Left">
+                
+                <!-- Theme Section -->
+                <StackPanel Spacing="8">
+                    <TextBlock x:Uid="SettingsPage_ThemeSection_Header"
+                               Text="Appearance"
+                               Style="{ThemeResource SubtitleTextBlockStyle}"/>
+                    
+                    <TextBlock x:Uid="SettingsPage_ThemeSection_Description"
+                               Text="Select your preferred color theme"
+                               Style="{ThemeResource BodyTextBlockStyle}"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                               TextWrapping="Wrap"
+                               Margin="0,0,0,8"/>
+
+                    <!-- Brightness Theme Selector (Light/Dark/System) -->
+                    <ComboBox x:Name="BrightnessThemeSelector"
+                              x:Uid="SettingsPage_BrightnessThemeSelector"
+                              Header="Brightness"
+                              ItemsSource="{Binding AvailableThemes}"
+                              SelectedItem="{Binding SelectedTheme, Mode=TwoWay}"
+                              HorizontalAlignment="Stretch"
+                              MinWidth="250"
+                              Margin="0,0,0,12">
+                        <ComboBox.ItemTemplate>
+                            <DataTemplate>
+                                <TextBlock Text="{Binding DisplayName}" />
+                            </DataTemplate>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>
+
+                    <!-- Color Theme Selector (Default/Windows 3.11) -->
+                    <ComboBox x:Name="ColorThemeSelector"
+                              x:Uid="SettingsPage_ColorThemeSelector"
+                              Header="Color Theme"
+                              ItemsSource="{Binding AvailableColorThemes}"
+                              SelectedItem="{Binding SelectedColorTheme, Mode=TwoWay}"
+                              HorizontalAlignment="Stretch"
+                              MinWidth="250">
+                        <ComboBox.ItemTemplate>
+                            <DataTemplate>
+                                <TextBlock Text="{Binding DisplayName}" />
+                            </DataTemplate>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>
+                </StackPanel>
+
+                <!-- Placeholder for future settings sections -->
+                <StackPanel Spacing="8">
+                    <TextBlock x:Uid="SettingsPage_AboutSection_Header"
+                               Text="About"
+                               Style="{ThemeResource SubtitleTextBlockStyle}"/>
+                    
+                    <TextBlock x:Uid="SettingsPage_Version"
+                               Text="Version 1.0"
+                               Style="{ThemeResource BodyTextBlockStyle}"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                </StackPanel>
+
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>
--- a/Marechai.App/Presentation/Views/SettingsPage.xaml.cs
+++ b/Marechai.App/Presentation/Views/SettingsPage.xaml.cs
@@ -0,0 +1,14 @@
+using Marechai.App.Presentation.ViewModels;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Marechai.App.Presentation.Views;
+
+public sealed partial class SettingsPage : Page
+{
+    public SettingsPage()
+    {
+        InitializeComponent();
+    }
+
+    public SettingsViewModel? ViewModel => DataContext as SettingsViewModel;
+}
--- a/Marechai.App/Services/ColorThemeService.cs
+++ b/Marechai.App/Services/ColorThemeService.cs
@@ -0,0 +1,148 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Windows.Storage;
+using Microsoft.UI.Xaml;
+using Uno.Extensions.Toolkit;
+
+namespace Marechai.App.Services;
+
+public interface IColorThemeService
+{
+    string                CurrentColorTheme    { get; }
+    IReadOnlyList<string> AvailableColorThemes { get; }
+    void                  ApplyColorTheme(string        themeName);
+    void                  SetThemeService(IThemeService themeService);
+    void                  ReapplyCurrentTheme();
+}
+
+public class ColorThemeService : IColorThemeService
+{
+    private const string        COLOR_THEME_KEY = "ColorTheme";
+    private const string        DEFAULT_THEME   = "Default";
+    private       IThemeService _themeService;
+
+    public ColorThemeService()
+    {
+        LoadSavedTheme();
+    }
+
+    public string CurrentColorTheme { get; private set; } = DEFAULT_THEME;
+
+    public IReadOnlyList<string> AvailableColorThemes => new List<string>
+    {
+        DEFAULT_THEME,
+        "Windows311"
+    };
+
+    public void SetThemeService(IThemeService themeService)
+    {
+        _themeService = themeService;
+
+        // Reapply the current theme now that we have the theme service
+        if(CurrentColorTheme != DEFAULT_THEME) ReapplyCurrentTheme();
+    }
+
+    public void ReapplyCurrentTheme()
+    {
+        // Force refresh of the current theme
+        ApplyColorTheme(CurrentColorTheme);
+    }
+
+    public void ApplyColorTheme(string themeName)
+    {
+        if(!AvailableColorThemes.Contains(themeName)) return;
+
+        CurrentColorTheme = themeName;
+
+        // Save preference
+        try
+        {
+            ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
+            localSettings.Values[COLOR_THEME_KEY] = themeName;
+        }
+        catch
+        {
+            // Silently fail
+        }
+
+        // Apply the theme by rebuilding merged dictionaries
+        Application app = Application.Current;
+
+        if(app?.Resources == null) return;
+
+        // Store the existing merged dictionaries (except color overrides)
+        var existingDictionaries = app.Resources.MergedDictionaries
+                                      .Where(d => d.Source?.OriginalString?.Contains("ColorPaletteOverride") != true)
+                                      .ToList();
+
+        // Clear all merged dictionaries
+        app.Resources.MergedDictionaries.Clear();
+
+        // Re-add the existing dictionaries
+        foreach(ResourceDictionary dict in existingDictionaries) app.Resources.MergedDictionaries.Add(dict);
+
+        // Add the new color theme if not default
+        if(themeName != DEFAULT_THEME)
+        {
+            var newDictionary = new ResourceDictionary
+            {
+                Source = new Uri("ms-appx:///Styles/ColorPaletteOverride.xaml")
+            };
+
+            app.Resources.MergedDictionaries.Add(newDictionary);
+        }
+
+        // Force UI refresh by toggling the theme temporarily
+        ForceThemeRefresh();
+    }
+
+    private void LoadSavedTheme()
+    {
+        try
+        {
+            ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
+
+            if(localSettings.Values.ContainsKey(COLOR_THEME_KEY))
+            {
+                var savedTheme = localSettings.Values[COLOR_THEME_KEY] as string;
+
+                if(!string.IsNullOrEmpty(savedTheme) && AvailableColorThemes.Contains(savedTheme))
+                {
+                    CurrentColorTheme = savedTheme;
+                    ApplyColorTheme(CurrentColorTheme);
+                }
+            }
+        }
+        catch
+        {
+            // If loading fails, use default theme
+        }
+    }
+
+    private async void ForceThemeRefresh()
+    {
+        if(_themeService == null) return;
+
+        try
+        {
+            // Get current theme
+            AppTheme currentTheme = _themeService.Theme;
+
+            // Toggle to opposite theme briefly
+            AppTheme tempTheme = currentTheme == AppTheme.Light ? AppTheme.Dark : AppTheme.Light;
+            await _themeService.SetThemeAsync(tempTheme);
+
+            // Small delay to ensure the change is applied
+            await Task.Delay(50);
+
+            // Switch back to original theme
+            await _themeService.SetThemeAsync(currentTheme);
+        }
+        catch
+        {
+            // Silently fail
+        }
+    }
+}
--- a/Marechai.App/Strings/en/Resources.resw
+++ b/Marechai.App/Strings/en/Resources.resw
@@ -166,4 +166,50 @@
  <data name="Company was renamed on an unknown date to an unknown name." xml:space="preserve">
    <value>Company was renamed on an unknown date to an unknown name.</value>
  </data>
+
+  <data name="SettingsPage_ThemeSection_Header.Text" xml:space="preserve">
+    <value>Appearance</value>
+  </data>
+  <data name="SettingsPage_ThemeSection_Description.Text" xml:space="preserve">
+    <value>Select your preferred theme</value>
+  </data>
+  <data name="SettingsPage_ThemeSelector.Header" xml:space="preserve">
+    <value>Theme</value>
+  </data>
+  <data name="SettingsPage_ThemeChange_Notice.Text" xml:space="preserve">
+    <value>Theme changes will be applied the next time you start the application.</value>
+  </data>
+  <data name="SettingsPage_AboutSection_Header.Text" xml:space="preserve">
+    <value>About</value>
+  </data>
+  <data name="SettingsPage_Version.Text" xml:space="preserve">
+    <value>Version 1.0</value>
+  </data>
+  <data name="LightTheme" xml:space="preserve">
+    <value>Light</value>
+  </data>
+  <data name="DarkTheme" xml:space="preserve">
+    <value>Dark</value>
+  </data>
+  <data name="SystemTheme" xml:space="preserve">
+    <value>System</value>
+  </data>
+  <data name="DefaultColorTheme" xml:space="preserve">
+    <value>Default</value>
+  </data>
+  <data name="Windows311Theme" xml:space="preserve">
+    <value>Windows 3.11</value>
+  </data>
+  <data name="SettingsPage_BrightnessThemeSelector.Header" xml:space="preserve">
+    <value>Brightness</value>
+  </data>
+  <data name="SettingsPage_ColorThemeSelector.Header" xml:space="preserve">
+    <value>Color Theme</value>
+  </data>
+  <data name="SettingsPage_DesignSystemSelector.Header" xml:space="preserve">
+    <value>Design System</value>
+  </data>
+  <data name="SettingsPage_DesignSystemChange_Notice.Text" xml:space="preserve">
+    <value>Design system changes will be applied the next time you start the application. Color theme changes are applied immediately.</value>
+  </data>
 </root>
--- a/Marechai.App/Strings/es/Resources.resw
+++ b/Marechai.App/Strings/es/Resources.resw
@@ -166,4 +166,50 @@
  <data name="Company was renamed on an unknown date to an unknown name." xml:space="preserve">
    <value>La empresa fue renombrada en una fecha desconocida a un nombre desconocido.</value>
  </data>
+
+  <data name="SettingsPage_ThemeSection_Header.Text" xml:space="preserve">
+    <value>Apariencia</value>
+  </data>
+  <data name="SettingsPage_ThemeSection_Description.Text" xml:space="preserve">
+    <value>Seleccione su tema preferido</value>
+  </data>
+  <data name="SettingsPage_ThemeSelector.Header" xml:space="preserve">
+    <value>Tema</value>
+  </data>
+  <data name="SettingsPage_ThemeChange_Notice.Text" xml:space="preserve">
+    <value>Los cambios de tema se aplicarán la próxima vez que inicie la aplicación.</value>
+  </data>
+  <data name="SettingsPage_AboutSection_Header.Text" xml:space="preserve">
+    <value>Acerca de</value>
+  </data>
+  <data name="SettingsPage_Version.Text" xml:space="preserve">
+    <value>Versión 1.0</value>
+  </data>
+  <data name="LightTheme" xml:space="preserve">
+    <value>Claro</value>
+  </data>
+  <data name="DarkTheme" xml:space="preserve">
+    <value>Oscuro</value>
+  </data>
+  <data name="SystemTheme" xml:space="preserve">
+    <value>Sistema</value>
+  </data>
+  <data name="DefaultColorTheme" xml:space="preserve">
+    <value>Predeterminado</value>
+  </data>
+  <data name="Windows311Theme" xml:space="preserve">
+    <value>Windows 3.11</value>
+  </data>
+  <data name="SettingsPage_BrightnessThemeSelector.Header" xml:space="preserve">
+    <value>Brillo</value>
+  </data>
+  <data name="SettingsPage_ColorThemeSelector.Header" xml:space="preserve">
+    <value>Tema de Color</value>
+  </data>
+  <data name="SettingsPage_DesignSystemSelector.Header" xml:space="preserve">
+    <value>Sistema de Diseño</value>
+  </data>
+  <data name="SettingsPage_DesignSystemChange_Notice.Text" xml:space="preserve">
+    <value>Los cambios del sistema de diseño se aplicarán la próxima vez que inicie la aplicación. Los cambios de tema de color se aplican inmediatamente.</value>
+  </data>
 </root>
--- a/Marechai.App/Strings/fr/Resources.resw
+++ b/Marechai.App/Strings/fr/Resources.resw
@@ -166,4 +166,50 @@
  <data name="Company was renamed on an unknown date to an unknown name." xml:space="preserve">
    <value>L'entreprise a été renommée à une date inconnue en un nom inconnu.</value>
  </data>
+
+  <data name="SettingsPage_ThemeSection_Header.Text" xml:space="preserve">
+    <value>Apparence</value>
+  </data>
+  <data name="SettingsPage_ThemeSection_Description.Text" xml:space="preserve">
+    <value>Sélectionnez votre thème préféré</value>
+  </data>
+  <data name="SettingsPage_ThemeSelector.Header" xml:space="preserve">
+    <value>Thème</value>
+  </data>
+  <data name="SettingsPage_ThemeChange_Notice.Text" xml:space="preserve">
+    <value>Les modifications du thème seront appliquées au prochain démarrage de l'application.</value>
+  </data>
+  <data name="SettingsPage_AboutSection_Header.Text" xml:space="preserve">
+    <value>À propos</value>
+  </data>
+  <data name="SettingsPage_Version.Text" xml:space="preserve">
+    <value>Version 1.0</value>
+  </data>
+  <data name="LightTheme" xml:space="preserve">
+    <value>Clair</value>
+  </data>
+  <data name="DarkTheme" xml:space="preserve">
+    <value>Sombre</value>
+  </data>
+  <data name="SystemTheme" xml:space="preserve">
+    <value>Système</value>
+  </data>
+  <data name="DefaultColorTheme" xml:space="preserve">
+    <value>Par défaut</value>
+  </data>
+  <data name="Windows311Theme" xml:space="preserve">
+    <value>Windows 3.11</value>
+  </data>
+  <data name="SettingsPage_BrightnessThemeSelector.Header" xml:space="preserve">
+    <value>Luminosité</value>
+  </data>
+  <data name="SettingsPage_ColorThemeSelector.Header" xml:space="preserve">
+    <value>Thème de Couleur</value>
+  </data>
+  <data name="SettingsPage_DesignSystemSelector.Header" xml:space="preserve">
+    <value>Système de Conception</value>
+  </data>
+  <data name="SettingsPage_DesignSystemChange_Notice.Text" xml:space="preserve">
+    <value>Les modifications du système de conception seront appliquées au prochain démarrage de l'application. Les modifications du thème de couleur sont appliquées immédiatement.</value>
+  </data>
 </root>
--- a/Marechai.App/Strings/pt-BR/Resources.resw
+++ b/Marechai.App/Strings/pt-BR/Resources.resw
@@ -166,4 +166,50 @@
  <data name="Company was renamed on an unknown date to an unknown name." xml:space="preserve">
    <value>A empresa foi renomeada em uma data desconhecida para um nome desconhecido.</value>
  </data>
+
+  <data name="SettingsPage_ThemeSection_Header.Text" xml:space="preserve">
+    <value>Aparência</value>
+  </data>
+  <data name="SettingsPage_ThemeSection_Description.Text" xml:space="preserve">
+    <value>Selecione o seu tema preferido</value>
+  </data>
+  <data name="SettingsPage_ThemeSelector.Header" xml:space="preserve">
+    <value>Tema</value>
+  </data>
+  <data name="SettingsPage_ThemeChange_Notice.Text" xml:space="preserve">
+    <value>As alterações de tema serão aplicadas na próxima vez que você iniciar o aplicativo.</value>
+  </data>
+  <data name="SettingsPage_AboutSection_Header.Text" xml:space="preserve">
+    <value>Sobre</value>
+  </data>
+  <data name="SettingsPage_Version.Text" xml:space="preserve">
+    <value>Versão 1.0</value>
+  </data>
+  <data name="LightTheme" xml:space="preserve">
+    <value>Claro</value>
+  </data>
+  <data name="DarkTheme" xml:space="preserve">
+    <value>Escuro</value>
+  </data>
+  <data name="SystemTheme" xml:space="preserve">
+    <value>Sistema</value>
+  </data>
+  <data name="DefaultColorTheme" xml:space="preserve">
+    <value>Padrão</value>
+  </data>
+  <data name="Windows311Theme" xml:space="preserve">
+    <value>Windows 3.11</value>
+  </data>
+  <data name="SettingsPage_BrightnessThemeSelector.Header" xml:space="preserve">
+    <value>Brilho</value>
+  </data>
+  <data name="SettingsPage_ColorThemeSelector.Header" xml:space="preserve">
+    <value>Tema de Cor</value>
+  </data>
+  <data name="SettingsPage_DesignSystemSelector.Header" xml:space="preserve">
+    <value>Sistema de Design</value>
+  </data>
+  <data name="SettingsPage_DesignSystemChange_Notice.Text" xml:space="preserve">
+    <value>As alterações do sistema de design serão aplicadas na próxima vez que você iniciar o aplicativo. As alterações de tema de cor são aplicadas imediatamente.</value>
+  </data>
 </root>
--- a/Marechai.App/Styles/ColorPaletteOverride.xaml
+++ b/Marechai.App/Styles/ColorPaletteOverride.xaml
@@ -0,0 +1,86 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- Windows 3.11 Color Theme -->
+    <!-- Classic teal/cyan desktop background and gray window chrome -->
+    
+    <!-- System Colors -->
+    <Color x:Key="SystemAccentColor">#008080</Color>
+    <Color x:Key="SystemAccentColorLight1">#00A0A0</Color>
+    <Color x:Key="SystemAccentColorLight2">#00C0C0</Color>
+    <Color x:Key="SystemAccentColorLight3">#00E0E0</Color>
+    <Color x:Key="SystemAccentColorDark1">#006060</Color>
+    <Color x:Key="SystemAccentColorDark2">#004040</Color>
+    <Color x:Key="SystemAccentColorDark3">#002020</Color>
+
+    <!-- Background Colors - Classic Windows 3.11 teal -->
+    <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#008080" />
+    <SolidColorBrush x:Key="LayerFillColorDefaultBrush" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="LayerFillColorAltBrush" Color="#C0C0C0" />
+    
+    <!-- Card and Surface Colors - Gray window chrome -->
+    <SolidColorBrush x:Key="CardBackgroundFillColorDefaultBrush" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="CardBackgroundFillColorSecondaryBrush" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="SurfaceFillColorDefaultBrush" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="ControlFillColorDefaultBrush" Color="#C0C0C0" />
+    
+    <!-- Accent Colors - Classic teal -->
+    <SolidColorBrush x:Key="AccentFillColorDefaultBrush" Color="#008080" />
+    <SolidColorBrush x:Key="AccentFillColorSecondaryBrush" Color="#006060" />
+    <SolidColorBrush x:Key="AccentFillColorTertiaryBrush" Color="#004040" />
+    
+    <!-- Text Colors - Classic black text on gray -->
+    <SolidColorBrush x:Key="TextFillColorPrimaryBrush" Color="#000000" />
+    <SolidColorBrush x:Key="TextFillColorSecondaryBrush" Color="#404040" />
+    <SolidColorBrush x:Key="TextFillColorTertiaryBrush" Color="#606060" />
+    <SolidColorBrush x:Key="TextFillColorDisabledBrush" Color="#808080" />
+    
+    <!-- Border Colors - Classic 3D borders -->
+    <SolidColorBrush x:Key="CardStrokeColorDefaultBrush" Color="#808080" />
+    <SolidColorBrush x:Key="ControlStrokeColorDefaultBrush" Color="#808080" />
+    <SolidColorBrush x:Key="ControlStrokeColorSecondaryBrush" Color="#808080" />
+    <SolidColorBrush x:Key="DividerStrokeColorDefaultBrush" Color="#808080" />
+    
+    <!-- Button Colors -->
+    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#D0D0D0" />
+    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#808080" />
+    <SolidColorBrush x:Key="ButtonForeground" Color="#000000" />
+    
+    <!-- NavigationView Colors -->
+    <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="NavigationViewTopPaneBackground" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="#C0C0C0" />
+    
+    <!-- List and Item Colors -->
+    <SolidColorBrush x:Key="ListViewItemBackgroundBrush" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="#E0E0E0" />
+    <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="#000080" />
+    <SolidColorBrush x:Key="ListViewItemForegroundSelected" Color="#FFFFFF" />
+    
+    <!-- Subtle Fill Colors -->
+    <SolidColorBrush x:Key="SubtleFillColorTransparentBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="SubtleFillColorSecondaryBrush" Color="#E0E0E0" />
+    <SolidColorBrush x:Key="SubtleFillColorTertiaryBrush" Color="#D0D0D0" />
+    
+    <!-- Control Colors -->
+    <SolidColorBrush x:Key="ControlFillColorSecondaryBrush" Color="#D0D0D0" />
+    <SolidColorBrush x:Key="ControlFillColorTertiaryBrush" Color="#E0E0E0" />
+    <SolidColorBrush x:Key="ControlFillColorDisabledBrush" Color="#A0A0A0" />
+    
+    <!-- TextBox Colors -->
+    <SolidColorBrush x:Key="TextControlBackground" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="TextControlForeground" Color="#000000" />
+    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#808080" />
+    
+    <!-- ComboBox Colors -->
+    <SolidColorBrush x:Key="ComboBoxBackground" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="ComboBoxBackgroundPointerOver" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="ComboBoxBackgroundPressed" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="ComboBoxBackgroundFocused" Color="#FFFFFF" />
+    <SolidColorBrush x:Key="ComboBoxForeground" Color="#000000" />
+    <SolidColorBrush x:Key="ComboBoxBorderBrush" Color="#808080" />
+
+</ResourceDictionary>