Overview
DaisyThemeController is a toggle-based theme switcher that provides multiple presentation modes. It’s ideal for simple light/dark theme switching or toggling between any two themes.
This control inherits from ToggleButton and includes all standard toggle button properties.
Properties
Mode
public ThemeControllerMode Mode { get; set; }
ThemeControllerMode enum
Default value: ThemeControllerMode.Toggle
Possible values:
Toggle - Simple toggle switchCheckbox - Checkbox styleSwap - Animated sun/moon swap iconToggleWithText - Toggle with custom text labelsToggleWithIcons - Toggle with sun/moon icons
Example:
xmlns:daisy="using:Flowery.Controls"
<!-- Simple toggle -->
<daisy:DaisyThemeController Mode="Toggle" />
<!-- Animated swap -->
<daisy:DaisyThemeController Mode="Swap" />
<!-- With labels -->
<daisy:DaisyThemeController Mode="ToggleWithText" />
UncheckedTheme
public string UncheckedTheme { get; set; }
"Light"
Example:
<daisy:DaisyThemeController
UncheckedTheme="Light"
CheckedTheme="Synthwave" />
CheckedTheme
public string CheckedTheme { get; set; }
"Dark"
Example:
<daisy:DaisyThemeController
UncheckedTheme="Cupcake"
CheckedTheme="Dracula" />
UncheckedLabel
public string UncheckedLabel { get; set; }
ToggleWithText mode.
Default value: "Light"
Example:
<daisy:DaisyThemeController
Mode="ToggleWithText"
UncheckedLabel="Day"
CheckedLabel="Night" />
CheckedLabel
public string CheckedLabel { get; set; }
ToggleWithText mode.
Default value: "Dark"
IsChecked
public bool? IsChecked { get; set; }
ToggleButton.
Example:
// Check programmatically
themeController.IsChecked = true;
// Subscribe to changes
themeController.Checked += (s, e) => Console.WriteLine("Checked!");
themeController.Unchecked += (s, e) => Console.WriteLine("Unchecked!");
Events
Checked
public event RoutedEventHandler Checked
ToggleButton.
Unchecked
public event RoutedEventHandler Unchecked
ToggleButton.
Mode Examples
Toggle Mode
Simple toggle switch appearance.
xmlns:daisy="using:Flowery.Controls"
<daisy:DaisyThemeController
Mode="Toggle"
UncheckedTheme="Light"
CheckedTheme="Dark" />
Checkbox Mode
Checkbox-style appearance.
<daisy:DaisyThemeController
Mode="Checkbox"
UncheckedTheme="Light"
CheckedTheme="Dark" />
Swap Mode
Animated sun/moon icon swap. Perfect for light/dark theme switching.
<daisy:DaisyThemeController
Mode="Swap"
UncheckedTheme="Light"
CheckedTheme="Dark" />
Swap mode provides a smooth animation between sun (light) and moon (dark) icons.
ToggleWithText Mode
Toggle switch with custom text labels on each side.
<daisy:DaisyThemeController
Mode="ToggleWithText"
UncheckedTheme="Light"
CheckedTheme="Synthwave"
UncheckedLabel="Light"
CheckedLabel="Synthwave" />
- Branded theme switching
- Custom theme name display
- Non-standard light/dark labels
ToggleWithIcons Mode
Toggle switch with sun/moon icons.
<daisy:DaisyThemeController
Mode="ToggleWithIcons"
UncheckedTheme="Light"
CheckedTheme="Dark" />
Usage Examples
Basic Light/Dark Toggle
xmlns:daisy="using:Flowery.Controls"
<daisy:DaisyThemeController Mode="Swap" />
- Syncs with the current theme on load
- Toggles between Light and Dark themes
- Updates when themes change externally
Custom Theme Toggle
<daisy:DaisyThemeController
Mode="ToggleWithText"
UncheckedTheme="Cupcake"
CheckedTheme="Dracula"
UncheckedLabel="Cupcake"
CheckedLabel="Dracula" />
In a Navigation Bar
xmlns:daisy="using:Flowery.Controls"
<Grid Background="{ThemeResource DaisyBase200Brush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Text="My App"
VerticalAlignment="Center"
Margin="16,0" />
<daisy:DaisyThemeController
Grid.Column="1"
Mode="Swap"
Margin="16,8" />
</Grid>
Programmatic Control
using Flowery.Controls;
using Microsoft.UI.Xaml;
public sealed partial class MainPage : Page
{
private DaisyThemeController _themeController;
public MainPage()
{
InitializeComponent();
_themeController = new DaisyThemeController
{
Mode = ThemeControllerMode.Swap,
UncheckedTheme = "Light",
CheckedTheme = "Synthwave"
};
// Subscribe to events
_themeController.Checked += OnThemeChecked;
_themeController.Unchecked += OnThemeUnchecked;
// Add to layout
ThemeContainer.Children.Add(_themeController);
}
private void OnThemeChecked(object sender, RoutedEventArgs e)
{
Console.WriteLine("Dark theme active");
}
private void OnThemeUnchecked(object sender, RoutedEventArgs e)
{
Console.WriteLine("Light theme active");
}
private void ToggleTheme()
{
// Programmatically toggle
_themeController.IsChecked = !_themeController.IsChecked;
}
}
xmlns:daisy="using:Flowery.Controls"
<daisy:DaisyThemeController
Mode="Swap"
ToolTipService.ToolTip="Switch theme" />
Behavior
Automatic Synchronization
The controller automatically synchronizes with DaisyThemeManager:
- On load, it checks the current theme
- If current theme matches
CheckedTheme, it sets IsChecked = true
- If current theme matches
UncheckedTheme, it sets IsChecked = false
- When toggled, it calls
DaisyThemeManager.ApplyTheme()
Theme Application
When the user toggles the controller:
- The
IsChecked state changes
- The control determines which theme to apply (
CheckedTheme or UncheckedTheme)
DaisyThemeManager.ApplyTheme() is called- The visual state updates (animations play)
- All theme-aware controls update
Styling
The controller uses template-based rendering with visual states:
- Checked state - Shows checked appearance
- Unchecked state - Shows unchecked appearance
Colors are automatically derived from the current theme:
- Toggle knob:
DaisyPrimaryBrush
- Sun icon:
DaisyWarningBrush
- Moon icon:
DaisyInfoBrush
- Checkmark:
DaisyBaseContentBrush
Mode Reference
| Mode | Visual | Best For |
|---|
Toggle | Toggle switch | Standard toggle UI |
Checkbox | Checkbox | Form-style UI |
Swap | Animated sun/moon | Light/dark switching |
ToggleWithText | Toggle + labels | Custom theme names |
ToggleWithIcons | Toggle + sun/moon | Icon-based UI |
Best Practices
- Use Swap mode for light/dark - It provides the best visual feedback for theme switching
- Match labels to themes - When using
ToggleWithText, set labels to match theme names
- Consider context - Use
ToggleWithText in settings panels where space allows
- Use Swap in toolbars - The compact animated icon works well in navigation bars
- Persist state - Subscribe to
DaisyThemeManager.ThemeChanged to save user preferences
Advanced Usage
Dynamic Theme Assignment
using Flowery.Controls;
public void SetupThemeController()
{
var controller = new DaisyThemeController
{
Mode = ThemeControllerMode.ToggleWithText
};
// Subscribe to theme changes
DaisyThemeManager.ThemeChanged += (s, themeName) =>
{
// Update labels based on current theme
if (DaisyThemeManager.IsDarkTheme(themeName))
{
controller.CheckedLabel = themeName;
}
else
{
controller.UncheckedLabel = themeName;
}
};
}
Multiple Controllers
You can have multiple controllers in your app - they all sync automatically:
<!-- In NavigationBar.xaml -->
<daisy:DaisyThemeController Mode="Swap" />
<!-- In SettingsPage.xaml -->
<daisy:DaisyThemeController Mode="ToggleWithText" />
DaisyThemeManager.
ThemeControllerMode
public enum ThemeControllerMode
{
Toggle, // Simple toggle switch
Checkbox, // Checkbox style
Swap, // Animated sun/moon swap
ToggleWithText, // Toggle with text labels
ToggleWithIcons // Toggle with sun/moon icons
}
See Also
