WinUICommunity

everything can be handy

0%

ThemeService

You can simplify the operation of saving, retrieving and selecting the Application theme, backdrop and TintColors. All operations are performed automatically.

Backdrops

Name
None
Mica
MicaAlt
DesktopAcrylic
AcrylicThin
AcrylicBase
Transparent

Methods

Name
Window
ConfigBackdrop
ConfigTintColor
ConfigFallbackColor
ConfigElementTheme
GetSystemBackdrop
GetBackdropType
GetElementTheme
GetActualTheme
SetBackdropType
SetBackdropTintColor
SetBackdropFallbackColor
SetElementTheme
SetElementThemeWithoutSave
IsDarkTheme
OnThemeComboBoxSelectionChanged
SetThemeComboBoxDefaultItem
OnBackdropComboBoxSelectionChanged
SetBackdropComboBoxDefaultItem
OnThemeRadioButtonChecked
SetThemeRadioButtonDefaultItem
OnBackdropRadioButtonChecked
SetBackdropRadioButtonDefaultItem
UpdateCaptionButtons

Simple Usage

There is multipe ways you can use ThemeService:

In this method, all settings are applied automatically.

1
var themeService = new ThemeService(window);

or

1
2
var themeService = new ThemeService();
themeService.AutoInitialize(window);

If you want to change some settings like autosave, file location, use Initialize method:

1
themeService.Initialize(window, true, @"D:\app\config.json");

and if you want to save and restore theme manually you can set useAutoSave = false

1
themeService.Initialize(window, false);

Config

there are some config methods:

ConfigBackdrop

If you use the ConfigBackdrop, the themeService will automatically save and restore the SystemBackdrop (if useAutoSave is true)

1
themeService.ConfigBackdrop(BackdropType.Mica);

ConfigElementTheme

If you use the ConfigElementTheme, the themeService will automatically save and restore the ElementTheme (if useAutoSave is true)

1
themeService.ConfigElementTheme(ElementTheme.Default);

ConfigTintColor

you can change system backdrop TintColor.

1
themeService.ConfigTintColor();

then you can set your tint color:

1
themeService.SetBackdropTintColor(Colors.Yellow);

ConfigFallbackColor

you can change system backdrop FallBackColor.

1
themeService.ConfigFallbackColor();

then you can set your FallBackColor

1
themeService.SetBackdropFallBackColor();

ConfigTintColor and ConfigFallbackColor only works if you use Acrylic or Mica Backdrop.

WinUICommunity

Changing ElementTheme in Runtime

you can change ElementTheme in Runtime like this:

1
2
3
themeService.SetElementTheme(ElementTheme.Dark);
// themeService.GetElementTheme();

Changing SystemBackdrop Type in Runtime

you can change SystemBackdrop Type in Runtime like this:

1
2
3
themeService.SetBackdropType(BackdropType.Mica);
// var systemBackdrop = themeService.GetSystemBackdrop();

Auto Change Theme/Backdrop and Auto Load Default Item

if you want to set defualt item for combobox or radiobuttons, and auto switch between themes or backdrops just add following line in your xaml

ComboBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ComboBox wuc:ThemeServiceAttach.ThemeService="{x:Bind local:App.Current.GetThemeService}">
    <ComboBoxItem Content="Light" Tag="Light" />
    <ComboBoxItem Content="Dark" Tag="Dark" />
    <ComboBoxItem Content="Default" Tag="Default" />
</ComboBox>

<ComboBox wuc:ThemeServiceAttach.ThemeService="{x:Bind local:App.Current.GetThemeService}">
    <ComboBoxItem Tag="None" Content="None"/>
    <ComboBoxItem Tag="Mica" Content="Mica"/>
    <ComboBoxItem Tag="MicaAlt" Content="MicaAlt"/>
    <ComboBoxItem Tag="DesktopAcrylic" Content="Desktop Acrylic"/>
    <ComboBoxItem Tag="AcrylicBase" Content="Acrylic Base"/>
    <ComboBoxItem Tag="AcrylicThin" Content="Acrylic Thin"/>
    <ComboBoxItem Tag="Transparent" Content="Transparent"/>
</ComboBox>

RadioButtons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<StackPanel wuc:ThemeServiceAttach.ThemeService="{x:Bind local:App.Current.GetThemeService}">
    <RadioButton Tag="Light" Content="Light"/>
    <RadioButton Tag="Dark"  Content="Dark" />
    <RadioButton Tag="Default" Content="Use system setting" />
</StackPanel>

 <StackPanel wuc:ThemeServiceAttach.ThemeService="{x:Bind local:App.Current.GetThemeService}">
    <RadioButton Tag="None" Content="None"/>
    <RadioButton Tag="Mica" Content="Mica"/>
    <RadioButton Tag="MicaAlt" Content="MicaAlt" />
    <RadioButton Content="Desktop Acrylic" Tag="DesktopAcrylic" />
    <RadioButton Content="Acrylic Base" Tag="AcrylicBase" />
    <RadioButton Content="Acrylic Thin" Tag="AcrylicThin" />
    <RadioButton Content="Transparent" Tag="Transparent" />
</StackPanel>

Auto Change Theme/Backdrop and Auto Load Default Item (Old Methods)

ComboBox

if you want to handle everything by yourself, first of all remove wuc:ThemeServiceAttach.ThemeService="{x:Bind local:App.Current.GetThemeService}" and then add your events:

for changing and saving application theme / backdrop:

1
2
3
4
5
private void cmbTheme_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    themeService.OnThemeComboBoxSelectionChanged(sender);
    themeService.OnBackdropComboBoxSelectionChanged(sender);
}

for selecting currect combobox item when page is loading, you can call SetThemeComboBoxDefaultItem or SetBackdropComboBoxDefaultItem method in Page Loaded event:

1
2
themeService.SetThemeComboBoxDefaultItem(cmb1);
themeService.SetBackdropComboBoxDefaultItem(cmb2);

RadioButtons

if you want to handle everything by yourself, first of all remove wuc:ThemeServiceAttach.ThemeService="{x:Bind local:App.Current.GetThemeService}" and then add your events:

for changing and saving application theme / backdrop:

1
2
3
4
5
private void OnThemeRadioButtonChecked(object sender, RoutedEventArgs e)
{
    themeService.OnThemeRadioButtonChecked(sender);
    themeService.OnBackdropRadioButtonChecked(sender);
}

for selecting currect radiobutton item when page is loading, you can call SetThemeRadioButtonDefaultItem or SetBackdropRadioButtonDefaultItem method in Page Loaded event:

1
2
themeService.SetThemeRadioButtonDefaultItem(ThemePanel1);
themeService.SetBackdropRadioButtonDefaultItem(ThemePanel2);

Change Theme/Backdrop Manual

you can change Application Theme with RootTheme, ActualTheme and ChangeTheme method:

1
2
3
4
5
themeService.RootTheme = ElementTheme.Dark;
//OR
themeService.ActualTheme = ElementTheme.Dark;
//OR
themeService.SetElementTheme(ElementTheme.Dark);

you can change Application SystemBackdrop:

1
themeService.SetBackdropType(BackdropType.Mica);

MVVM Pattern

first register a IThemeService service:

1
services.AddSingleton<IThemeService, ThemeService>();

then in your App.xaml.cs

1
2
3
4
5
var themeService = GetService<IThemeService>() as ThemeService;
if (themeService != null)
{
    themeService.AutoInitialize(Window);
}

Demo

you can run demo and see this feature.