Customizing Dark FluentTheme Colors

[louhy]

Similar to the other post I just wrote up, I've been unable to locate instructions to do this in the documentation so far. If there's a "look here, dummy" link available I'll take a look. Or if there's there's a site other than this one https://docs.avaloniaui.net/docs/getting-started that might help also.

Anyway I've managed to switch an application to a dark FluentTheme mode, but the background appears to be pure black and I need to make it a bit brighter. How would I do that?

I found this: https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Accents/BaseDark.xaml
So I suppose it's some of the values in there that need to be overridden, but kinda clueless on where to start with that.

Edit: The style configuration that I can find within the application I'm updating (I'm not the original author) looks like this, if that helps.

    <Application.Styles>
        <FluentTheme Mode="Light"/>
        
        <StyleInclude Source="/App/Styles/NumericUpDownCompact.axaml"/>
        
        <Style Selector="TextBlock.h1">
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>        
        
        <Style Selector="TextBlock.h2">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontWeight" Value="DemiBold"/>
            <Setter Property="Margin" Value="0,0,0,5"/>
        </Style>
        
        <Style Selector="Button.xButton">
            <Setter Property="Height" Value="20"/>
            <Setter Property="Width" Value="20"/>
            <Setter Property="Content" Value="x"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5,0"/>
        </Style>
    </Application.Styles>

[timunie]

In App.Resources you can define your own resources.

<App.Resources>
    <SolidColorBrush Color="#99111111" x:Key="TheKeyToOverride" />
</App.Resources>

[louhy]

How does that mesh with the Light/Dark themes? Is there an App.Resources that gets defined for each of them? I see the same keys such as "SystemAltLowColor" in both BaseLIght and BaseDark.

Also is that the same as Application.Resources? I don't see an App.Resources in this particular application.

[timunie]

Yes, it is the same I think

[timunie]

If you want dynamic theme switch, you also need to update the custom brushes after theme switch. You can do this in code behind

App.Current.Resources["TheKeyToOverride"] = myBrush

[maxkatz6]

to be solved with #8166