How to use custom theme

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>

[dojo90]

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

[dojo90]

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

  public static class CorporateDialogHelper
  {
      public static IDialogWindow<DialogResult> CreateCustomDialog(
          CustomDialogBuilderParams @params)
      {
          SetCorporateParams(@params);
          var dialog = DialogHelper.CreateCustomDialog(@params);
          SetCorporateWindowParams(dialog.GetWindow());
          return dialog;
      }

      public static IDialogWindow<DialogResult> 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<Button>().Where(button => button.DataContext?.GetType() == typeof(DialogResultButton)).ToList();
              foreach (var button in buttons)
              {
                  button.Classes.Add("Accent");
              }
              var cards = (sender as Window).GetLogicalDescendants().OfType<Card>().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?