How to use custom theme

[djonasdev]

I'm currently trying to adapt the MaterialDesign to the corporate design of our company:

Description	RGB	Hex
accent	255 105 0	#FF6900
primary	56 62 66	#383e42
seconday	208 208 208	#D0D0D0

For this purpose I created the HaprotecCorporateDesignTheme class to specifically adjust the colors.

In both dark and light mode, I miss the accent color and a uniform font color:

• actually the TextBox has a white foreground, but when my virtual keyboard opens, the foreground is still white while the backround of the TextBox is als light.
• The accent color is only used on the ToggleButton (you can see in the preview. The purple background on the text blocks is not relevant)

Thanks in advance!

HaprotecCorporateDesignTheme

namespace HMI.Theme
{
    public class HaprotecCorporateDesignTheme : BundledTheme
    {
        public static readonly Color Primary = Color.FromRgb(56, 62, 66);
        public static readonly Color Secondary = Color.FromRgb(208, 208, 208);
        public static readonly Color Accent = Color.FromRgb(255, 105, 0);

        public static readonly IBrush PrimaryBrush = new SolidColorBrush(Primary);
        public static readonly IBrush SecondaryBrush = new SolidColorBrush(Secondary);
        public static readonly IBrush AccentBrush = new SolidColorBrush(Accent);
        protected override void ApplyTheme(ITheme theme)
        {
            var bundledTheme = new BundledTheme
            {
                BaseTheme = BaseThemeMode.Dark,
                PrimaryColor = Material.Colors.PrimaryColor.Grey,
                SecondaryColor = Material.Colors.SecondaryColor.Orange
            };
            var corporateTheme = Material.Styles.Themes.Theme.Create(bundledTheme.BaseTheme.Value.GetBaseTheme(), Primary, Accent);

            base.ApplyTheme(corporateTheme);

        }
    }
}

App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:hmi="clr-namespace:HMI"
             xmlns:theme="clr-namespace:HMI.Theme"
             x:Class="HMI.App">
  <Application.DataTemplates>
    <hmi:ViewLocator />
  </Application.DataTemplates>
  <Application.Styles>
    <!-- https://github.com/PieroCastillo/Aura.UI -->
    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/BaseLight.xaml"/>
    <StyleInclude Source="avares://Aura.UI.FluentTheme/AuraUI.xaml"/>
    <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
    <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
    <!-- default avalonia DataGrid (https://docs.avaloniaui.net/docs/controls/datagrid) -->
    <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>
    <!-- https://github.com/AvaloniaUtils/Material.Icons.Avalonia -->
    <StyleInclude Source="avares://Material.Icons.Avalonia/App.xaml" />
    <!-- https://github.com/AvaloniaCommunity/material.avalonia -->
    <StyleInclude Source="avares://Material.Avalonia/Material.Avalonia.Templates.xaml" />
    <!-- HtSuite -->
    <StyleInclude Source="avares://HtSuite.Avalonia.HMI/Infrastructure/Keyboard/VirtualKey.axaml" />
  </Application.Styles>
  <Application.Resources>
    <theme:HaprotecCorporateDesignTheme BaseTheme="Inherit" PrimaryColor="Grey" SecondaryColor="Orange" />
  </Application.Resources>
</Application>

[SKProCH]

Hello, @dojo90

As far as I understand, you have 2 problems:

• the text color of the TextBox does not change when you set the background color to white This is not a problem, I will explain why. The current design implementation puts the appropriate colors (the text color will match the background color, etc.) and that's it. We don't do anything else. We do not monitor the background color of the elements and do not change other colors depending on this, we only provide a basic set of colors.
• accent color is almost never used It should be so. In Material.Design's ideology, an accent color is used to draw the user's attention to an element. It will be strange if there are a lot of accent elements. We have accent styles for buttons, for example.

As for TextBox problem: I think what you need manually set TextBlock.Foreground propety.

Perhaps I misunderstood the questions, if so, please clarify them.

[djonasdev]

Thank you for your feedback. I will adapt my application accordingly.

However, you write that the accent color would be used for buttons. Apart from the toggle button, I have not yet been able to find any other implementation. If I understand the following page correctly (https://material.angular.io/components/button/overview), I have to explicitly define a button as in accent color. Hover and click event will not use the accent color.

[SKProCH]

Apart from the toggle button, I have not yet been able to find any other implementation.

You can use Accent class:

<Button Classes="Accent" />

Also you can open our demo project to look out for all available controls

[djonasdev]

I think you answered my question or it cleared itself up.

First of all, I would like to say that my HaprotecCorporateDesignTheme class works so far, in case someone else needs custom colors.

My problem why I (wrongly) opened the issue at all:

The dark background color (in dark mode) and my primary color of the company are almost identical. As a result, I asked myself why the bright accent color is not displayed:

primary

dark mode background

dialog preview

Now that I have solved the problem by manually overwriting the background color of the pop-up windows, it now looks appropriately responsive!

also added accent to the DialogButtons

CorporateDialogHelper

```cs public static class CorporateDialogHelper { public static IDialogWindow CreateCustomDialog( CustomDialogBuilderParams @params) { SetCorporateParams(@params); var dialog = DialogHelper.CreateCustomDialog(@params); SetCorporateWindowParams(dialog.GetWindow()); return dialog; } public static IDialogWindow CreateAlertDialog( AlertDialogBuilderParams @params) { SetCorporateParams(@params); var dialog = DialogHelper.CreateAlertDialog(@params); SetCorporateWindowParams(dialog.GetWindow()); return dialog; } private static void SetCorporateParams(DialogWindowBuilderParamsBase @params) { @params.StartupLocation = WindowStartupLocation.CenterOwner; @params.Borderless = true; } private static void SetCorporateWindowParams(Window window) { window.Icon = App.MainWindow.Icon; window.Opened += (sender, args) => { var buttons = (sender as Window).GetLogicalDescendants().OfType().Where(button => button.DataContext?.GetType() == typeof(DialogResultButton)).ToList(); foreach (var button in buttons) { button.Classes.Add("Accent"); } var cards = (sender as Window).GetLogicalDescendants().OfType().ToList(); foreach (var card in cards) { card.Background = (IBrush?)Application.Current.Resources["PrimaryHueLightBrush"]; } }; } } ```

I am not sure if this is the right way in material design, but if the dark background of the dark mode and the primary color are almost the same, how should you deal with this?

[SKProCH]

I am not sure if this is the right way in material design, but if the dark background of the dark mode and the primary color are almost the same, how should you deal with this?

As i know material design isn't supposed to use primary/secondary colors which almost the same as background color. I can't explain it in another way.

[djonasdev]

I think the problem has nothing to do with the Material.Avalonia and I have to solve the problem myself. Thanks for your help 👍