How to apply the ColorPalettesResources in runtime?

Describe the bug Hi, how can I use the ColorPaletteResources to change colors of a control in runtime? I tried to set a new palette in App.Current.Resources / App.Current.Resources.ThemeDictionaries and update the RequestedTheme by a sample from here but it doesn’t work. What I do wrong?

Steps to reproduce the bug Click the button. Project: ColorPalettesTest.zip

MainPage.xaml

<Page
    x:Class="ColorPalettesTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ColorPalettesTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   
    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">

        <Button Content="Change Palette" Click="myButton_Click"/>
        <TextBox Text="TestText" Margin="5"/>

    </StackPanel>
</Page>

MainPage.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace ColorPalettesTest {
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page {
        public MainPage() {
            this.InitializeComponent();
        }

        private void myButton_Click(object sender, RoutedEventArgs e) {
            SetColorPalette();
        }

        void SetColorPalette() {
            ColorPaletteResources palette = new ColorPaletteResources();
            palette.Accent = Colors.Green;
            palette.BaseLow = Colors.Black;
            if (App.Current.Resources.ThemeDictionaries.ContainsKey("Default"))
                App.Current.Resources.ThemeDictionaries["Default"] = palette;
            else
                App.Current.Resources.ThemeDictionaries.Add("Default", palette);
            ReloadPageTheme(this.RequestedTheme);
        }

        void ReloadPageTheme(ElementTheme startTheme) {
            if (this.RequestedTheme == ElementTheme.Dark)
                this.RequestedTheme = ElementTheme.Light;
            else if (this.RequestedTheme == ElementTheme.Light)
                this.RequestedTheme = ElementTheme.Default;
            else if (this.RequestedTheme == ElementTheme.Default)
                this.RequestedTheme = ElementTheme.Dark;

            if (this.RequestedTheme != startTheme)
                ReloadPageTheme(startTheme);
        }
    }
}

Expected behavior The ColorPaletteResources should apply in runtime

Screenshots Actual Version Info

NuGet package version: [Microsoft.WinUI 3.0.0-preview3.201113.0]

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[mdtauk]

I know there is a Figma plugin in the works, but I wonder if there is some value to including an AppTheme item template in the WinUI SDK/repo - so you can get a ResourceDictionary in your app, with all the light-weight styles there to be edited.

Can you elaborate a bit on what you mean? Are you asking for a way to import a dictionary that has a list of all the lightweight styling resources there, and nothing else? I believe the WinUI repo has a list of all the controls in resource dictionaries here.

I was wondering if this may be a good idea: In VisualStudio you go to Add a new file, and one of the options is a CustomTheme - which creates a new ResourceDictionary - pre populated with all the light-weight styles used by WinUI - which can be edited and then referenced in App.xml

Basically what the editor would export, but with the default values already there.

[mdtauk]

As far as I know, the ColorPaletteResources api will only update if you’ve defined it (before building the app) in a resource dictionary (mydictionary.xaml) that’s themed (default, light, dark, high contrast, etc.). Then the “trick” that Stephen showed will work (for most cases) in order to simulate the effect of dynamic color changes.

That being said, WinUI doesn’t really support full runtime color changes, so anything done may run into unsupported issues. For instance, accent color won’t update until you reload the app, because that color is generated/grabbed on load time from the system, unless you specifically overwrite it at the app.xaml layer.

And do you have any plans to improve ColorPalettes - could it be extended for custom colors? It would be powerful if we can add our own colors and increase the palette.

We are looking into this.

I know there is a Figma plugin in the works, but I wonder if there is some value to including an AppTheme item template in the WinUI SDK/repo - so you can get a ResourceDictionary in your app, with all the light-weight styles there to be edited.

I know the Fluent Theme Editor exists, but its not currently synced with WinUI work, and the visual refresh is changing lots of the resource names and values used in the Latest visual design.