Win32 アプリでのダークテーマとライトテーマのサポート

2024-10-15

Windows は、Windows 設定の個人用設定オプションとして、"ライト" と "ダーク" の各テーマをサポートしています。 Windows では既定でライトモードが使用されますが、ユーザーはダークモードを選択して UI の大部分を濃色に変更することができます。ユーザーがこの設定を選ぶのは、この方が低照度環境で目に優しいという場合もあれば、一般的に単に暗いインターフェイスが好みという場合もあります。また、OLED 画面など、一部の種類のコンピューターディスプレイでは、UI の色を暗くすることでバッテリー消費を抑えることができます。

左が淡色テーマ、右が濃色テーマのアプリの分割画像。

Microsoft は、既存アプリケーションを中断させることなくダークモードのサポートを広げることに取り組んでいます。そのため、Win32 デスクトップ Windows アプリを更新してライトとダークの両モードをサポートするための技術ガイダンスを提供しています。

ダークモードとライトモードの違い

設定のカラーモード (ライトとダークの各モードを含む) は、オペレーティングシステムとアプリの全体的な "前景色" と "背景色" を定義する設定です。

モード	説明	例
"ライト"	明るい背景と対照的な暗い前景。ライトモードでは、一般に、白または明るい背景に黒などの濃色のテキストが表示されます。
"ダーク"	暗い背景と対照的な明るい前景。ダークモードでは、一般に、黒または暗い背景に白などの淡色のテキストが表示されます。

注

"黒などの濃色" や "白などの淡色" と表現する理由は、アクセントカラーなど、ほかにもさまざまな前景色や背景色を彩る色が用意されているためです。そのため、実際に UI の一部で濃い青の背景に水色のテキストが表示されることがありますが、これもダークモードの UI として許容範囲内と見なされます。

アプリの種類に応じた UI の多様性により、カラーモード、前景色と背景色は、厳格なルールというよりは方向性のガイドラインを意味します。

前景の要素、ハイライト、テキストは、背景色よりも前景色に近い色である必要があります。
大きく塗りつぶされた背景領域とテキスト背景は、一般的に前景色よりも背景色に近い色である必要があります。

これは実際には、ダークモードでは UI のほとんどが暗くなり、ライトモードでは UI のほとんどが明るくなることを意味します。 Windows における背景の概念は、アプリの色の大きな領域、つまりページの色です。 Windows における前景の概念は、テキストの色です。

ヒント

ダークモードでは "前景" 色が明るく、ライトモードでは暗くなることがわかりにくい場合は、前景色を「既定のテキストの色」と考えるとよいでしょう。

カラーモード切り替えのサポートを有効にする

アプリケーションでダークモードのサポートを実装するには、さまざまな方法があります。アプリによっては、2 セットの UI (1 つは淡色、1 つは濃色) が含まれているものがあります。 WinUI 3 などの Windows UI フレームワークの中には、システムテーマが自動的に検出され、システムのテーマに沿うように UI が調整されるものがあります。ダークモードを完全にサポートするには、アプリのサーフェス全体がダークテーマに沿っている必要があります。

Win32 アプリでは、ライトテーマとダークテーマの両方をサポートするために、主に 2 つの操作を行うことができます。

ダークモードが有効になるタイミングを把握する

システム設定でダークモードが有効になるタイミングを知ることで、アプリ UI をダークモードをテーマにした UI に切り替えるタイミングを把握することができます。
Win32 アプリケーションのダークモードタイトルバーを有効にする

すべての Win32 アプリケーションがダークモードをサポートしているわけではないため、Windows では Win32 アプリに既定でライトタイトルバーが表示されます。ダークモードをサポートする準備ができている場合は、ダークモードが有効な際に代わりにダークタイトルバーを描画するよう Windows に要求することができます。

注

この記事では、システムテーマの変更を検出し、Win32 アプリケーションのウィンドウにライトまたはダークのタイトルバーを要求する方法の例を示します。ダークモードのカラーセットを使用してアプリ UI を再描画しレンダリングする方法については、詳しく説明しません。

ダークモードが有効になるタイミングを把握する

最初の手順は、カラーモード設定自体を追跡することです。これにより、ダークモードのカラーセットを使用するようにアプリケーションの描画とレンダリングの各コードを調整することができます。これを行うには、アプリの起動時に色設定を読み取り、アプリセッション中に色設定が変更されたタイミングを知る必要があります。

Win32 アプリケーションでこれを行うには、Windows::UI::Color を使用して、色が "ライト" または "ダーク" に分類されるかどうかを検出します。 Windows::UI::Color を使用するには、winrt から pch.h ヘッダーをインポート (Windows.UI.ViewManagement に) する必要があります。

