Skip to main content

​
Overview

Flowery.Uno provides a flexible styling system that lets you customize individual controls or entire applications without creating custom templates. This guide covers the lightweight styling approach, resource override patterns, and control-specific customization.

​
Quick Start

​
Single Control Customization

Override styling resources directly on a control instance: 
<daisy:DaisyButton Content="Custom Button" Variant="Primary">
    <daisy:DaisyButton.Resources>
        <SolidColorBrush x:Key="DaisyButtonPrimaryBackground" Color="#8B5CF6" />
        <SolidColorBrush x:Key="DaisyButtonPrimaryForeground" Color="White" />
    </daisy:DaisyButton.Resources>
</daisy:DaisyButton>

​
Application-Wide Customization

Define overrides in App.xaml to affect all controls globally: 
<Application.Resources>
    <ResourceDictionary>
        <!-- Make all Primary buttons purple -->
        <SolidColorBrush x:Key="DaisyButtonPrimaryBackground" Color="#8B5CF6" />
        <SolidColorBrush x:Key="DaisyButtonPrimaryBackgroundPointerOver" Color="#7C3AED" />
        
        <!-- Customize all cards -->
        <SolidColorBrush x:Key="DaisyCardBackground" Color="#2A2A3A" />
    </ResourceDictionary>
</Application.Resources>

​
Understanding Lightweight Styling

​
Why Lightweight Styling?

Flowery.Uno controls are code-driven — they build their visual tree programmatically in C#. Standard WinUI template-based styling doesn’t apply. Instead, controls check for resource overrides using a consistent naming pattern.

​
Resource Naming Convention

All Daisy styling resources follow this pattern: 
Daisy{ControlName}{Variant?}{Part?}{State?}{Property}
Examples:
  • DaisyButtonBackground – Default button background
  • DaisyButtonPrimaryBackground – Primary variant background
  • DaisyButtonBackgroundPointerOver – Hover state background
  • DaisyToggleKnobBrush – Toggle switch knob color
  • DaisyInputBorderBrushFocused – Input border when focused

​
Lookup Priority

Resources are resolved in this order:
  1. Control.Resources – Instance-level override (highest priority)
  2. Application.Current.Resources – App-wide override
  3. Fallback – Control’s internal palette logic using DaisyPrimaryBrush, etc.

​
Common Controls

​
DaisyButton Resources

<!-- Base resources -->
DaisyButtonBackground
DaisyButtonForeground
DaisyButtonBorderBrush

<!-- State resources -->
DaisyButtonBackgroundPointerOver
DaisyButtonBackgroundPressed
DaisyButtonBackgroundDisabled

<!-- Variant-specific resources -->
DaisyButtonPrimaryBackground
DaisyButtonPrimaryForeground
DaisyButtonPrimaryBackgroundPointerOver

DaisyButtonSecondaryBackground
DaisyButtonAccentBackground
DaisyButtonSuccessBackground
DaisyButtonWarningBackground
DaisyButtonErrorBackground
Example: 
<daisy:DaisyButton Content="Hover Me" Variant="Primary">
    <daisy:DaisyButton.Resources>
        <SolidColorBrush x:Key="DaisyButtonPrimaryBackground" Color="#EC4899" />
        <SolidColorBrush x:Key="DaisyButtonPrimaryBackgroundPointerOver" Color="#DB2777" />
        <SolidColorBrush x:Key="DaisyButtonPrimaryForeground" Color="White" />
    </daisy:DaisyButton.Resources>
</daisy:DaisyButton>

​
DaisyInput Resources

<!-- Base resources -->
DaisyInputBackground
DaisyInputForeground
DaisyInputBorderBrush
DaisyInputPlaceholderForeground

<!-- State resources -->
DaisyInputBorderBrushFocused

<!-- Variant-specific resources -->
DaisyInputPrimaryBorderBrush
DaisyInputSuccessBorderBrush
DaisyInputErrorBorderBrush
Example: 
<daisy:DaisyInput PlaceholderText="Enter text" Variant="Primary">
    <daisy:DaisyInput.Resources>
        <SolidColorBrush x:Key="DaisyInputPrimaryBorderBrush" Color="#3B82F6" />
        <SolidColorBrush x:Key="DaisyInputBorderBrushFocused" Color="#2563EB" />
    </daisy:DaisyInput.Resources>
</daisy:DaisyInput>

​
DaisyToggle Resources

