Global Theme and Color set by ColorPick

Hi David,

For your first question, you'll want to take a look at our Theme Definitions topic:

https://www.actiprosoftware.com/docs/controls/avalonia/themes/theme-definitions

There are several options available that allow you to specify a default theme for different classes of controls.  For example, you can use the EditAppearanceKind property to specify the default theme (Outline/Solid/etc.) for edit controls like TextBox or ComboBox.  For the "Variant" settings (aka semantic color variants), the UseAccentedSwitches property allows you to specify that the accent variant should be used by default for switch controls (radio button/checkbox/toggle switch), but not the success/warning/danger variants.

The linked topic above discusses how you can configure those settings at startup.  If you want to make changes after the application has started, take a look at the "Code-behind Example" near the bottom of this topic:

https://www.actiprosoftware.com/docs/controls/avalonia/themes/getting-started#theme-definition-setting

It shows you how you can access the ModernTheme at runtime, change theme definition settings, and refresh the application.  In your settings page that allows users to change settings, you'd either need to refresh the theme after every detected change or give the users an "Apply" button that would update everything at once.

For your second question about the color picker, I'm not clear if you're wanting to provide a control for users to select the base color used for the accent semantic variant or if you're just wanting to retheme the appearance of the ColorPicker itself to accent itself with the selected color instead of the accent color.

If you're trying to let the user pick an accent color, our theme system doesn't currently support setting a specific color as the accent color.  Instead, the user can select a Hue to be used as the base color and is discussed in the topics linked above.

If you're trying to change the ColorPicker appearance, you'd have to apply a custom theme and/or style to the control that overrides the various color properties (Background/Foreground/BorderBrush) with the selected color.  If this is your intent, I would caution you that this may not have the desired result since Background/Foreground colors have to maintain a level of contrast to be readable.  For example, if you allowed the background color to match the current selection, you'd have to switch between light and dark foreground colors to make sure the color value can still be read on the background (assuming you still display the color value).

As for how to save/restore the application settings between sessions, we do not currently have support to save/restore theme definition configuration, but it is something we have noted for a future release.  Until then, you'd need to manually save individual settings like you would other application settings and then reapply those to the theme definition at startup.

Hi Team!

Thank you for the whole information. Yes, I'm making all the settings in code-behind like shown in (fantastic) documentation pages. So, now I can see that "color picker" does not allow users to set the AccentColor directly. I'll see how to set a HUE without a "text" input from user.

Until then, you'd need to manually save individual settings like you would other application settings and then reapply those to the theme definition at startup.

Yes, I is exactly what I want to do! So, how can I get the current values and how can I set them using the same approach in code-behind I used to set the current one (based on the page's sample)?

I appreciate your help.

Kindest regards,

David

Hi David,

Great to hear that you're making progress on your design and that you have found the documentation beneficial.

To save the values, you'd need to determine when you want to save (e.g., after a setting is changed or when closing the main application window to shut down the app).  Then you'd just read the current values out of the active definition and write those values to external storage similar to something like this:

if (ModernTheme.TryGetCurrent(out var modernTheme) && (modernTheme.Definition is not null)) {

  // Write the string value to external storage
  string accentColorRampName = modernTheme.Definition.AccentColorRampName;
  SaveSetting("AccentColorRampName", accentColorRampName);

}

In the example, the "SaveSetting" method is a method you would need to write based on how you plan to persist your settings outside of the application.

During application startup, you'd use a similar technique using a "ReadSetting" method that you'd write to retrieve any values from the external storage.

if (ModernTheme.TryGetCurrent(out var modernTheme) && (modernTheme.Definition is not null)) {

  // Read the string value from external storage
  string accentColorRampName = ReadSetting("AccentColorRampName");
  if (!string.IsNullOrEmpty)
    modernTheme.Definition.AccentColorRampName = accentColorRampName;

}

Wow, it's exactly what I want Team!

Thank you very much!