How to set and change colors

[gimenezfrg]

In my app I don't have the Colors.xaml and Styles.xaml files, I have the LightTheme.xaml and DarkTheme.xaml files, in which I set the colors, and in my App.xaml I have this:

`

    <ResourceDictionary>
        <ResourceDictionary Source="Themes/LightTheme.xaml" />

        <Style TargetType="StackLayout">
            <Setter Property="Spacing" Value="6" />
        </Style>

        <Style TargetType="Grid">
            <Setter Property="RowSpacing" Value="6" />
            <Setter Property="ColumnSpacing" Value="6" />
        </Style>

        <Style x:Key="LabelTitle" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="FontFamily" Value="InterBold" />
        </Style>

        <Style x:Key="MediumLabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize" Value="20" />

        </Style>

        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor"
                Value="{DynamicResource NavigationBarColor}" />
            <Setter Property="BarTextColor"
                Value="{DynamicResource SecondaryColor}" />
        </Style>

        <Style x:Key="ButtonStyle"
            TargetType="Button">
            <Setter Property="BackgroundColor"
                Value="{DynamicResource PrimaryColor}" />
            <Setter Property="TextColor"
                Value="{DynamicResource SecondaryColor}" />
            <Setter Property="HeightRequest"
                Value="45" />
            <Setter Property="WidthRequest"
                Value="190" />
            <Setter Property="CornerRadius"
                Value="18" />
        </Style>

        <Style x:Key="SmallLabelStyle"
            TargetType="Label">
            <Setter Property="TextColor"
                Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                Value="15" />
        </Style>
    </ResourceDictionary>

`

I'm not able to change the colors of the UraniumUI components, especially the Dialogs, can someone help me?

[enisn]

Similar issue from here: https://discord.com/channels/1277612890668404798/1291021245722136669/1291033875694485598

All the Dialogs implementations uses Colors from color dictionary. I.E. Modal itself, uses SurfaceColor,

If you already passed your app colors as ColorsOverride property of StyleResource in your App.xaml like below, you can customize it easily:

Check here for further information: https://enisn-projects.io/docs/en/uranium/latest/Getting-Started#existing-projects

After this operation, you can customize colors from Colors.xaml file in your project.

    <Color x:Key="Surface">red</Color>
    <Color x:Key="SurfaceDark">blue</Color>

Modal will be Red at light theme and it'll be Blue at dark theme:

Light	Dark

Labels are using default label style from your application.

Button and any other input controls use Primary and PrimaryDark colors by default. Also colors has specific classes to customize easily such as Dialog.Button0, Dialog.Button1, etc according to their own indexes

https://github.com/enisn/UraniumUI/blob/6fb51cbb6b5422fb6234826ca33a09c3f80dcea4/src/UraniumUI/Dialogs/DefaultDialogService.cs#L557

See here: https://www.reddit.com/r/dotnetMAUI/comments/1c826ys/comment/l0bwfbr/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

<Style TargetType="Button" Class="Dialog.Button0" ApplyToDerivedTypes="True" CanCascade="True">  
    <Setter Property="TextColor" Value="Red" />  
    <Setter Property="CornerRadius" Value="30" />  
    <Setter Property="BorderWidth" Value="2" />  
    <Setter Property="BorderColor" Value="Red" />  
</Style>  

Result:

[gimenezfrg]

Thanks for replying, I couldn't access the Discord channel, it says NO TEXT CHANNELS.

About the example you gave, it's like I said, I don't have the Colors.xaml and Styles.xaml files in my project.

I created two theme files (LightTheme.xaml and DarkTheme.xaml) and defined the colors in them, and my App.xaml is the same as the example above, so I can't do this:

My style definitions are inside App.xaml

[enisn]

You can override colors directly from App.xaml without creating Colors.xaml

    <m:StyleResource BasedOn="{x:Reference appStyles}">
        <m:StyleResource.ColorsOverride>
            <ResourceDictionary>
                <Color x:Key="Primary">black</Color>
                <Color x:Key="Surface">white</Color>
            </ResourceDictionary>
        </m:StyleResource.ColorsOverride>
    </m:StyleResource>
    <ResourceDictionary x:Name="overrideStyles" Source="Resources/Styles/Override.xaml" />
</ResourceDictionary.MergedDictionaries>

[enisn]

In the latest version, also factory methods are provided by option pattern.

You can configure something like that in MauiProgram.cs

builder.Services.Configure<DialogOptions>(options =>
{
    options.GetBackdropColor = () => Color.FromRgba(0, 0, 0, 0.5);
    options.GetDivider = () => new BoxView { BackgroundColor = Colors.LightGray, HeightRequest = 1 };
    options.GetHeader = (title) => new Label { Text = title.ToUpper() };
});