How do I set different primary/secondary colors and specific brushes for Light and Dark themes?

[NoizeDaemon]

I'm on Avalonia 11.0.0-rc1.1 and on Material.Avalonia 3.0.0-avalonia11-preview4.181-nightly.

How can I achieve:
Light theme with ColorA as PrimaryColor and ColorB as SecondaryColor
Dark theme with ColorC as PrimaryColor and ColorD as SecondaryColor

Or:
Light theme with <SolidColorBrush x:Key='MaterialDesignPaper'>Pink</SolidColorBrush>
while Dark keeps the standard value?

I looked into ResourceDictionary, but that seems to be an Avalonia feature that is handled differently here.

Do I have to change these values in code everytime I switch themes?
Can I save a theme (like the BaseTheme, PrimaryColor and SecondaryColor) in a specific file?

I tried to work with the "Advanced Theming" page, but honestly I got stuck.
I managed to create a theme at runtime, and I am assuming to switch themes I'd need to create another one and switch to that.
However, it would be much nice to have some themes pre-defined in file or dictionary.

Also how would I change the values of certain brushes (at runtime or pre-defined)?

Any help or pointer in the right direction would be appreciated!

[SKProCH]

Hello. There is 2 ways:

1. Using "native" Avalonia way. You can specify resources after MaterialTheme, so Avalonia would find it first during resources lookup. So, you need a something like this:

   <x:MaterialTheme ... />
   <Style>
     <Style.Resources>
       <ResourceDictionary>
         Here is your dictionary for Dark and Light themes
       </ResourceDictionary>
     </Style.Resources>
   </Style>

   It would work perfectly, since Avalonia will find your resources first, but doesn't have animation for switching themes.
2. Using our themes. You need to create ITheme. You can use Theme.Create as described here or just use ctor of Theme class. After all replace MaterialTheme with MaterialThemeBase in you App.axaml, and pass the theme to it. Example here.
   MaterialTheme is just a wrapper for MaterialThemeBase which will create ITheme from specified primary, secondary and mode in xaml, and pass it to MaterialThemeBase.

[NoizeDaemon]

I guess I had a brain freeze the past few days - it was actually quite simple 😅

My custom Themes class:

    public static class Themes
    {
        public static Theme CustomLight = Theme.Create(Theme.Light, LookUp(PrimaryColor.Lime), LookUp(SecondaryColor.Indigo));
        public static Theme CustomDark = Theme.Create(Theme.Dark, LookUp(PrimaryColor.Cyan), LookUp(SecondaryColor.Purple));
        public static Theme PinkGoodness = Theme.Create(Theme.Light, Colors.DeepPink, Colors.HotPink);

        static Themes() // Brush Overrides
        {           
            CustomLight.Paper = Colors.AliceBlue;

            PinkGoodness.Paper = Colors.LightPink;
            PinkGoodness.PrimaryDark = Colors.Pink;
        }


        public static void Change(Theme theme)
        {
            var themeBootstrap = Application.Current.LocateMaterialTheme<MaterialThemeBase>();
            themeBootstrap.CurrentTheme = theme;
        }


        private static Color LookUp(PrimaryColor primaryColor)
        {
            return SwatchHelper.Lookup[(MaterialColor)primaryColor];
        }

        private static Color LookUp(SecondaryColor primaryColor)
        {
            return SwatchHelper.Lookup[(MaterialColor)primaryColor];
        }
    }

Works nicely!

...

Changing the theme still doesn't work without resizing the window to force a redraw.
But that's probably due to this bug in Avalonia (that you reported): Changing color of SolidColorBrush don't cause a rerender

2023-06-12.21-48-15.mp4

(Needing to double click is most likely some error in my binding, so ignore that 😅)
(Color choice was just for testing, I know they're horrible 🤣)

...

Thank you very much for your help!

[SKProCH]

Yay, that's nice! Good work.

As a workaround for runtime theme changing, you can install a latest nightly avalonia package. Seems like everything working fine with it. (not everything actually, but theme changing seems like work fine)

[NoizeDaemon]

Oh thanks for the tip!

Theme switching works with the newest CI build :)
The previewer also works somewhat - it finally refreshes again, but the now the zoom is broken 🤷‍♀️ but it's def better than before 😁