Quickstart
This guide walks you through creating a simple Flowery.Uno application with themed controls, icons, and runtime theme switching.Prerequisites
- Completed installation
- Basic familiarity with XAML and Uno Platform
Create Your First App
<Window
x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:daisy="using:Flowery.Controls">
<Grid Background="{ThemeResource DaisyBase100Brush}">
<!-- Your content goes here -->
</Grid>
</Window>
Key Points:
- Always use
xmlns:daisy="using:Flowery.Controls"to access Flowery controls - Use
{ThemeResource DaisyBase100Brush}for page backgrounds to support theme switching
<Window
x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:daisy="using:Flowery.Controls">
<Grid Background="{ThemeResource DaisyBase100Brush}" Padding="40">
<StackPanel Spacing="20" MaxWidth="400" HorizontalAlignment="Center" VerticalAlignment="Center">
<!-- Header -->
<TextBlock
Text="Welcome to Flowery.Uno"
FontSize="32"
FontWeight="Bold"
Foreground="{ThemeResource DaisyBaseContentBrush}" />
<!-- Theme Switcher -->
<daisy:DaisyThemeDropdown MinWidth="220" />
<!-- Buttons -->
<StackPanel Spacing="12">
<daisy:DaisyButton
Content="Primary Button"
Variant="Primary"
HorizontalAlignment="Stretch" />
<daisy:DaisyButton
Content="Secondary Button"
Variant="Secondary"
HorizontalAlignment="Stretch" />
<daisy:DaisyButton
Content="Outline Button"
Variant="Accent"
ButtonStyle="Outline"
HorizontalAlignment="Stretch" />
</StackPanel>
<!-- Input Fields -->
<daisy:DaisyInput
PlaceholderText="Enter your name"
Label="Name"
Variant="Bordered" />
<daisy:DaisyInput
PlaceholderText="Type something..."
Label="Message"
Variant="Filled"
AcceptsReturn="True"
MinHeight="100" />
<!-- Card -->
<daisy:DaisyCard Padding="20">
<StackPanel Spacing="8">
<TextBlock
Text="Info Card"
FontSize="18"
FontWeight="SemiBold"
Foreground="{ThemeResource DaisyBaseContentBrush}" />
<TextBlock
Text="This is a themed card component that automatically updates when you change themes."
TextWrapping="Wrap"
Foreground="{ThemeResource DaisyBaseContentBrush}"
Opacity="0.8" />
</StackPanel>
</daisy:DaisyCard>
</StackPanel>
</Grid>
</Window>
using Flowery.Controls;
using Microsoft.UI.Xaml;
namespace MyApp;
public sealed partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Optional: Set initial theme
DaisyThemeManager.ApplyTheme("Dark");
// Optional: Listen for theme changes
DaisyThemeManager.ThemeChanged += OnThemeChanged;
}
private void OnThemeChanged(object? sender, string themeName)
{
// React to theme changes
System.Diagnostics.Debug.WriteLine($"Theme changed to: {themeName}");
}
}
using Flowery.Theming;
using Microsoft.UI.Xaml;
namespace MyApp;
public partial class App : Application
{
public App()
{
InitializeComponent();
}
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Seed design tokens before creating windows
DaisyResourceLookup.EnsureTokens();
// Optional: Apply saved theme preference
DaisyThemeManager.ApplyTheme("Synthwave");
MainWindow = new MainWindow();
MainWindow.Activate();
}
}
Control Variants
Flowery.Uno controls support multiple variants matching DaisyUI’s semantic color system:Button Variants
Button Styles
Button Sizes
Input Variants
Available Themes
Flowery.Uno includes all 35+ official DaisyUI themes: Light Themes: Light, Acid, Autumn, Bumblebee, Caramellatte, CMYK, Corporate, Cupcake, Cyberpunk, Emerald, Fantasy, Garden, Lemonade, Lofi, Nord, Pastel, Retro, Silk, Valentine, Winter, Wireframe Dark Themes: Dark, Abyss, Aqua, Black, Business, Coffee, Dim, Dracula, Forest, Halloween, Luxury, Night, Smooth, Sunset, SynthwaveTheme Switching Options
Key Concepts
Using ThemeResource
Common Palette Resources
| Resource | Usage |
|---|---|
DaisyBase100Brush | Page/window background |
DaisyBase200Brush | Elevated surfaces (cards, sidebar) |
DaisyBase300Brush | Borders |
DaisyBaseContentBrush | Default text/icon color |
DaisyPrimaryBrush | Primary accent color |
DaisySecondaryBrush | Secondary accent |
DaisyAccentBrush | Tertiary accent |
DaisySuccessBrush | Success status color |
DaisyErrorBrush | Error status color |
Complete Example
Here’s a complete working example you can copy and paste:MainWindow.xaml
Next Steps
Browse Controls
Explore all 40+ available components
Theming Guide
Deep dive into theme customization
Sizing System
Learn about the unified sizing system
API Reference
Detailed API documentation