Переопределение цветов в теме - ecvento/Material.Avalonia-Wiki GitHub Wiki

Установка начальной темы

Существует несколько точек входа для начала работы с темами Material для вашего приложения. Все они основаны на том, что вы должны добавить элемент в свой файл в разделе App.axaml и Application.Resources

MaterialTheme - Если вы не планируете менять тему и просто хотите установить цвета.

MaterialThemeBase - Если вы хотите контролировать свою тему и загружать ее самостоятельно.

MaterialTheme - на самом деле это оболочка, которая поможет вам настроить вашу тему с помощью свойств. Вы все еще можете использовать свойства, но не рекомендуется изменять ее свойства (MaterialThemeBase, BaseTheme, PrimaryColor, SecondaryColor, CurrentTheme), так как они влияют на CurrentTheme, если вам необходимо создать свою ITheme используйте MaterialThemeBase

MaterialThemeBase - точка входа в новую систему тем и стилей Material.Avalonia. Темой приложения можно управлять, задав значение свойства. ПРИМЕЧАНИЕ: Установка значения для свойства внутренне преобразует ваше новое значение в структуру этого реализующего интерфейса. Это делается для того, чтобы внутреннее состояние объекта темы было неизменным. Поэтому, если вы получите и используете значение свойства (или подписываетесь, например), то вы получите структуру: CurrentTheme ITheme CurrentThemeChanged

ITheme манипуляции

Вы можете создать новый пустой объект с помощью ctor или использовать вспомогательный метод для создания предварительно заполненной темы: Theme.Create

using Avalonia.Media;
using Material.Colors;
using Material.Styles.Themes;
using Material.Styles.Themes.Base;
...
PrimaryColor primary = PrimaryColor.DeepPurple;
Color primaryColor = SwatchHelper.Lookup[(MaterialColor)primary];

SecondaryColor secondary = SecondaryColor.Teal;
Color secondaryColor = SwatchHelper.Lookup[(MaterialColor)secondary];

// For dark theme use  Theme.Dark;
IBaseTheme baseTheme = Theme.Light;

ITheme theme = Theme.Create(baseTheme, primaryColor, secondaryColor);

При желании можно использовать любые произвольные цвета:

Color primaryColor = global::Avalonia.Media.Colors.Purple;
Color secondaryColor = global::Avalonia.Media.Colors.Lime;

IBaseTheme baseTheme = Theme.Light;

ITheme theme = Theme.Create(baseTheme, primaryColor, secondaryColor);

Для изменения основных основных/акцентных цветов или базового режима используйте на любом экземпляре: SetBaseTheme SetPrimaryColor SetSecondaryColor ITheme

Поиск экземпляра MaterialTheme(Base)

Вы можете использовать метод расширений для быстрого поиска экземпляров MaterialTheme (или MaterialThemeBase) в вашем приложении. Пример использования: ThemeExtensions.LocateMaterialTheme

var materialTheme = Application.Current.LocateMaterialTheme<MaterialTheme>(); 

Применение темы при запуске

Если вы хотите настроить тему вручную, то приложение запускается (например, чтобы позволить пользователю изменять и сохранять темы), вы можете использовать следующий подход:

  1. Откройте свой код app.axaml.cs и в OnFrameworkInitializationCompleted начните редактировать код (делайте что хотите) Например, я создам темную тему с голубым цветом в качестве основного цвета и оранжевым вторичным цветом и установлю его для своего приложения:
public override void OnFrameworkInitializationCompleted() {
    base.OnFrameworkInitializationCompleted();
    
    var primary = PrimaryColor.Cyan;
    var primaryColor = SwatchHelper.Lookup[(MaterialColor)primary];

    var secondary = SecondaryColor.Orange;
    var secondaryColor = SwatchHelper.Lookup[(MaterialColor)secondary];
    
    var theme = Theme.Create(Theme.Dark, primaryColor, secondaryColor);
    var themeBootstrap = this.LocateMaterialTheme<MaterialThemeBase>();
    themeBootstrap.CurrentTheme = theme;
}

ПРИМЕЧАНИЕ: Если вы всегда устанавливаете тему из кода, используйте переопределение в Application.Styles. Потому что создадутся дополнительные накладные расходы на применение исходных стилей (написанных на xaml), которые вы все равно переопределите в MaterialThemeBase MaterialTheme

