How to get the accent color for the current theme?

[metal450]

I'm using https://github.com/AvaloniaCommunity/Notification.Avalonia to show notifications, but it requires manually specifying the accent color programmatically. I can't seem to find any documentation on how to get the accent color from the current Avalonia theme. Have found random bits of code in various discussion threads, mostly for how to set colors, but can't seem to piece together how to reliably fetch them. A couple related threads:
#12042
#13065

Thanks for any help in advance

[anewton]

Try something like the following. This ("DefaultForeground") is a resource that is defined in my App.axaml. One for each custom theme. I find that this works for my use case. Maybe it will for yours. (Disclaimer, I'm not on the Avalonia team. Just happened by while reviewing discussions.)

Application.Current.TryGetResource("DefaultForeground", Application.Current.ActualThemeVariant, out object foregroundBrush);

[timunie]

you're welcome to help us improving the docs. A PR is more than welcome

[Ricent82]

@timunie Respectfully, I don't really think it's feasible for a total beginner with virtually no familiarity with the platform to write meaningful documentation. As it is, a huge portion of time is already spent stumbling between various github issues trying to figure out how to piece things together, often coming to incorrect conclusions. It seems like docs would really need to come from the authors / those who have a firm grasp of how the framework actually works.

[timunie]

@Ricent82 sure, I thought that you now have found the missing info and thus know better than us what info was missing for you as a beginner. In the same time I agree that we have way too less resources for our docs. Something we really want to improve further but that's a marathon and not a sprint unfortunately. So if you can share with us what info you think is missing at which place, we can at lease open an issue in the docs repro or in Avalonia.Samples

[timunie]

To add: have you seen this? https://docs.avaloniaui.net/docs/guides/styles-and-resources/resources#consuming-resources-from-code

[Ricent82]

sure, I thought that you now have found the missing info and thus know better than us what info was missing for you as a beginner

Fair enough. Beginners don't know how to do things, but likewise maintainers don't always know what beginners don't know :)

have you seen this? https://docs.avaloniaui.net/docs/guides/styles-and-resources/resources#consuming-resources-from-code

Yeah I have. I think what would be really useful would be just a small working example in the docs to find:

1. The current foreground text color of the current theme, and
2. the current accent color of the current them

...In a way that can be run from a ViewModel (i.e. not within a view). There is an example on that page, but it's in a view's CodeBehind (so it requires knowledge of how to get a view when not in a view), and it uses "TheKey" as an example (so it requires digging to try to find the appropriate resource names).

if you can share with us what info you think is missing

Off the top of my head, one thing that took a lot of effort to figure out was how to request platform-specific permissions on mobile. For something that I'd imagine many users of a cross-platform framework would need, it sure required piecing together a lot of elements from a lot of places: understand the structure, and how Splat works, and finding XamarinEssentials (I kept getting thrown off because MAUI provides its own different approach), etc. Working examples, which could be found by searching the docs, for "common needs" like this would've been immensely helpful. i.e. in this case:

1. In the core project, define an interface:

public interface IPlatformSpecificService
{
    public Task<bool> EnsurePermissionReadStorage();
}

2. In each platform-specific project, i.e. YourProject.Android, implement the interface for that platform:

public class PlatformSpecificServiceAndroid : IPlatformSpecificService
{
    public async Task<bool> RequestPermissionReadStorage()
    {
        var status = await Xamarin.Essentials.Permissions.RequestAsync<Permissions.StorageRead>();
        if (status == Xamarin.Essentials.PermissionStatus.Granted)
            return true;

        return false;
    }
}

3. Also in YourProject.Android, create an instance & register it with Splat:

protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
{
    Locator.CurrentMutable.RegisterConstant<IPlatformSpecificService>(new PlatformSpecificServiceAndroid());

    return base.CustomizeAppBuilder(builder)
        .WithInterFont()
        .UseReactiveUI();
}

4. Then we can use Splat in the Core project to get the service that was provided for Android (or for iOS, or whichever platform is running):

var platformSpecificService = Locator.Current.GetService<IPlatformSpecificService>();
var hasRead = await platformSpecificService.RequestPermissionReadStorage()

[maxkatz6]

You can use PlatformSettings.GetColorValues() to get System accent colors. Which might or might not be the color used by the specific theme. https://docs.avaloniaui.net/docs/concepts/services/platform-settings#getcolorvalues

[Ricent82]

Took awhile to figure out how to get this to work - after finding #3418 with some other confused beginners, I think it should be like this?

if (App.Current.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
    var platformSettings = desktop.MainWindow.PlatformSettings;
    var colorValues = platformSettings.GetColorValues();
}

However, it actually returns the light variant, even though the app is set to the Dark variant. And PlatformSettings is only there for MainWindow, not for MainView, so I haven't been able to piece together how the equivalent would work on mobile:

else if (App.Current.ApplicationLifetime is ISingleViewApplicationLifetime singleView)
{
    //var platformSettings = singleView.MainView.PlatformSettings; // Doesn'tExist
}

[maxkatz6]

IClassicDesktopStyleApplicationLifetime

Application.Current.PlatformSettings if you wish.

not for MainView

You can get TopLevel from any control. TopLevel.GetTopLevel(control).

However, it actually returns the light variant, even though the app is set to the Dark variant

Yes, because as I said - it's platform settings.

[Ricent82]

So...still not really sure how to get the current accent color. It looks like the full usage for that function is i.e.:

PlatformColorValues colors = null;
if (App.Current.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
    colors = TopLevel.GetTopLevel(desktop.MainWindow).PlatformSettings.GetColorValues();
else if (App.Current.ApplicationLifetime is ISingleViewApplicationLifetime singleView)
    colors = TopLevel.GetTopLevel(singleView.MainView).PlatformSettings.GetColorValues();

However, as you said, that may or may not actually be the current color values. Which I'm still not clear on how to obtain.

[timunie]

If you need an actual color or brush of your app, it's better to lookup the resource value / key directly imo. For example, if you use FluentTheme:

Avalonia/src/Avalonia.Themes.Fluent/Accents/BaseResources.xaml

Line 58 in 06a3727

<SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="{DynamicResource SystemAccentColor}" />

You can consume it as DynamicResouce or in code behind via https://docs.avaloniaui.net/docs/guides/styles-and-resources/resources#consuming-resources-from-code

[Ricent82]

Yeah - was still having trouble getting it in the ViewModel (not using code-behind). I switched to FluentAvalonia though & managed to get it working with their code, i.e.

var faTheme = Application.Current?.Styles.OfType<FluentAvaloniaTheme>().FirstOrDefault();
faTheme.TryGetResource("TextFillColorPrimary", Application.Current.RequestedThemeVariant, out resource);

...So, all good. Thanks for all the responses :)

[Jannik-M91]

I just came across a similar problem and wanted to share my solution. I am a total Avalonia and C# beginner myself, so this may not be the best way of doing it.

I needed to get a current Fluent Theme color that is defined in a color palette in my App.axaml like this:

  <Application.Styles>
    <FluentTheme DensityStyle="Compact">
      <FluentTheme.Palettes>
        <ColorPaletteResources x:Key="Light"
                               Accent="#ff0073cf"
                               AltHigh="White"
                               ... />
        <ColorPaletteResources x:Key="Dark"
                               Accent="#ff0073cf"
                               AltHigh="Black"
                              ... />
      </FluentTheme.Palettes>
    </FluentTheme>
  </Application.Styles>

I came up with this helper function (which also converts it to a SKColor, but you may also directly return the Avalonia.Media.Color):

public static SKColor? GetThemeColor(string colorName)
{
    if (Application.Current is null) return null;

    var theme = Application.Current.Styles.OfType<Avalonia.Themes.Fluent.FluentTheme>().FirstOrDefault();
    var palette = theme?.Palettes[Application.Current.ActualThemeVariant];
    var accentColor = palette?.GetType().GetProperty(colorName)?.GetValue(palette);
    if (accentColor is not null)
    {
        return new(((Avalonia.Media.Color)accentColor).ToUInt32());
    }

    return null;
}

And I am using it like this:

SKColor accentColor = Common.GetThemeColor("Accent") ?? SKColors.ForestGreen;

Let me know what you think :)