3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

トグルボタンでダークモードとライトモードを切り替え

Posted at

#はじめに
ダークモードにできたら、もっといい感じになるよね!
非常に簡単なので、すぐやろう!

Windowにトグルボタンを配置する

トグルボタンのIsCheckプロパティとVieModelのDarkMode.Valueプロパティをバインドする。

MainWindow.xaml

<!-- ダークモード/ライトモードを切り替えるトグルボタン -->
<ToggleButton IsChecked="{Binding Path=DarkMode.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

ボタンの入力変更を監視するプロパティを用意する

MainWindowViewModel.cs

using MaterialDesignThemes.Wpf;
using Reactive.Bindings;
using Reactive.Bindings.Extensions;


public class MainWindowViewModel : ViewModelBase
{
    public MainWindowViewModel() : base()
    {
        // 初期化
        this.DarkMode = new ReactiveProperty<bool>(false).AddTo(this.disposedValue);
        // プロパティの値を監視する。
        this.DarkMode
            .ObserveProperty(x => x.Value)
            .Subscribe(x =>
            {
                PaletteHelper paletteHelper = new PaletteHelper();
                ITheme theme = paletteHelper.GetTheme();
                theme.SetBaseTheme((bool)x ? Theme.Dark : Theme.Light);
                paletteHelper.SetTheme(theme);
            })
            .AddTo(this.disposedValue);
    }

    public ReactiveProperty<bool> DarkMode { get; }
}

デバッグで確認

ライトモード
image.png
ダークモード
image.png

以上。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?