<!-- Track resources -->
DaisyToggleTrackBackground
DaisyToggleTrackBorderBrush

<!-- Knob resources -->
DaisyToggleKnobBrush              <!-- Generic checked knob -->
DaisyToggleKnobBrushUnchecked     <!-- Unchecked knob -->

<!-- Variant-specific knob colors -->
DaisyTogglePrimaryKnobBrush
DaisyToggleSuccessKnobBrush
DaisyToggleErrorKnobBrush
Example: 
<daisy:DaisyToggle Header="Enable Feature" Variant="Success">
    <daisy:DaisyToggle.Resources>
        <SolidColorBrush x:Key="DaisyToggleSuccessKnobBrush" Color="#10B981" />
        <SolidColorBrush x:Key="DaisyToggleTrackBackground" Color="#1F2937" />
    </daisy:DaisyToggle.Resources>
</daisy:DaisyToggle>

​
DaisyCard Resources

DaisyCardBackground
DaisyCardForeground
Example: 
<daisy:DaisyCard>
    <daisy:DaisyCard.Resources>
        <SolidColorBrush x:Key="DaisyCardBackground" Color="#1E293B" />
        <SolidColorBrush x:Key="DaisyCardForeground" Color="#F1F5F9" />
    </daisy:DaisyCard.Resources>
    <TextBlock Text="Custom Card" />
</daisy:DaisyCard>

​
DaisyBadge Resources

<!-- Base resources -->
DaisyBadgeBackground
DaisyBadgeForeground
DaisyBadgeBorderBrush

<!-- Variant-specific resources -->
DaisyBadgePrimaryBackground
DaisyBadgePrimaryForeground
DaisyBadgeSuccessBackground
DaisyBadgeErrorBackground

<!-- Outline style resources -->
DaisyBadgeOutlineBackground
DaisyBadgeOutlineBorderBrush
DaisyBadgeOutlineForeground
DaisyBadgePrimaryOutlineBorderBrush

​
Page-Level Styling

Apply styling to all controls of a type on a specific page: 
<Page.Resources>
    <ResourceDictionary>
        <!-- All buttons on this page get custom colors -->
        <SolidColorBrush x:Key="DaisyButtonBackground" Color="Transparent" />
        <SolidColorBrush x:Key="DaisyButtonForeground" Color="MediumSlateBlue" />
        <SolidColorBrush x:Key="DaisyButtonBorderBrush" Color="MediumSlateBlue" />
    </ResourceDictionary>
</Page.Resources>

<StackPanel Spacing="8">
    <daisy:DaisyButton Content="Button 1" />
    <daisy:DaisyButton Content="Button 2" />
    <daisy:DaisyButton Content="Button 3" />
</StackPanel>

​
Advanced: State-Specific Styling

​
Standard WinUI Controls

For standard WinUI controls (not Daisy), you can use ThemeDictionaries for Light/Dark themes: 
<Button Content="Custom WinUI Button">
    <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                    <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Lavender"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                    <SolidColorBrush x:Key="ButtonForeground" Color="Coral"/>
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="DarkOrange"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Button.Resources>
</Button>

​
Handling Pointer States

Override state-specific resources using standard suffixes:
StateSuffix Example
HoverBackgroundPointerOver
PressedForegroundPressed
DisabledBorderBrushDisabled

​
Complete Resource Reference

For a comprehensive list of all control-specific resource keys, refer to the StylingResources.md reference in the source repository.

​
Key Controls

ControlPrimary Resources
DaisyButtonBackground, Foreground, BorderBrush + variants
DaisyInputBackground, Foreground, BorderBrush, PlaceholderForeground
DaisyCardBackground, Foreground
DaisyBadgeBackground, Foreground, BorderBrush + variants
DaisyToggleTrackBackground, KnobBrush + variants
DaisyProgressTrackBrush, FillBrush + variants
DaisyModalBackdropBrush, Background, CornerRadius
DaisyAlertVariant-specific Background, Foreground, IconBrush

​
Integration with Theming

​
Using Palette Resources

Flowery.Uno’s theming system provides palette brushes that update when themes change: 
<Border Background="{ThemeResource DaisyBase200Brush}"
        BorderBrush="{ThemeResource DaisyBase300Brush}">
    <TextBlock Foreground="{ThemeResource DaisyBaseContentBrush}" 
               Text="Themed Content" />