Кроме того, вы можете отреагировать на изменение (например, сохранить новую тему в конфигурации), подписавшись на (или подписавшись на изменение через систему свойств Avalonia по умолчанию). Вот пример сохранения и загрузки темы в файл (не предпочтительный способ сохранения/загрузки темы, а просто пример): CurrentTheme CurrentThemeChanged CurrentThemeProperty

public override void OnFrameworkInitializationCompleted() {
    base.OnFrameworkInitializationCompleted();

    var themeBootstrap = this.LocateMaterialTheme<MaterialThemeBase>();
    themeBootstrap.CurrentTheme = LoadOrCreateDefaultTheme();

    themeBootstrap.CurrentThemeChanged.Subscribe(newTheme => {
        var configText = JsonConvert.SerializeObject(newTheme);
        File.WriteAllText("themeconfig.json", configText);
    });
}

private ITheme LoadOrCreateDefaultTheme() {
    try {
        var text = File.ReadAllText("themeconfig.json");
        return JsonConvert.DeserializeObject<Theme>(text);
    }
    catch (Exception) {
        // In case of any exception or file missing, etc
        // Fallback to creating default theme
        var primary = PrimaryColor.Cyan;
        var primaryColor = SwatchHelper.Lookup[(MaterialColor)primary];

        var secondary = SecondaryColor.Orange;
        var secondaryColor = SwatchHelper.Lookup[(MaterialColor)secondary];

        return Theme.Create(Theme.Dark, primaryColor, secondaryColor);
    }
}

Переопределение цветов

Вы можете задать нужные цвета непосредственно для объекта ITheme, который затем используется для установки значения, но есть способ проще - нужно добавить новый ресурс в app.axaml (CurrentTheme => MaterialThemeBase => Application.Resources) в вашем следующем виде:

<Application.Styles>
  ...
  <themes:MaterialTheme BaseTheme="Light" PrimaryColor="Purple" SecondaryColor="Lime" />
<Application.Resources>
  <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="Red"></SolidColorBrush>
</Application.Resources>

Или через новый стиль:

<Application.Styles>
  ...
  <themes:MaterialTheme BaseTheme="Light" PrimaryColor="Purple" SecondaryColor="Lime" />
  <Style>
    <Style.Resources>
      <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="Red"></SolidColorBrush>
    </Style.Resources>
  </Style>
</Application.Styles>

Словарь кистей

Главный цвет

  • PrimaryHueLightBrush
  • PrimaryHueLightForegroundBrush
  • PrimaryHueMidBrush
  • PrimaryHueMidForegroundBrush
  • PrimaryHueDarkBrush
  • PrimaryHueDarkForegroundBrush

Вторичный цвет

  • SecondaryHueLightBrush
  • SecondaryHueLightForegroundBrush
  • SecondaryHueMidBrush
  • SecondaryHueMidForegroundBrush
  • SecondaryHueDarkBrush
  • SecondaryHueDarkForegroundBrush

Цвет ошибки

  • ValidationErrorBrush

Цвет материала

  • MaterialDesignBackground
  • MaterialDesignPaper
  • MaterialDesignCardBackground
  • MaterialDesignToolBarBackground
  • MaterialDesignBody
  • MaterialDesignBodyLight
  • MaterialDesignColumnHeader
  • MaterialDesignCheckBoxOff
  • MaterialDesignCheckBoxDisabled
  • MaterialDesignTextBoxBorder
  • MaterialDesignDivider
  • MaterialDesignSelection
  • MaterialDesignToolForeground
  • MaterialDesignToolBackground
  • MaterialDesignFlatButtonClick
  • MaterialDesignFlatButtonRipple
  • MaterialDesignToolTipBackground
  • MaterialDesignChipBackground
  • MaterialDesignSnackbarBackground
  • MaterialDesignSnackbarMouseOver
  • MaterialDesignSnackbarRipple
  • MaterialDesignTextFieldBoxBackground
  • MaterialDesignTextFieldBoxHoverBackground
  • MaterialDesignTextFieldBoxDisabledBackground
  • MaterialDesignTextAreaBorder
  • MaterialDesignTextAreaInactiveBorder
  • MaterialDesignDataGridRowHoverBackground
⚠️ **GitHub.com Fallback** ⚠️