[Bug]: Control theme mismatch at startup

[mckenziegSR]

Environment

Windows 11, net10.0, pkg MewUI.Windows 16.0 Direct2D

Reproduction steps

When upgrading my apps from 15.2 to 16.0, theme for interactable controls defaults to a light theme regardless of the currently selected theme. This is noticeable when the theme is set to dark or system (with a dark system theme). Controls update to the correct color when the mouse hovers over them or when the theme is updated programmatically at runtime.

Expected behavior

Controls follow the currently selected theme at launch.

Actual behavior

Controls default to light theme at launch.

Minimal repro / code / screenshots / logs

Before submitting

• I searched for existing issues and did not find a duplicate.
• I included enough information to reproduce or investigate the problem.

[al6uiz]

Thank you for the report. I cannot reproduce the issue with the following configuration:

Application
    .Create()
    .UseAccent(Accent.Purple)
    .UseTheme(ThemeVariant.Dark) // or ThemeVariant.System
    ...

Could you share the code you use to configure the theme?

[mckenziegSR]

Here is my UI related code for one of the apps in the screenshots I provided. I have tried changing the code to set the theme using both ThemeManager.Default = ThemeVariant.System and .UseTheme(ThemeVariant.Dark) to no avail.

using System.Collections.ObjectModel;
using System.Data;
using System.Runtime.InteropServices;
using Aprillz.MewUI;
using Aprillz.MewUI.Controls;
using Aprillz.MewUI.Platform;

ObservableCollection<ColumnItem> cItems = [];
ObservableValue<string> statusText = new("Choose a PRR CSV file.");
ObservableValue<double> progress = new(0.0);

// Create controls
TextBox csvPathTextBox = null!;
Button browseButton = null!;
TextBox passwordBox = null!;
GridView selectableColumnsGridView = null!;
GroupBox consentGroupBox = null!;
CheckBox optionY = null!;
CheckBox optionX = null!;
CheckBox optionM = null!;
CheckBox optionN = null!;
CheckBox overwriteCheckBox = null!;
CheckBox deleteSourceCheckBox = null!;
Button processButton = null!;
Grid statusBar = null!;

Window window = BuildMainWindow();

// ---------- Controls ----------

Window BuildMainWindow()
{
    Window win = new Window()
        .Title("PRR CSV Processor")
        .Resizable(450, 625, minWidth: 435, minHeight: 400)
        .Content(
            new Grid()
                .Rows("Auto,Auto,Auto,*,Auto,Auto")
                .Columns("*")
                .Spacing(5)
                .Padding(5, -5, 5, 5)
                .Children(
                BuildTopRow().Row(1),
                BuildConsentOptions().Row(2),
                BuildColumnsGroupBox().Row(3),
                BuildBottomControls().Row(4),
                BuildStatusBar().Row(5)
            )
        );

    return win;
}

FrameworkElement BuildTopRow()
{
    return new Grid()
    .Rows("Auto,Auto")
    .Columns("Auto,*,Auto")
    .Spacing(5)
    .Children(
        new Label()
            .Text("CSV File Path:")
            .CenterVertical()
            .Row(0)
            .Column(0),

        new TextBox()
            .Ref(out csvPathTextBox)
            .Placeholder("Drop CSV file or browse...")
            .IsReadOnly(true)
            .Row(0)
            .Column(1),

        new Button()
            .Ref(out browseButton)
            .Content("Browse...")
            .Width(75)
            .Row(0)
            .Column(2),

        new Label()
            .Text("Password:")
            .CenterVertical()
            .Row(1)
            .Column(0),

        new TextBox()
            .Ref(out passwordBox)
            .Placeholder("Enter password")
            .Row(1)
            .Column(1)
            .ColumnSpan(2)
    );
}

FrameworkElement BuildConsentOptions()
{
    return new GroupBox()
    .Ref(out consentGroupBox)
    .Header("Consent Options To Keep")
    .Content(
        new StackPanel()
            .Vertical()
            .Spacing(3)
            .Children(
                new CheckBox()
                    .Ref(out optionY)
                    .Content("Y - Public and military PRRs"),
                new CheckBox()
                    .Ref(out optionX)
                    .Content("X - Public PRRs only"),
                new CheckBox()
                    .Ref(out optionM)
                    .Content("M - Military PRRs only"),
                new CheckBox()
                    .Ref(out optionN)
                    .Content("N - No consent (except photography)")
            )
    );
}

