Overview
DaisyThemeDropdown is a dropdown control that displays all available themes with visual color previews. It automatically synchronizes with DaisyThemeManager.CurrentThemeName and provides a user-friendly way to switch themes.
This control inherits from DaisyComboBoxBase and includes all standard ComboBox properties.
Properties
SelectedTheme
public string SelectedTheme { get; set; }
"Light"
Example:
xmlns:daisy="using:Flowery.Controls"
<!-- Two-way binding to ViewModel -->
<daisy:DaisyThemeDropdown
SelectedTheme="{x:Bind ViewModel.CurrentTheme, Mode=TwoWay}"
MinWidth="220" />
using Flowery.Controls;
// Set theme programmatically
themeDropdown.SelectedTheme = "Synthwave";
// Get current selection
var selected = themeDropdown.SelectedTheme;
ItemsSource
public object ItemsSource { get; set; }
DaisyThemeManager.AvailableThemes.
You can provide a custom ItemsSource to filter or customize the theme list, but it should contain ThemePreviewInfo objects.
MinWidth
public double MinWidth { get; set; }
180
Inherited Properties
Inherits all properties from DaisyComboBoxBase, including:
Size - Control size (ExtraSmall, Small, Medium, Large)Variant - Visual variant (Primary, Secondary, Accent, etc.)Background - Background brushForeground - Text color brushBorderBrush - Border color brushBorderThickness - Border thickness
See DaisyComboBox for full inherited properties.
Methods
InvalidateThemeCache
public static void InvalidateThemeCache()
using Flowery.Controls;
using Flowery.Theming;
// Register a custom theme
DaisyThemeManager.RegisterTheme(
new DaisyThemeInfo("MyCustomTheme", isDark: true),
() => DaisyPaletteFactory.Create("MyCustomTheme")
);
// Invalidate cache to pick up the new theme
DaisyThemeDropdown.InvalidateThemeCache();
Usage Examples
Basic Usage
xmlns:daisy="using:Flowery.Controls"
<!-- Simple drop-in theme switcher -->
<daisy:DaisyThemeDropdown MinWidth="220" />
With Data Binding
xmlns:daisy="using:Flowery.Controls"
<!-- Two-way binding to ViewModel -->
<daisy:DaisyThemeDropdown
SelectedTheme="{x:Bind ViewModel.UserThemePreference, Mode=TwoWay}"
Size="Medium"
MinWidth="240" />
public class SettingsViewModel : INotifyPropertyChanged
{
private string _userThemePreference = "Dark";
public string UserThemePreference
{
get => _userThemePreference;
set
{
if (_userThemePreference != value)
{
_userThemePreference = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(UserThemePreference)));
// Save to settings
SaveThemePreference(value);
}
}
}
public event PropertyChangedEventHandler? PropertyChanged;
}
Custom Styling
xmlns:daisy="using:Flowery.Controls"
<!-- Styled dropdown -->
<daisy:DaisyThemeDropdown
Size="Large"
Variant="Primary"
MinWidth="280"
HorizontalAlignment="Stretch" />
In a Settings Panel
xmlns:daisy="using:Flowery.Controls"
<StackPanel Spacing="16" Padding="20">
<TextBlock
Text="Appearance"
FontSize="20"
FontWeight="SemiBold" />
<StackPanel Spacing="8">
<TextBlock Text="Theme" Opacity="0.8" />
<daisy:DaisyThemeDropdown
SelectedTheme="{x:Bind ViewModel.CurrentTheme, Mode=TwoWay}"
MinWidth="220"
HorizontalAlignment="Left" />
</StackPanel>
</StackPanel>
Programmatic Control
using Flowery.Controls;
using Microsoft.UI.Xaml;
public sealed partial class SettingsPage : Page
{
private DaisyThemeDropdown _themeDropdown;
public SettingsPage()
{
InitializeComponent();
_themeDropdown = new DaisyThemeDropdown
{
MinWidth = 220,
Size = DaisySize.Medium,
SelectedTheme = "Dark"
};
// Add to layout
ThemeContainer.Children.Add(_themeDropdown);
}
private void OnResetTheme_Click(object sender, RoutedEventArgs e)
{
// Reset to default theme
_themeDropdown.SelectedTheme = "Dark";
}
}
Theme Preview Display
The dropdown automatically displays each theme with:
- Theme name - Displayed as text
- Color swatches - Visual preview showing:
- Primary color
- Secondary color
- Accent color
- Neutral color
- Base background color
The swatch size automatically adjusts based on the Size property.
ThemePreviewInfo
public class ThemePreviewInfo
{
public string Name { get; set; }
public string DisplayName { get; }
public bool IsDark { get; set; }
public Brush Base100 { get; set; }
public Brush BaseContent { get; set; }
public Brush Primary { get; set; }
public Brush Secondary { get; set; }
public Brush Accent { get; set; }
public Brush Neutral { get; set; }
public double SwatchSize { get; set; }
public Thickness TextMargin { get; set; }
}
Behavior
Automatic Synchronization
The dropdown automatically synchronizes with DaisyThemeManager:
- On load, it selects the current theme from
DaisyThemeManager.CurrentThemeName
- When a theme is selected, it calls
DaisyThemeManager.ApplyTheme()
- When the theme changes externally (via
DaisyThemeManager), the dropdown updates its selection
Theme Application
When a user selects a theme:
- The
SelectedItem changes
- The control extracts the theme name
DaisyThemeManager.ApplyTheme() is called- The
ThemeChanged event fires
- All theme-aware controls update
Customization
Custom Item Template
You can override the default theme preview template by defining DaisyThemeDropdownItemTemplate in your resources:
<Application.Resources>
<DataTemplate x:Key="DaisyThemeDropdownItemTemplate" x:DataType="local:ThemePreviewInfo">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="{x:Bind DisplayName}" />
<Rectangle Fill="{x:Bind Primary}" Width="20" Height="20" />
</StackPanel>
</DataTemplate>
</Application.Resources>
Best Practices
- Set MinWidth - Use at least
220 to ensure color swatches display properly
- Use two-way binding - Bind
SelectedTheme to your ViewModel for automatic persistence
- Invalidate cache - Call
InvalidateThemeCache() if you register custom themes dynamically
- Persist selection - Subscribe to
DaisyThemeManager.ThemeChanged to save user preferences
See Also
