Uno.Themes | material design system with the Uno Platform | Form library

(Optional) Set material styles as the default for your whole application.
Install the nuget package Uno.Material.
Unless you want our default color palette (inspired by our Uno logo), you'll want to override the following color resources in you application. We suggest creating a ColorPaletteOverride.xaml ResourceDictionary. For more information on the color system, consult this page for all the official documentation and tools to help you create your own palette. Here is what ColorPaletteOverride.xaml would contain if you want both light and dark theme.
Initialize the material resources. The order in which the different resources are loaded is important. Add this to App.xaml
(Optional) The material ProgressBar is built on top for the WinUI ProgressBar so make sure you include the appropriate resources in your App.xaml
Start using the styles in your pages!
To use styles, just find the name of the style from our documentation or sample app and use it like this
In order to display the appropriate font with the material styles on Webassembly, make sure that the Roboto font is defined on font.css located at [YourProject].Wasm/WasmCSS. This make sure that the font is loaded correctly Related Issue. It should look like this:
(Optional) Set material styles as the default for your whole application. <MaterialResources xmlns="using:Uno.Material" WithImplicitStyles="True" /> Alternatively, if you wish to only have the default styles for certain controls, simply add the implicit styles to your App.xaml: <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <MaterialColors xmlns="using:Uno.Material" /> <MaterialResources xmlns="using:Uno.Material" /> <!-- implicit styles --> <ResourceDictionary> <Style TargetType="Button" BasedOn="{StaticResource MaterialContainedButtonStyle}"/> <Style TargetType="TextBox" BasedOn="{StaticResource MaterialFilledTextBoxStyle}"/> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> Learn more about implicit styles from the Microsoft documentation here
(Optional) Per-control customization. Just like WinUI, we documented a set of control-specific resources you can override to further customize our controls. For example, if you would like change the CornerRadius of all the Buttons using our material styles, you could simply override the ButtonBorderRadius value in your resources (in App.xaml would be the simplest way to put the following code)
(Optional) If you are using our ToggleSwitches to get proper Material styling in Android there is some extra code to be added to the Android Project Head. (Click the component name to see how to set them up)
(Optional) If you are using our DatePickers, and TimePickers to get proper Material styling in Android there is some extra code to be added to the Android Project Head. (Click the component name to see how to set them up)