FrameworkElement BuildColumnsGroupBox()
{
    return new GroupBox()
    .Header("Columns To Keep")
    .Content(
        new GridView()
            .Ref(out selectableColumnsGridView)
            .ZebraStriping()
            .OnMouseDown(e =>
            {
                var index = selectableColumnsGridView.SelectedIndex;
                if (index < 0 || !e.LeftButton) return;
                cItems[index].IsSelected.Value = !cItems[index].IsSelected.Value;
            })
            .Columns(
                new GridViewColumn<ColumnItem>()
                    .Header("")
                    .Width(36)
                    .Bind(
                        build: _ => new CheckBox().Padding(0).Center(),
                        bind: (view, item) => view.BindIsChecked(item.IsSelected)),

                new GridViewColumn<ColumnItem>()
                    .Header("Name")
                    .Width(350)
                    .Bind(
                        build: ctx => new TextBlock()
                                .Register(ctx, "Name")
                                .Bold(),
                        bind: (_, item, _, ctx) => ctx.Get<TextBlock>("Name").BindText(item.Name)
                    )
            )
            .ItemsSource(cItems)
    );
}

FrameworkElement BuildBottomControls()
{
    return new Grid()
    .Rows("Auto")
    .Columns("Auto,*,Auto")
    .Spacing(5)
    .Children(
        new StackPanel()
            .Horizontal()
            .Spacing(5)
            .Children(
                new CheckBox()
                    .Ref(out overwriteCheckBox)
                    .Content("Overwrite Existing")
                    .IsChecked(true),
                new CheckBox()
                    .Ref(out deleteSourceCheckBox)
                    .Content("Delete Source"))
            .Column(0),

        new Label()
            .Text("")
            .Column(1),

        new Button()
            .Ref(out processButton)
            .Content("Process")
            .Width(75)
            .Column(2)
    );
}

FrameworkElement BuildStatusBar()
{
    Grid bar = new();
    (double l, double t, double r, double b) m = (-15, 0, -15, -17);
    (double l, double t, double r, double b) p = (10, 0, 10, 10);

    Style statusBackgroundStyle = new(typeof(Label))
    {
        BasedOn = Style.ForType<Label>(),
        Setters =
        [
            Setter.Create(Control.BackgroundProperty, t => t.Palette.ButtonFace)
        ],
    };

    Style statusLabelStyle = new(typeof(Label))
    {
        BasedOn = Style.ForType<Label>(),
        Setters =
        [
            Setter.Create(Control.ForegroundProperty, t => t.Palette.WindowText.WithAlpha(217))
        ],
    };

    bar.StyleSheet = new StyleSheet();
    bar.StyleSheet.Define("statusBackgroundStyle", statusBackgroundStyle);
    bar.StyleSheet.Define("statusLabelStyle", statusLabelStyle);

    bar.Ref(out statusBar)
    .Columns("*")
    .Margin(m.l, m.t, m.r, m.b)
    .Padding(p.l, p.t + 5, p.r, p.b)
    .Children(
        new Label { StyleName = "statusBackgroundStyle" }
            .Margin(m.l, m.t - 5, m.r, m.b)
            .Padding(p.l, p.t, p.r, p.b)
            .Text(" ")
            .Column(0),

        new DockPanel()
            .Spacing(5)
            .Children(
                new Label()
                    .Text("☰")
                    .ToolTip("Toggle Theme")
                    .OnMouseUp(e =>
                    {
                        if (e.Button != MouseButton.Left) return;
                        Application.Current.SetTheme(Application.Current.Theme.IsDark ? ThemeVariant.Light : ThemeVariant.Dark);
                    })
                    .DockLeft(),

                new Label { StyleName = "statusLabelStyle" }
                    .BindText(statusText)
                    .DockLeft(),

                new ProgressBar()
                    .Minimum(0)
                    .Maximum(100)
                    .BindValue(progress)
                    .Width(85)
                    .CenterVertical()
                    .HorizontalAlignment(HorizontalAlignment.Right)
                    .DockRight()
            )
            .Column(0)
    );

    return bar;
}

Win32Platform.Register();
Direct2DBackend.Register();
Application.Run(window);

sealed class ColumnItem(ObservableValue<string> name)
{
    public ObservableValue<bool> IsSelected { get; set; } = new ObservableValue<bool>(false);
    public ObservableValue<string> Name { get; } = name;
}

My current workaround is to just toggle the theme on window load.

.OnLoaded(() =>
        {
            ThemeVariant current = Application.Current.ThemeMode;
            Application.Current.SetTheme(Application.Current.Theme.IsDark ? ThemeVariant.Light : ThemeVariant.Dark);
            Application.Current.SetTheme(current);
        })

[al6uiz]

It still looks good. Is there any other information available?

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net10.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
    <PublishAot>true</PublishAot>
    <InvariantGlobalization>true</InvariantGlobalization>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Aprillz.MewUI" Version="0.16.0" />
  </ItemGroup>

