[C#/MAUI/.NET6] 런타임에서 테마 변경하기

TestProject.zip

0.15MB

▶ LightThemeDictionary.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary x:Class="TestProject.Themes.LightThemeDictionary"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Color x:Key="PageBackgroundColorKey">White</Color>
    <Color x:Key="NavigationBarColorKey">WhiteSmoke</Color>
    <Color x:Key="PrimaryColorKey">WhiteSmoke</Color>
    <Color x:Key="SecondaryColorKey">Black</Color>
    <Color x:Key="PrimaryTextColorKey">Black</Color>
    <Color x:Key="SecondaryTextColorKey">White</Color>
    <Color x:Key="TertiaryTextColorKey">Gray</Color>
    <Color x:Key="TransparentColorKey">Transparent</Color>
</ResourceDictionary>

 

728x90

 

▶ LightThemeDictionary.xaml.cs

namespace TestProject.Themes;

public partial class LightThemeDictionary : ResourceDictionary
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - LightThemeDictionary()

    /// <summary>
    /// 생성자
    /// </summary>
    public LightThemeDictionary()
    {
        InitializeComponent();
    }

    #endregion
}

 

300x250

 

▶ DarkThemeDictionary.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary x:Class="TestProject.Themes.DarkThemeDictionary"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Color x:Key="PageBackgroundColorKey">Black</Color>
    <Color x:Key="NavigationBarColorKey">Teal</Color>
    <Color x:Key="PrimaryColorKey">Teal</Color>
    <Color x:Key="SecondaryColorKey">White</Color>
    <Color x:Key="PrimaryTextColorKey">White</Color>
    <Color x:Key="SecondaryTextColorKey">White</Color>
    <Color x:Key="TertiaryTextColorKey">WhiteSmoke</Color>
    <Color x:Key="TransparentColorKey">Transparent</Color>
</ResourceDictionary>

 

 

▶ DarkThemeDictionary.xaml.cs

namespace TestProject.Themes;

public partial class DarkThemeDictionary : ResourceDictionary
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - DarkThemeDictionary()

    /// <summary>
    /// 생성자
    /// </summary>
    public DarkThemeDictionary()
    {
        InitializeComponent();
    }

    #endregion
}

 

▶ App.xaml

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <ResourceDictionary Source="Themes/LightThemeDictionary.xaml" />
        <Style x:Key="LargeLabelStyleKey" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource SecondaryTextColorKey}" />
            <Setter Property="FontSize"  Value="30"                                      />
        </Style>
        <Style x:Key="MediumLabelStyleKey" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColorKey}" />
            <Setter Property="FontSize"  Value="25"                                    />
        </Style>
        <Style x:Key="SmallLabelStyleKey" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource TertiaryTextColorKey}" />
            <Setter Property="FontSize"  Value="15"                                     />
        </Style>
    </Application.Resources>
</Application>

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="{DynamicResource PageBackgroundColorKey}">
    <StackLayout>
        <Grid BackgroundColor="{DynamicResource PrimaryColorKey}">
            <Label
                Style="{StaticResource MediumLabelStyleKey}"
                VerticalOptions="Center"
                Margin="10"
                Text="Face-Palm Monkey" />
        </Grid>
        <StackLayout Margin="10">
            <Label
                Style="{StaticResource SmallLabelStyleKey}"
                Text="This monkey reacts appropriately to ridiculous assertions and actions." />
            <Label
                Style="{StaticResource SmallLabelStyleKey}"
                Text="  &#x2022; Cynical but not unfriendly." />
            <Label
                Style="{StaticResource SmallLabelStyleKey}"
                Text="  &#x2022; Seven varieties of grimaces." />
            <Label
                Style="{StaticResource SmallLabelStyleKey}"
                Text="  &#x2022; Doesn't laugh at your jokes." />
        </StackLayout>
        <Button x:Name="changeButton"
            Margin="0,30,0,0"
            HorizontalOptions="Center"
            Text="테마 변경" />
    </StackLayout>
</ContentPage>

 

▶ MainPage.xaml.cs

using TestProject.Themes;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.changeButton.Clicked += changeButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 테마 변경 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

    /// <summary>
    /// 테마 변경 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void changeButton_Clicked(object sender, EventArgs e)
    {
        ICollection<ResourceDictionary> resourceDictionaryCollection = Application.Current.Resources.MergedDictionaries;

        if(resourceDictionaryCollection != null)
        {
            if(resourceDictionaryCollection.OfType<DarkThemeDictionary>().SingleOrDefault() != null)
            {
                resourceDictionaryCollection.Clear();

                resourceDictionaryCollection.Add(new LightThemeDictionary());
            }
            else
            {
                resourceDictionaryCollection.Clear();

                resourceDictionaryCollection.Add(new DarkThemeDictionary());
            }
        }
    }

    #endregion
}