#include <winrt/Windows.UI.ViewManagement.h>

また、main.cpp にその名前空間を含めます。

using namespace Windows::UI::ViewManagement;

main.cpp で、この関数を使用して、色が "ライト" に分類されるかどうかを検出します。

inline bool IsColorLight(Windows::UI::Color& clr)
{
    return (((5 * clr.G) + (2 * clr.R) + clr.B) > (8 * 128));
}

この関数では、色の "知覚的な明るさ" が迅速に算出され、RGB カラー値の異なるチャネルが人間の目に見える明るさにどのように寄与するかが考慮されます。一般的な CPU で高速に処理できるよう、全整数の算術演算が用いられます。

注

これは、色の明るさを実際に解析するためのモデルではありません。色が "ライト" か "ダーク" に分類されるかどうかを判断する必要がある計算を素早く行うのに適しています。テーマの色は、多くの場合、明るいが真っ白ではなく、暗いが真っ黒ではありません。

これで、色が明るいかどうかを確認する関数が作成されたので、その関数を使用して、ダークモードが有効になっているかどうかを検出できます。

ダークモードの定義は、暗い背景に対照的な明るい前景です。 IsColorLight で色が明るいかどうかがチェックされるため、この関数を使用して前景が明るいかどうかを確認することができます。前景が明るい場合は、ダークモードが有効です。

これを行うには、システム設定から前景の UI の色の種類を取得する必要があります。 main.cpp で次のコードを使用します。

auto settings = UISettings();
    
auto foreground = settings.GetColorValue(UIColorType::Foreground);

UISettings は、色を含む UI のすべての設定を取得します。 UISettings.GetColorValue (UIColorType::Foreground) を呼び出して、UI 設定から前景色の値を取得します。

これで、前景が明るいと見なされるかどうかを確認するためのチェックを実行できます (main.cpp で)。

bool isDarkMode = static_cast<bool>(IsColorLight(foreground));

wprintf(L"\nisDarkMode: %u\n", isDarkMode);

前景が明るい場合、isDarkMode は 1 (true) と評価され、ダークモードが有効であることを意味します。
前景が暗い場合、isDarkMode は 0 (false) と評価され、ダークモードが有効でないことを意味します。

アプリセッション中にダークモード設定が変更された場合に自動的に追跡するには、次のようにチェックをラップできます。

auto revoker = settings.ColorValuesChanged([settings](auto&&...)
{
    auto foregroundRevoker = settings.GetColorValue(UIColorType::Foreground);
    bool isDarkModeRevoker = static_cast<bool>(IsColorLight(foregroundRevoker));
    wprintf(L"isDarkModeRevoker: %d\n", isDarkModeRevoker);
});

完全なコードは次のようになります。

inline bool IsColorLight(Windows::UI::Color& clr)
{
    return (((5 * clr.G) + (2 * clr.R) + clr.B) > (8 * 128));
}

int main()
{
    init_apartment();

    auto settings = UISettings();
    auto foreground = settings.GetColorValue(UIColorType::Foreground);

    bool isDarkMode = static_cast<bool>(IsColorLight(foreground));
    wprintf(L"\nisDarkMode: %u\n", isDarkMode);

    auto revoker = settings.ColorValuesChanged([settings](auto&&...)
        {
            auto foregroundRevoker = settings.GetColorValue(UIColorType::Foreground);
            bool isDarkModeRevoker = static_cast<bool>(IsColorLight(foregroundRevoker));
            wprintf(L"isDarkModeRevoker: %d\n", isDarkModeRevoker);
        });
    
    static bool s_go = true;
    while (s_go)
    {
        Sleep(50);
    }
}

このコードを実行すると、次のようになります。

ダークモードが有効になっている場合、isDarkMode は 1 と評価されます。

ダークモードでのアプリのスクリーンショット。

設定がダークモードからライトモードに変更されると、isDarkModeRevoker は 0 と評価されます。

ライトモードでのアプリのスクリーンショット。

Win32 アプリケーションのダークモードタイトルバーを有効にする

Windows では、アプリケーションがダークモードをサポートできるかどうかが分からないため、下位互換性上の理由からサポートできないことを前提としています。 Windows アプリ SDK など一部の Windows 開発フレームワークでは、ダークモードがネイティブにサポートされており、追加のコードなしで特定の UI 要素が変更されます。 Win32 アプリはダークモードをサポートしていないことが多いため、Windows では Win32 アプリに既定でライトタイトルバーが表示されます。