</Project>

using System.Collections.ObjectModel;

using Aprillz.MewUI;
using Aprillz.MewUI.Controls;

Win32Platform.Register();
Direct2DBackend.Register();

ThemeManager.Default = ThemeVariant.Dark;

ObservableCollection<ColumnItem> cItems = [];
ObservableValue<string> statusText = new("Choose a PRR CSV file.");
ObservableValue<double> progress = new(0.0);

// Create controls
TextBox csvPathTextBox = null!;
Button browseButton = null!;
TextBox passwordBox = null!;
GridView selectableColumnsGridView = null!;
GroupBox consentGroupBox = null!;
CheckBox optionY = null!;
CheckBox optionX = null!;
CheckBox optionM = null!;
CheckBox optionN = null!;
CheckBox overwriteCheckBox = null!;
CheckBox deleteSourceCheckBox = null!;
Button processButton = null!;
Grid statusBar = null!;

Window window = BuildMainWindow();

// ---------- Controls ----------

Window BuildMainWindow()
{
    Window win = new Window()
        .Title("PRR CSV Processor")
        .Resizable(450, 625, minWidth: 435, minHeight: 400)
        .Content(
            new Grid()
                .Rows("Auto,Auto,Auto,*,Auto,Auto")
                .Columns("*")
                .Spacing(5)
                .Padding(5, -5, 5, 5)
                .Children(
                BuildTopRow().Row(1),
                BuildConsentOptions().Row(2),
                BuildColumnsGroupBox().Row(3),
                BuildBottomControls().Row(4),
                BuildStatusBar().Row(5)
            )
        );

    return win;
}

FrameworkElement BuildTopRow()
{
    return new Grid()
    .Rows("Auto,Auto")
    .Columns("Auto,*,Auto")
    .Spacing(5)
    .Children(
        new Label()
            .Text("CSV File Path:")
            .CenterVertical()
            .Row(0)
            .Column(0),

        new TextBox()
            .Ref(out csvPathTextBox)
            .Placeholder("Drop CSV file or browse...")
            .IsReadOnly(true)
            .Row(0)
            .Column(1),

        new Button()
            .Ref(out browseButton)
            .Content("Browse...")
            .Width(75)
            .Row(0)
            .Column(2),

        new Label()
            .Text("Password:")
            .CenterVertical()
            .Row(1)
            .Column(0),

        new TextBox()
            .Ref(out passwordBox)
            .Placeholder("Enter password")
            .Row(1)
            .Column(1)
            .ColumnSpan(2)
    );
}

FrameworkElement BuildConsentOptions()
{
    return new GroupBox()
    .Ref(out consentGroupBox)
    .Header("Consent Options To Keep")
    .Content(
        new StackPanel()
            .Vertical()
            .Spacing(3)
            .Children(
                new CheckBox()
                    .Ref(out optionY)
                    .Content("Y - Public and military PRRs"),
                new CheckBox()
                    .Ref(out optionX)
                    .Content("X - Public PRRs only"),
                new CheckBox()
                    .Ref(out optionM)
                    .Content("M - Military PRRs only"),
                new CheckBox()
                    .Ref(out optionN)
                    .Content("N - No consent (except photography)")
            )
    );
}

FrameworkElement BuildColumnsGroupBox()
{
    return new GroupBox()
    .Header("Columns To Keep")
    .Content(
        new GridView()
            .Ref(out selectableColumnsGridView)
            .ZebraStriping()
            .OnMouseDown(e =>
            {
                var index = selectableColumnsGridView.SelectedIndex;
                if (index < 0 || !e.LeftButton) return;
                cItems[index].IsSelected.Value = !cItems[index].IsSelected.Value;
            })
            .Columns(
                new GridViewColumn<ColumnItem>()
                    .Header("")
                    .Width(36)
                    .Bind(
                        build: _ => new CheckBox().Padding(0).Center(),
                        bind: (view, item) => view.BindIsChecked(item.IsSelected)),

                new GridViewColumn<ColumnItem>()
                    .Header("Name")
                    .Width(350)
                    .Bind(
                        build: ctx => new TextBlock()
                                .Register(ctx, "Name")
                                .Bold(),
                        bind: (_, item, _, ctx) => ctx.Get<TextBlock>("Name").BindText(item.Name)
                    )
            )
            .ItemsSource(cItems)
    );
}

