Use main window theme

[brmassa]

Hello,

started to update my previous code to Avalonia 11 and Unidock.

however, when using a different theme than the white Avalonia, Unidock do not respect it and the result is a mess. Could it respect the app/main windows color scheme?

as a secondary/temporary solution: how to overwrite the default colors?

regards Bruno Massa

[StefanKoell]

Can you provide more information on the theme you are using? AFAIK, UniDock templates/theming is based on FluentTheme. If you have a custom theme, you might to use Styles or roll your own ControlThemes in order to make them fit in your UI.

[brmassa]

SimpleTheme, default dark colors (variant)

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

[cirrusone]

I agree it would be preferred to have both themes (Simple and Fluent) honour the default brushes to keep look consistent. In the meantime, I used a combination F12 debugger to track elements and these files to find style selectors to override

NP.Ava.Visuals/Themes/TextStyles.axaml
NP.Ava.Visuals/Themes/CustomWindowStyles.axaml
NP.Ava.UniDock/Themes/DockStyles.axaml

This may help with a starting point for theming using <SimpleTheme /> both Light/Dark in App.axaml...

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:np="https://np.com/visuals"
             x:Class="DataGridAot.App"
             RequestedThemeVariant="Dark">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.Styles>
        <SimpleTheme />

        <StyleInclude Source="avares://NP.Ava.Visuals/Themes/TextStyles.axaml"/>
        <StyleInclude Source="avares://NP.Ava.Visuals/Themes/CustomWindowStyles.axaml"/>
        <StyleInclude Source="avares://NP.Ava.UniDock/Themes/DockStyles.axaml"/>

        <!-- UniDock Styles -->

        <!-- Remove icon from floating window -->
        <Style Selector=":is(np|CustomWindow).PlainFloatingWindow">
            <Setter Property="CustomHeaderIcon" Value="{x:Null}"/>
        </Style>

        <Style Selector="np|TabbedDockGroup">
            <Setter Property="Background" Value="Transparent"/>
        </Style>

        <Style Selector="np|DockItemPresenter">
            <Setter Property="Background" Value="Transparent"/>
        </Style>

        <Style Selector="np|DockTabItem.Dock[IsSelected=False]">
            <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
        </Style>

        <Style Selector="np|DockTabItem.Dock[IsSelected=True]">
            <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
        </Style>

        <Style Selector="np|DockItemPresenter[IsActive=True]">
            <Setter Property="HeaderBackground" Value="{DynamicResource ThemeAccentBrush}"/>
            <Setter Property="HeaderForeground" Value="{DynamicResource ThemeForegroundBrush}"/>
        </Style>

        <Style Selector="np|DockItemPresenter">
            <Setter Property="HeaderBackground" Value="{DynamicResource ThemeAccentBrush3}"/>
            <Setter Property="HeaderForeground" Value="{DynamicResource ThemeForegroundBrush}"/>
        </Style>

        <Style Selector="np|DockSeparator">
            <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
        </Style>

        <Style Selector="np|TabbedDockGroup[IsFullyActive=True]">
            <Setter Property="TabSeparatorBackground" Value="{DynamicResource ThemeAccentBrush3}"/>
        </Style>

        <!-- UniDock Styles -->

    </Application.Styles>

</Application>

[brmassa]

@cirrusone , that's what was talking about! It shuold use the default pallete. And when i change the pallet, the dock applies it.

while it's not fixed in the default code, i will use your snippet. It works.

[brmassa]

@cirrusone , will these scehem only work on Simple? I'm trying also on Fluent but i only get nulls

[npolyak]

Sorry - too tired now - will take a look on Sunday.

[cirrusone]

@brmassa - you may need to change the DynamicResource names between FluentTheme and SimpleTheme. See the Avalonia accents for each in source

https://github.com/AvaloniaUI/Avalonia/tree/master/src/Avalonia.Themes.Simple/Accents

https://github.com/AvaloniaUI/Avalonia/tree/master/src/Avalonia.Themes.Fluent/Accents

Also, this project is a good example for switching themes at runtime https://github.com/AvaloniaUI/Citrus.Avalonia

[ramzouza]

Hey @npolyak any update on this?

[npolyak]

sorry, some colors were hardcoded, but you can take a look DockStyles.axaml file and modify the colors yourself (there are not many places) I have a full time job and also trying to work on Avalonia book, so might not have time at this point.