Proper way to switch Dark/Light theme

[derekantrican]

Here's what I'm currently doing for switching themes:

public class ThemeManager
{
    private const string DARKTHEMENAME = "BaseDark";
    private const string LIGHTTHEMENAME = "BaseLight";

    private static StyleInclude GenerateDarkTheme()
    {
        return new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
        {
            Source = new Uri($"avares://Avalonia.Themes.Default/Accents/{DARKTHEMENAME}.xaml")
        };
    }

    private static StyleInclude GenerateLightTheme()
    {
        return new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
        {
            Source = new Uri($"avares://Avalonia.Themes.Default/Accents/{LIGHTTHEMENAME}.xaml")
        };
    }

    private static ThemeManager instance;
    public static ThemeManager Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new ThemeManager();
            }

            return instance;
        }
        set
        {
            instance = value;
        }
    }

    private List<AvaloniaObject> monitoredObjects = new List<AvaloniaObject>();

    public ThemeManager()
    {
        Settings.OnSettingsUpdated += UpdateAllThemes;
    }

    public void MonitorTheme(Window window)
    {
        monitoredObjects.Add(window);
        ModifyStyles(window.Styles);
    }

    public void MonitorTheme(Application application)
    {
        monitoredObjects.Add(application);
        ModifyStyles(application.Styles);
    }

    private void UpdateAllThemes()
    {
        foreach (AvaloniaObject obj in monitoredObjects)
        {
            if (obj is Application app)
            {
                ModifyStyles(app.Styles);
            }
            else if (obj is Window window)
            {
                ModifyStyles(window.Styles);
            }
        }
    }

    private void ModifyStyles(Styles styles)
    {
        styles.RemoveAll(styles.Where(s => s is StyleInclude styleInclude && (styleInclude.Source.OriginalString.Contains(DARKTHEMENAME) || styleInclude.Source.OriginalString.Contains(LIGHTTHEMENAME))).ToList());

        StyleInclude style = Settings.Instance.ApplicationTheme == ApplicationTheme.Dark ? GenerateDarkTheme() : GenerateLightTheme();
        styles.Insert(0, style);
    }

    public void ToggleTheme()
    {
        switch (Settings.Instance.ApplicationTheme)
        {
            case ApplicationTheme.Light:
                Settings.Instance.ApplicationTheme = ApplicationTheme.Dark;
                break;
            case ApplicationTheme.Dark:
                Settings.Instance.ApplicationTheme = ApplicationTheme.Light;
                break;
        }

        Settings.SaveSettings();
    }
}

And the App & Windows call ThemeManager.Instance.MonitorTheme(this); in their constructor. Is there a better way to do this (particularly the GenerateDarkTheme()/GenerateLightTheme() parts)?

[pr8x]

With the new Fluent theme you can just simply do: new FluentTheme { Mode = FluentThemeMode.Dark } instead of manually including the URI. Unfortunately this only works with fluent and not the default theme.
I think you only need to update the styles on the Application not the windows, that should already be enough. Although switching themes at runtime is sometimes a bit cumbersome. I ended up restarting the window to have everything update correctly (Not sure if there's a ticket for this somewhere).

[jp2masa]

Just to add: IIRC, switching themes at runtime is not officially supported (not sure if it changed in the meanwhile), although many people are doing it, including me. It definitely has some small bugs, the only one at the moment that I remember at the moment is #4058 (which is a really rare situation, happens in control catalog combo boxes in the bottom because they're defined in the Tag). So as @pr8x is suggesting, restarting the window is probably your best bet to ensure more stability, although, as I said before, I believe this is not officially supported and I would not recommend it for production.

[derekantrican]

Yeah, I was wanting to use the BaseDark theme and not the FluentTheme. Also, based on most of the answers here I think what I'm doing is not technically supported but may be the best. Thanks to all who answered

[derekantrican]

Just checking back in on this (also @grokys as a maintainer on this discussion) - is there a better way to do this with 11.0.0? Or is this mostly the same?

[maxkatz6]

@derekantrican yeah, it's quite different

https://docs.avaloniaui.net/docs/next/guides/styles-and-resources/how-to-use-theme-variants

https://docs.avaloniaui.net/docs/next/basics/user-interface/styling/themes/fluent

[maxkatz6]

You still can swap StyleInclude like before, but it won't work really well with theme variants

[grokys]

Yeah, switching themes needs to be finished off - you can do it currently but as others have said it's got a few glitches.

Now that 0.10 is out hopefully we can get this done in one of the upcoming 0.10.x releases.

[Lucasjmz]

Do you know if it's possible to create a dark and light theme by hand, I'm thinking of a dictionary that could vary dynamically according to a toggleswitch? Without using RequestedThemeVariant

[zalito12]

This is the way to go atm:

if (Application.Current!.ActualThemeVariant == ThemeVariant.Light)
{
    Application.Current!.RequestedThemeVariant = ThemeVariant.Dark;
}
else
{
    Application.Current!.RequestedThemeVariant = ThemeVariant.Light;
}

See: #11893 (reply in thread)