FocusAdorner does not adjust to RequestedThemeVariant in ThemeVariantScope

[samtun]

Describe the bug

The FocusAdorner of controls does not adjust to the requested theme variant of ThemeVariantScope.

To Reproduce

• Use Light mode in the App
  • RequestedThemeVariant="Light"
• Add a ThemeVariantScope to the app with RequestedThemeVariant="Dark"
• Add a control that can be focussed (e.g. Button) inside and outside the ThemeVariantScope
  • (optional) set a custom Focus adorner style that uses DynamicResources

The same issue when using Dark mode with a ThemeVariantScope that uses Light mode.

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="BackgroundBrush">SpringGreen</SolidColorBrush>
                    <SolidColorBrush x:Key="ForegroundBrush">Black</SolidColorBrush>
                    <SolidColorBrush x:Key="AdornerBackground">Red</SolidColorBrush>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="BackgroundBrush">DodgerBlue</SolidColorBrush>
                    <SolidColorBrush x:Key="AdornerBackground">Blue</SolidColorBrush>
                    <SolidColorBrush x:Key="ForegroundBrush">White</SolidColorBrush>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>

            <FocusAdornerTemplate x:Key="CustomFocusAdorner">
                <Border
                    BorderBrush="{DynamicResource AdornerBackground}"
                    BorderThickness="2"
                    CornerRadius="4" />
            </FocusAdornerTemplate>
        </ResourceDictionary>
    </Application.Resources>

 <Window.Styles>
     <Style Selector="Button">
         <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
         <Setter Property="FocusAdorner" Value="{DynamicResource CustomFocusAdorner}" />
     </Style>
 </Window.Styles>
 <StackPanel>
     <ThemeVariantScope RequestedThemeVariant="Light">
         <Border Background="{DynamicResource BackgroundBrush}">
             <StackPanel Margin="12" Spacing="12">
                 <TextBlock>Light mode - expected Red Adorner</TextBlock>
                 <Button Content="Click me" />
             </StackPanel>
         </Border>
     </ThemeVariantScope>
     <ThemeVariantScope RequestedThemeVariant="Dark">
         <Border Background="{DynamicResource BackgroundBrush}">
             <StackPanel Margin="12" Spacing="12">
                 <TextBlock>Dark mode - expected Blue Adorner</TextBlock>
                 <Button Content="Click me" />
             </StackPanel>
         </Border>
     </ThemeVariantScope>
 </StackPanel>

Example Project

ThemedFocus.zip

Expected behavior

The color used in the FocusAdorner adjusts according to the RequestedThemeVariant of the ThemeVariantScope.

Avalonia version

11.2.4

OS

Windows, Linux

Additional context

• Issue probably exists on any platform, since the FocusAdorner uses a Canvas to draw itself

[maxkatz6]

Adorner is hosted in the window overlay layer, and it can only inherit theme variant or other resources from the window/app, and not deeply nested button with ThemeVariantScope around.

We should be able to do what we did with popups - set target control as a logical parent on them, allowing to inherit theme/resources from it.