<div id="readability-page-1" class="page"><div><div><a href="https://rkttu.com/?source=post_page-----301c68032211-----------------------------------" rel="noopener  ugc nofollow"><div><p><img alt="Jung-Hyun Nam" src="https://miro.medium.com/fit/c/56/56/2*P1z-D515GRYQ6WaumcAxVQ.png" width="28" height="28"></p></div></a></div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*yvujRy0HB2BT95bO" width="700" height="1050" role="presentation"></p></div><figcaption>Photo by <a href="https://unsplash.com/@walling?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener ugc nofollow" target="_blank">Walling</a> on <a href="https://unsplash.com/s/photos/dark-mode?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener ugc nofollow" target="_blank">Unsplash</a></figcaption></figure><p id="38ec">윈도우 애플리케이션을 개발하면서 날이 갈수록 힘들어지는 부분 중 하나는, 새로운 API에 대한 투자에 비해 기존의 레거시 API에 대한 지원의 격차가 새로운 버전의 OS로 이동할 수록 점점 더 크게 벌어진다는 점입니다.</p><p id="37c9">그런 부분에서 개인적으로 무척 안타까웠던 부분 중에 하나가 바로 다크 모드와 라이트 모드에 대한 지원이었는데, 이번에 ‘식탁보’ 애플리케이션을 개발하면서 이 부분에 대한 답을 몇 번의 시행 착오 끝에 얻게 되어 간단히 정리하는 글을 올려봅니다.</p><h2 id="6604">가장 중요한 부분 — WPF용 다크 모드, 라이트 모드 테마 찾기</h2><p id="f8a8">정말 감사하게도, WPF용 다크 모드와 라이트 모드 테마를 커뮤니티에서 만들어 공유해주신 분이 계셨습니다.</p><p id="c83d">위의 리포지터리에서 총 네 가지의 WPF용 다크 모드와 라이트 모드 테마를 사용할 수 있도록 코드가 공개되어 있었습니다.</p><h2 id="e328">기존 WPF 프로젝트에 다크 테마 지정하기</h2><h2 id="041f">Step 1</h2><p id="2b40">작업의 편의<span id="rmm"><span id="rmm">를</span></span> 위하여, <a href="https://github.com/AngryCarrot789/WPFDarkTheme/blob/master/Themes/Themes.zip" rel="noopener ugc nofollow" target="_blank">Themes.zip 파일을 다운로드</a>하여 프로젝트에 아래 그림과 같이 Themes 폴더를 하나 만들어 그 안에 파일을 붙여 넣었습니다.</p><figure><div><p><img alt="" src="https://miro.medium.com/max/658/1*JSpX3kLmkvz-y0MEKCnUNA.png" width="329" height="133" sizes="329px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*JSpX3kLmkvz-y0MEKCnUNA.png?q=20"></p></div><figcaption>프로젝트 루트 아래에 Themes 디렉터리를 만들어 파일을 추가합니다.</figcaption></figure><h2 id="2e32">Step 2</h2><p id="a249">각각의 *.xaml, 그리고 *.xaml.cs 파일을 열어 네임스페이스 설정을 맞추는 것이 중요합니다. 아래 그림에서 강조한 부분들이 전부 같은 네임스페이스를 갖추도록 8개의 파일을 편집합니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*gljOGhrMI-__O2MYRNStYQ.png" width="700" height="337" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*gljOGhrMI-__O2MYRNStYQ.png?q=20"></p></div><figcaption>총 8개의 파일을 수정해야 합니다.</figcaption></figure><h2 id="515b">Step 3</h2><p id="ae5e">XAML 코드에서도 나와있지만 이 테마는 Aero2 WPF 테마를 응용하는 테마입니다. WPF 프로젝트가 .NET Core 3, .NET 5 이상에서 개발 중이라면 따로 추가할 것은 없지만, 만약 .NET Framework 기반이라면, 참조 어셈블리에 아래 그림과 같이 <code>PresentationFramework.Aero2</code> 어셈블리를 꼭 추가해야 합니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/678/1*r2pbui1ZnsfvThur_lBd7Q.png" width="339" height="119" sizes="339px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*r2pbui1ZnsfvThur_lBd7Q.png?q=20"></p></div><figcaption>.NET Framework 기반 WPF 프로젝트라면 Aero2 어셈블리가 필수입니다.</figcaption></figure><h2 id="291a">Step 4</h2><p id="6af8">애플리케이션 전체에 걸쳐 테마를 지정하기 위하여, <code>App.xaml</code> 파일에 기본 리소스 딕셔너리를 <code>Aero2</code>의 것으로 지정합니다.</p><p id="81d6">.NET Framework의 경우에는 Aero2 어셈블리에 대한 정확한 시그니처를 지정해주어야 해서, 다음과 같이 씁니다.</p><pre><span id="7f38">&lt;Application x:Class="TableCloth.App"<br>             xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation" rel="noopener ugc nofollow" target="_blank">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"<br>             xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml" rel="noopener ugc nofollow" target="_blank">http://schemas.microsoft.com/winfx/2006/xaml</a>"<br>             xmlns:converters="clr-namespace:TableCloth.Converters"<br>             Startup="Application_Startup"<br>             StartupUri="MainWindow.xaml"&gt;<br>    &lt;Application.Resources&gt;<br>        &lt;ResourceDictionary&gt;<br>            &lt;!-- ... --&gt;<br>            &lt;ResourceDictionary.MergedDictionaries&gt;<br>                <strong>&lt;ResourceDictionary Source="/PresentationFramework.Aero2, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/aero2.normalcolor.xaml" /&gt;</strong> &lt;!-- ... --&gt;<br>            &lt;/ResourceDictionary.MergedDictionaries&gt;<br>        &lt;/ResourceDictionary&gt;<br>    &lt;/Application.Resources&gt;<br>&lt;/Application&gt;</span></pre><p id="1a48">반면, .NET Core 3와 .NET 5 이상의 WPF 프로젝트는 좀 더 간단하게 지정할 수 있습니다.</p><pre><span id="c993">&lt;Application x:Class="TableCloth.App"<br>             xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation" rel="noopener ugc nofollow" target="_blank">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"<br>             xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml" rel="noopener ugc nofollow" target="_blank">http://schemas.microsoft.com/winfx/2006/xaml</a>"<br>             xmlns:converters="clr-namespace:TableCloth.Converters"<br>             Startup="Application_Startup"<br>             StartupUri="MainWindow.xaml"&gt;<br>    &lt;Application.Resources&gt;<br>        &lt;ResourceDictionary&gt;<br>            &lt;!-- ... --&gt;<br>            &lt;ResourceDictionary.MergedDictionaries&gt;<br>                <strong>&lt;ResourceDictionary Source="/PresentationFramework.Aero2;component/themes/aero2.normalcolor.xaml" /&gt;</strong> &lt;!-- ... --&gt;<br>            &lt;/ResourceDictionary.MergedDictionaries&gt;<br>        &lt;/ResourceDictionary&gt;<br>    &lt;/Application.Resources&gt;<br>&lt;/Application&gt;</span></pre><h2 id="738f">Step 5</h2><p id="6986">ThemesController.cs의 원래 코드는 이 글에서 설명하는 목적을 달성하는 데에는 충분하지 않은 내용으로 코딩 되어 있습니다. 그래서 저는 아래와 같이 코드를 변경했습니다.</p><pre><span id="d620">using System;<br>using System.Windows;</span><span id="f29c">namespace TableCloth.Themes<br>{<br>    internal enum ThemeTypes<br>    {<br>        Light,<br>        ColourfulLight,<br>        Dark,<br>        ColourfulDark,<br>    }</span><span id="5741">    internal static class ThemesController<br>    {<br>        private static ThemeTypes? _currentTheme = null;<br>        private static ResourceDictionary _currentThemeDictionary = null;</span><span id="639e">public static ThemeTypes? CurrentTheme<br>        {<br>            get =&gt; _currentTheme;<br>            set<br>            {<br>                string themeName;<br>                switch (value)<br>                {<br>                    case ThemeTypes.Dark: themeName = nameof(DarkTheme); break;<br>                    case ThemeTypes.Light: themeName = nameof(LightTheme); break;<br>                    case ThemeTypes.ColourfulDark: themeName = nameof(ColourfulDarkTheme); break;<br>                    case ThemeTypes.ColourfulLight: themeName = nameof(ColourfulLightTheme); break;<br>                    default: return;<br>                }</span><span id="ed3f">try<br>                {<br>                    if (_currentThemeDictionary != null)<br>                        Application.Current.Resources.MergedDictionaries.Remove(_currentThemeDictionary);</span><span id="8a00">var uri = new Uri($"Themes/{themeName}.xaml", UriKind.Relative);<br>                    _currentThemeDictionary = new ResourceDictionary() { Source = uri };<br>                    Application.Current.Resources.MergedDictionaries.Add(_currentThemeDictionary);<br>                }<br>                catch { }<br>            }<br>        }<br>    }<br>}</span></pre><p id="4c09">위의 코드의 원리는 간단합니다. Aero2의 기본 테마 설정은 그대로 가져가면서, GitHub에서 가져온 다크/라이트 테마로 상황에 맞게 재정의하는 것 뿐입니다.</p><p id="a4aa">다만, GitHub에서 가져온 추가 테마가 들어있는 리소스 딕셔너리는 처음에는 지정되어있지 않은 상태이므로, 테마를 무엇을 지정하는가에 맞추어 애플리케이션에 선택적으로 입힐 수 있도록 로직을 구현했습니다.</p><h2 id="32fe">Step 6</h2><p id="2f1c">창 형태로 띄우는 UI를 표현하는 모든 XAML 파일에 아래 그림과 같이 <code>Style</code> 속성을 지정해 주어야 창의 배경색이 다크 모드일 때 제대로 검정색으로 표현됩니다.</p><p id="437a"><a href="https://github.com/AngryCarrot789/WPFDarkTheme/blob/master/readme.md" rel="noopener ugc nofollow" target="_blank">WPFDarkTheme 프로젝트의 README 문서</a>에 따르면, Style에 지정할 수 있는 미리 정의된 DynamicResource 값은 총 세 가지입니다. 여기서는 <code>MainWindowStyle</code>을 사용하겠습니다.</p><ul><li id="5f83"><code>CustomWindowStyle</code>: 기본 창 스타일로, 제목 표시줄, 버튼 등 컨트롤의 테마를 포함합니다.</li><li id="64bd"><code>CustomToolWindowStyle</code>: <code>CustomWindowStyle</code>과 동일하지만, 창 크기를 조절할 수 없도록 만든 버전입니다.</li><li id="78de"><code>MainWindowStyle</code>: <code>CustomWindowStyle</code> 과 동일하지만, 다크 테마일 경우 창의 배경색을 검정색으로 맞추어줍니다.</li></ul><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*qC8cZqRA9U7bsf0o_6NILQ.png" width="700" height="197" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*qC8cZqRA9U7bsf0o_6NILQ.png?q=20"></p></div><figcaption>Window 태그에 Style 속성을 지정합니다.</figcaption></figure><h2 id="f46b">Step 7</h2><p id="177d">이제 테마가 잘 입혀지는지 확인해 볼 차례입니다. 저는 메인 윈도우의 <code>Window_Loaded</code> 이벤트 핸들러 시작 부분을 다음과 같이 코드를 추가했습니다.</p><pre><span id="f965">ThemesController.CurrentTheme = ThemeTypes.ColourfulDark;</span></pre><p id="5c9b">프로그램을 실행해보면 다크 테마가 잘 적용된 것을 볼 수 있습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*8k51dm1NBL3Cn2B2cXXpDg.png" width="700" height="529" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*8k51dm1NBL3Cn2B2cXXpDg.png?q=20"></p></div><figcaption>식탁보에 Aero2 + 다크 테마를 적용한 모습</figcaption></figure><h2 id="a9e8">윈도우 설정에 따라 다크/라이트 동적 전환하기</h2><p id="0589">윈도우 10부터는 macOS 모하비에서 큰 주목을 받았던 다크 모드와 라이트 모드 지원이 들어갔습니다. 제 경우에는 윈도우 11을 사용하고 있고, OS의 개인 설정 창에서는 아래 그림처럼 다크 모드와 라이트 모드를 원하는 대로 바꿀 수 있습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*kHCWcgZvhbQZbfTd9oZM6g.png" width="700" height="545" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*kHCWcgZvhbQZbfTd9oZM6g.png?q=20"></p></div><figcaption>윈도우 11의 다크 모드, 라이트 모드 설정</figcaption></figure><p id="654b">그런데 한 가지 궁금증이 생깁니다. 전통적인 윈도우 애플리케이션에서는 다크 모드와 라이트 모드에 대한 식별을 할 수 있는 방법이 따로 없는데, 새로운 윈도우 OS의 설정 앱이나 비주얼 스튜디오 최신 버전에서는 어떻게 이를 인지해서 자동으로 사용자 인터페이스를 고치는 것일까요?</p><p id="08da">여기에 대한 잘 정리된 해답을 Windows 런타임 API에서는 잘 제공합니다. 하지만 제관심사는 최소한의 종속성으로 이 목적을 달성하는 것이므로 Windows 런타임 관련 컨트랙트는 굳이 넣고 싶지 않습니다.</p><p id="df49">그래서 몇 가지 방법들을 찾아본 바, 다음과 같이 정리할 수 있었습니다.</p><h2 id="8ea3">Step 1</h2><p id="cb3b">우선 지금 라이트 모드인지 다크 모드인지를 정확히 알 수 있는 방법이 필요했습니다. 다행히도, 관리자 권한이 필요하지 않은 현재 사용자 수준의 레지스트리 조회 범위 안에 이런 정보가 관리되는 곳이 있었습니다.</p><p id="ddac">해당 레지스트리는 <code>HKCU\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize</code> 키 아래의 <code>AppsUseLightTheme</code> DWORD 속성입니다. 값이 0이 아니면 라이트 테마를 적용한 상태이고, 값이 0이면 다크 테마를 적용한 상태를 나타냅니다.</p><pre><span id="181c">private bool? IsLightThemeApplied()<br>{<br>    // <a href="https://stackoverflow.com/questions/51334674/how-to-detect-windows-10-light-dark-mode-in-win32-application" rel="noopener ugc nofollow" target="_blank">https://stackoverflow.com/questions/51334674/how-to-detect-windows-10-light-dark-mode-in-win32-application</a><br>    using (var personalizeKey = Registry.CurrentUser.OpenSubKey(@"Software\Microsoft\Windows\CurrentVersion\Themes\Personalize", false))<br>    {<br>        if (personalizeKey != null)<br>        {<br>            if (personalizeKey.GetValueKind("AppsUseLightTheme") == RegistryValueKind.DWord)<br>            {<br>                return (int)personalizeKey.GetValue("AppsUseLightTheme", 1) &gt; 0;<br>            }<br>        }<br>    }</span><span id="71ba">return null;<br>}</span></pre><p id="1fed">위의 메서드를 메인 윈도우 클래스의 멤버 메서드로 추가했습니다.</p><h2 id="a1de">Step 2</h2><p id="dbb5"><code>WM_SETTINGCHANGE</code> 메시지와 이 때 전달되는 <code>LParam</code> 포인터가 가리키는 문자열 데이터가 <code>ImmersiveColorSet</code> 인지 확인할 수 있으면, 이 때 <code>AppsUseLightTheme</code> 속성의 값을 읽어 앞 단계에서 구현한 것처럼 상황에 따라 다크 모드, 라이트 모드를 동적으로 지정하기만 하면 됩니다.</p><p id="7446">우선 WPF에서 Win32 <code>WndProc</code> 메서드로 <code>WM_SETTINGCHANGE</code> 메시지를 수신해야 하므로, 적당한 초기화 코드 위치에 다음의 코드를 추가합니다.</p><pre><span id="6819">var source = HwndSource.FromHwnd(new WindowInteropHelper(this).Handle);</span><span id="ad98">source.AddHook(WndProc);</span></pre><p id="fb6c">그리고 WndProc 메서드는 다음과 같이 구현합니다.</p><pre><span id="d7ec">private IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled)<br>{<br>    // <a href="https://stackoverflow.com/questions/51334674/how-to-detect-windows-10-light-dark-mode-in-win32-application" rel="noopener ugc nofollow" target="_blank">https://stackoverflow.com/questions/51334674/how-to-detect-windows-10-light-dark-mode-in-win32-application</a><br>    const int WM_SETTINGCHANGE = 0x001A;</span><span id="5760">    if (msg == WM_SETTINGCHANGE)<br>    {<br>        var data = Marshal.PtrToStringAuto(lParam);<br>        if (string.Equals(data, "ImmersiveColorSet", StringComparison.Ordinal))<br>        {<br>            var appliedLightTheme = IsLightThemeApplied();<br>            if (appliedLightTheme.HasValue)<br>            {<br>                if (appliedLightTheme.Value)<br>                    ThemesController.CurrentTheme = ThemeTypes.ColourfulLight;<br>                else<br>                    ThemesController.CurrentTheme = ThemeTypes.ColourfulDark;<br>                handled = true;<br>            }<br>        }<br>    }</span><span id="2212">return IntPtr.Zero;<br>}</span></pre><h2 id="a5e9">Step 3</h2><p id="0ccb">이제 의도한 대로 잘 작동하는지 한 번 살펴보겠습니다. 아래의 동영상을 한 번 살펴보겠습니다.</p><figure></figure><p id="1662">동영상에서 보인 것처럼, 시스템 설정에 따라 애플리케이션의 테마가 자동으로 변경되는 것을 볼 수 있습니다.</p><h2 id="c3de">마치며</h2><p id="a9bb">이 블로그 포스트는 식탁보 프로젝트 GitHub 이슈 69번을 수정하면서 나온 결과물을 정리한 것입니다.</p><p id="97a4">식탁보는 최근 0.5.3 버전을 릴리스했으며, 계속해서 기능을 발전시켜 나가고 있습니다. 많은 관심과 참여, 공유를 부탁드립니다.!</p><p id="c6d2">이 포스트의 내용이 도움이 되셨기를 바랍니다. :-D</p></div></div>

Stories by Jung-Hyun Nam on Medium

이 블로그 포스트에서는 WPF로 OS의 다크 모드, 라이트 모드 설정에 동적으로 반응하는 애플리케이션 UI를 만드는 방법을 설명합니다.
Continue reading on 닷넷데브 »

WPF로 동적으로 반응하는 다크 모드, 라이트 모드 앱 만들기

댓글