FrameworkElement BuildBottomControls()
{
    return new Grid()
    .Rows("Auto")
    .Columns("Auto,*,Auto")
    .Spacing(5)
    .Children(
        new StackPanel()
            .Horizontal()
            .Spacing(5)
            .Children(
                new CheckBox()
                    .Ref(out overwriteCheckBox)
                    .Content("Overwrite Existing")
                    .IsChecked(true),
                new CheckBox()
                    .Ref(out deleteSourceCheckBox)
                    .Content("Delete Source"))
            .Column(0),

        new Label()
            .Text("")
            .Column(1),

        new Button()
            .Ref(out processButton)
            .Content("Process")
            .Width(75)
            .Column(2)
    );
}

FrameworkElement BuildStatusBar()
{
    Grid bar = new();
    (double l, double t, double r, double b) m = (-15, 0, -15, -17);
    (double l, double t, double r, double b) p = (10, 0, 10, 10);

    Style statusBackgroundStyle = new(typeof(Label))
    {
        BasedOn = Style.ForType<Label>(),
        Setters =
        [
            Setter.Create(Control.BackgroundProperty, t => t.Palette.ButtonFace)
        ],
    };

    Style statusLabelStyle = new(typeof(Label))
    {
        BasedOn = Style.ForType<Label>(),
        Setters =
        [
            Setter.Create(Control.ForegroundProperty, t => t.Palette.WindowText.WithAlpha(217))
        ],
    };

    bar.StyleSheet = new StyleSheet();
    bar.StyleSheet.Define("statusBackgroundStyle", statusBackgroundStyle);
    bar.StyleSheet.Define("statusLabelStyle", statusLabelStyle);

    bar.Ref(out statusBar)
    .Columns("*")
    .Margin(m.l, m.t, m.r, m.b)
    .Padding(p.l, p.t + 5, p.r, p.b)
    .Children(
        new Label { StyleName = "statusBackgroundStyle" }
            .Margin(m.l, m.t - 5, m.r, m.b)
            .Padding(p.l, p.t, p.r, p.b)
            .Text(" ")
            .Column(0),

        new DockPanel()
            .Spacing(5)
            .Children(
                new Label()
                    .Text("☰")
                    .ToolTip("Toggle Theme")
                    .OnMouseUp(e =>
                    {
                        if (e.Button != MouseButton.Left) return;
                        Application.Current.SetTheme(Application.Current.Theme.IsDark ? ThemeVariant.Light : ThemeVariant.Dark);
                    })
                    .DockLeft(),

                new Label { StyleName = "statusLabelStyle" }
                    .BindText(statusText)
                    .DockLeft(),

                new ProgressBar()
                    .Minimum(0)
                    .Maximum(100)
                    .BindValue(progress)
                    .Width(85)
                    .CenterVertical()
                    .HorizontalAlignment(HorizontalAlignment.Right)
                    .DockRight()
            )
            .Column(0)
    );

    return bar;
}

Application.Run(window);

sealed class ColumnItem(ObservableValue<string> name)
{
    public ObservableValue<bool> IsSelected { get; set; } = new ObservableValue<bool>(false);
    public ObservableValue<string> Name { get; } = name;
}

[mckenziegSR]

I have determined that placing Win32Platform.Register() before building the window fixes the error. If the platform registration is placed after the main window is built, the error appears.

Try placing Win32Platform.Register() after Window window = BuildMainWindow() in the code to produce the error.

[al6uiz]

After reviewing the issue, it appears that the problem is caused not by the position of Win32Platform.Register(), but by when ThemeManager.Default = ThemeVariant.Dark; is set.

The documentation comment for ThemeManager.Default currently states:

// Summary:
//     Gets or sets the default theme variant. This property must be set before the
//     application starts.

This description may not have been sufficiently clear. More precisely, the property is intended to be set before any controls are created.

Therefore, either set ThemeManager.Default before creating the main window instance, or use the recommended application builder pattern below. BuildMainWindow() receives the method that creates the main window, ensuring that the window is built only after the theme has been configured:

Application
    .Create()
    .UseTheme(ThemeVariant.Dark)
    .BuildMainWindow(() => YourBuildMainWindowMethod())
    .Run();

I will also investigate whether the underlying issue can be fixed.

[mckenziegSR]

That is not the case on my end. I was not specifying the theme in my original program as the default is set to system. When I do specify the theme using ThemeManager.Default = ThemeVariant.System, it does not matter if I do so before or after the controls are set. The only factor that determines if the bug occurs on my system is the place Win32Platform.Register() is called.

From my testing the following occured:

	Theme Set Before	Theme Set After
Platform Register Before	No Bug	No Bug
Platform Register After	Bug	Bug

I will switch to using the recommended application builder pattern for my apps going forward. I appreciate your assistance on this matter as well as your work on MewUI. It's a great project!