Dark Title Bar in Dark Theme for Windows Version

Report · May 01, 2023

the color of title bar will follow the system settings

This white title bar looks very uncomfortable in dark mode

The method reference is

Windows doesn’t know if an application can support Dark mode, so it assumes that it can’t for backwards compatibility reasons. Some Windows development frameworks, such as Windows App SDK, support Dark mode natively and change certain UI elements without any additional code. Win32 apps often don’t support Dark mode, so Windows gives Win32 apps a light title bar by default.

However, for any app that uses the standard Windows title bar, you can enable the dark version of the title bar when the system is in Dark mode. To enable the dark title bar, call a Desktop Windows Manager (DWM) function called DwmSetWindowAttribute on your top-level window, using the window attribute DWMWA_USE_IMMERSIVE_DARK_MODE. (DWM renders attributes for a window.)

The following examples assume you have a window with with a standard title bar, like the one created by this code.

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;
}

First, you need to import the DWM API, like this.

#include <dwmapi.h>

Then, define the DWMWA_USE_IMMERSIVE_DARK_MODE macros above your InitInstance function.

#ifndef DWMWA_USE_IMMERSIVE_DARK_MODE
#define DWMWA_USE_IMMERSIVE_DARK_MODE 20
#endif

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
…

Finally, you can use the DWM API to set the title bar to use a dark color. Here, you create a BOOL called value and set it to TRUE . This BOOL is used to trigger this Windows attribute setting. Then, you use DwmSetWindowAttribute to change the window attribute to use Dark mode colors.

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

Here’s more explanation of what this call does.

The syntax block for DwmSetWindowAttribute looks like this.

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

After passing hWnd (the handle to the window you want to change) as your first parameter, you need to pass in DWMA_USE_IMMERSIVE_DARK_MODE as the dwAttribute parameter. This is a constant in the DWM API that lets the Windows frame be drawn in Dark mode colors when the Dark mode system setting is enabled. If you switch to Light mode, you will have to change DWMA_USE_IMMERSIVE_DARK_MODE from 20 to 0 for the title bar to be drawn in light mode colors.

The pvAttribute parameter points to a value of type BOOL (which is why you made the BOOL value earlier). You need pvAttribute to be TRUE to honor Dark mode for the window. If pvAttribute is FALSE , the window will use Light Mode.

Lastly, cbAttribute needs to have the size of the attribute being set in pvAttribute . To do easily do this, we pass in sizeof(value) .

Your code to draw a dark windows title bar should look like this.

#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;
}

When this code is run, the app title bar should be dark:

Documentation see
https://learn.microsoft.com/en-us/windows/apps/desktop/modernize/apply-windows-themes