ただし、標準の Windows タイトルバーが使用されているアプリの場合は、システムがダークモードの際にタイトルバーのダークバージョンを有効にすることができます。ダークタイトルバーを有効にするには、ウィンドウ属性 DWMWA_USE_IMMERSIVE_DARK_MODE を使用して、最上位のウィンドウの DwmSetWindowAttribute というデスクトップウィンドウマネージャー (DWM) 関数を呼び出します (DWM はウィンドウの属性をレンダリングします)。

次の例は、このコードによって作成されたような標準のタイトルバーを備えたウィンドウがあることを前提としています。

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
   hInst = hInstance; // Store instance handle in our global variable

   HWND hWnd = CreateWindowW(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,CW_USEDEFAULT, 0, 
     CW_USEDEFAULT, 0, nullptr, nullptr, hInstance, nullptr);

   if (!hWnd)
   {
      return FALSE;
   }

   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);

   return TRUE;
}

まず、次のように DWM API をインポートする必要があります。

#include <dwmapi.h>

次に、DWMWA_USE_IMMERSIVE_DARK_MODE 関数の上で InitInstance マクロを定義します。

#ifndef DWMWA_USE_IMMERSIVE_DARK_MODE
#define DWMWA_USE_IMMERSIVE_DARK_MODE 20
#endif

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
…

最後に、DWM API を使用して、濃色を使用するようにタイトルバーを設定できます。ここでは、BOOL という value を作成し、それを TRUE に設定します。この BOOL は、この Windows 属性設定をトリガーするために使用されます。次に、DwmSetWindowAttribute を使用して、ダークモードの色を使用するようにウィンドウ属性を変更します。

BOOL value = TRUE;
::DwmSetWindowAttribute(hWnd, DWMWA_USE_IMMERSIVE_DARK_MODE, &value, sizeof(value));

この呼び出しの詳細については、以下をご覧ください。

DwmSetWindowAttribute の構文ブロックは次のようになります。

HRESULT DwmSetWindowAttribute(
       HWND    hwnd,
       DWORD   dwAttribute,
  [in] LPCVOID pvAttribute,
       DWORD   cbAttribute
);

最初のパラメーターとして hWnd (変更するウィンドウのハンドル) を渡した後、DWMWA_USE_IMMERSIVE_DARK_MODE パラメータとして dwAttribute を渡す必要があります。これは DWM API の定数であり、ダークモードのシステム設定が有効になっている場合に、Windows フレームをダークモードの色で描画するようにするものです。ライトモードに切り替える場合、タイトルバーをライトモードの色で描画するには、DWMWA_USE_IMMERSIVE_DARK_MODE を 20 から 0 に変更する必要があります。

pvAttribute パラメーターは BOOL 型の値を指しています (先ほど BOOL 値を作ったのはこのためです)。ウィンドウのダークモードを有効にするには、pvAttribute を TRUE にする必要があります。 pvAttribute が FALSEの場合、ウィンドウにライトモードが使用されます。

最後に、cbAttribute は、pvAttribute に設定される属性のサイズである必要があります。これを簡単に行うために、sizeof(value) を渡します。

ダークウィンドウのタイトルバーを描画するコードは、次のようになります。

#ifndef DWMWA_USE_IMMERSIVE_DARK_MODE
#define DWMWA_USE_IMMERSIVE_DARK_MODE 20
#endif


BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
   hInst = hInstance; // Store instance handle in our global variable

   HWND hWnd = CreateWindowW(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,
      CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, nullptr, nullptr, hInstance, nullptr);

   BOOL value = TRUE;
   ::DwmSetWindowAttribute(hWnd, DWMWA_USE_IMMERSIVE_DARK_MODE, &value, sizeof(value));

   if (!hWnd)
   {
      return FALSE;
   }

   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);

   return TRUE;
}

このコードを実行すると、アプリのタイトルバーが以下のように暗くなるはずです。

ダークタイトルバーが表示されたアプリのスクリーンショット。

次の方法で共有

Win32 アプリでのダーク テーマとライト テーマのサポート

ダーク モードとライト モードの違い

カラー モード切り替えのサポートを有効にする

ダーク モードが有効になるタイミングを把握する

Win32 アプリケーションのダーク モード タイトル バーを有効にする

関連項目

フィードバック

その他のリソース

Win32 アプリでのダークテーマとライトテーマのサポート

ダークモードとライトモードの違い

カラーモード切り替えのサポートを有効にする

ダークモードが有効になるタイミングを把握する

Win32 アプリケーションのダークモードタイトルバーを有効にする