</Border>
Key Palette Resources:
ResourceUsage
DaisyBase100BrushPage/window background
DaisyBase200BrushElevated surfaces (cards, sidebar)
DaisyBase300BrushBorders
DaisyBaseContentBrushDefault text/icon color
DaisyPrimaryBrushPrimary accent color
DaisySecondaryBrushSecondary accent
DaisyAccentBrushTertiary accent
DaisySuccessBrushSuccess status color
DaisyErrorBrushError status color
Always use ThemeResource instead of StaticResource for colors that should update when themes change.

​
Style Inheritance

​
BasedOn Pattern

Create style hierarchies for standard WinUI controls: 
<Page.Resources>
    <Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="Height" Value="40" />
        <Setter Property="CornerRadius" Value="8" />
    </Style>

    <Style x:Key="PrimaryButtonStyle" TargetType="Button" 
           BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="Background" Value="{ThemeResource DaisyPrimaryBrush}" />
    </Style>

    <Style x:Key="SecondaryButtonStyle" TargetType="Button" 
           BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="Background" Value="{ThemeResource DaisySecondaryBrush}" />
    </Style>
</Page.Resources>

​
Implicit vs Explicit Styles

Implicit styles (no x:Key) apply automatically: 
<Page.Resources>
    <!-- Applies to ALL Buttons on this page -->
    <Style TargetType="Button">
        <Setter Property="CornerRadius" Value="12" />
    </Style>
</Page.Resources>

<Button Content="Gets rounded corners automatically" />
Explicit styles (with x:Key) must be referenced: 
<Page.Resources>
    <Style x:Key="RoundedButton" TargetType="Button">
        <Setter Property="CornerRadius" Value="12" />
    </Style>
</Page.Resources>

<Button Content="Default corners" />
<Button Content="Rounded" Style="{StaticResource RoundedButton}" />

​
Best Practices

1

Use ThemeResource for dynamic colors

Always use {ThemeResource} instead of {StaticResource} for colors that should update when themes change.
2

Prefer lightweight styling over templates

Avoid creating custom control templates. Use resource overrides and BasedOn for customization.
3

Test with multiple themes

Verify your styling works across light and dark themes by switching themes at runtime.
4

Keep resource keys consistent

Follow the Daisy{Control}{Variant}{Part}{State}{Property} naming convention for custom controls.
Avoid Restyling Controls: Custom templates can break when WinUI updates. Prefer lightweight styling and resource overrides.

​
Common Patterns

​
Pattern: Brand Color Override

<Application.Resources>
    <!-- Override primary color across all controls -->
    <SolidColorBrush x:Key="DaisyPrimaryBrush" Color="#FF6B35" />
</Application.Resources>

​
Pattern: Dark Card on Light Theme

<daisy:DaisyCard>
    <daisy:DaisyCard.Resources>
        <SolidColorBrush x:Key="DaisyCardBackground" Color="#1E293B" />
        <SolidColorBrush x:Key="DaisyCardForeground" Color="#F1F5F9" />
    </daisy:DaisyCard.Resources>
    <TextBlock Text="Dark card content" />
</daisy:DaisyCard>

​
Pattern: Custom Input Focus Color

<Application.Resources>
    <!-- All inputs get custom focus color -->
    <SolidColorBrush x:Key="DaisyInputBorderBrushFocused" Color="#8B5CF6" />
</Application.Resources>

​
Troubleshooting

​
UI Doesn’t Update on Theme Change

Cause: Using StaticResource instead of ThemeResource. Solution: Switch to ThemeResource: 
<!-- ❌ DON'T -->
<Border Background="{StaticResource DaisyBase100Brush}" />

<!-- ✅ DO -->
<Border Background="{ThemeResource DaisyBase100Brush}" />

​
Custom Resource Not Applied

Cause: Resource key typo or incorrect scope. Solution: Verify the resource key matches the convention and is defined in the correct scope (control, page, or app).

​
Text Color Wrong on Themed Background

Cause: Missing foreground binding. Solution: Explicitly bind foreground: 
<TextBlock Foreground="{ThemeResource DaisyBaseContentBrush}" 
           Text="Readable text" />

​
Next Steps

Responsive Design

Learn about size variants and responsive layouts

Theming Guide

Master theme switching and customization

Accessibility

Build accessible UIs with proper ARIA support

Component Reference

Explore all available controls

Build docs developers (and LLMs) love

Get started for freeTalk to us