Enable Dark Mode for Title bar

[WiiLF23]

Done. Dark/Light mode toggle function to switch between modes. Working well it appears.

[John Z]

Hi WiiLF23,

Great you are on the way now.....

Don't forget you'll have to add in the treeview case for your program.

Doesn't look like it will be much help to my program as I want a finer level of control for the user.  However it is very instructive.  The menu part only partially works in my code because I have used the menu checkbox feature.....so for now I'll keep the system menu as is.
I will try to see if the toolbar color can changed - in the past it had to be done using a superimposed bitmap of the color desired.

John Z

[WiiLF23]

Sounds good - very pleased with it! One thing I had to do was catch the owner drawn root item highlight event, or color it and then keep it colored when menu is focused.

https://stackoverflow.com/a/69441170/2694720

Working exactly like Notepad++ in dark mode.



They thing I had to do was capture ODS_SELECTED, which had it running around for a while. The git link was a very helpful.

- Explorer-style default menu hover highlight color (top items)
- Dark mode appropriate menu hover highlight color (top items) w/ selection state

Updated ZIP

[MrBcx]

Good job -- your toggle switch is a particularly useful addition.  Thanks!

[WiiLF23]

Most welcome!

But now we must support dark mode for Windows 7 - Windows 11. Now, dark mode is working in Windows 7 Basic, including menus and window background but I need to implement a fallback in absence of the uxtheme calls for native dark mode and paint custom if not supported. This is where John's code will come in nicely as fallback support.

Notepad++ does not paint dark contextmenu's in Windows 7 Basic, which is easily done without question so we can take that a step further for the HMENU non-client area.

Basically, there will be dark mode on all supported versions of Windows. At least those that support the APIs in use here.

What is happening, is the newer common controls UI is being painted on older versions, due to lack of detection.

ODS_SELECTED + ODS_HOTLIGHT need to be used but they need to consider the OS version, and fallback to a reasonable choice.

[John Z]

Hi WiiLF23,

but I need to implement a fallback

Fallbacks - I love it!  I do that as well for ex if GDI+ fails the program falls back to OLE.
If memory based processing can't get the memory it needs I fall back to disk based processing.

John Z

[WiiLF23]

Haha exactly!  Its possible, so why not make it work right?

Windows 7 basic



---

Also added the ability to force the dark mode effect fallback - good for testing to know what users will generally see on their end. on older versions of windows. Some compatibility efforts are involved, but never say never :p

- Windows XP+ client-area dark mode (mostly, controls to be confirmed)
- Menu subitem tile handling for MF_OWNERDRAW sizing
- Other fixes and updates, shorter functions, cleaner code




Updated ZIP

[WiiLF23]

For those following the progress, update the following event:

Code: [Select]

case ONOFF: {
    ToggleDarkMode(hwndDlg);
    darkModeFallback = IsDlgButtonChecked(hwndDlg, CHECKBOX_FALLBACK);

    SetWindowTheme(hwndDlg, isDarkModeEnabled ? L"Explorer" : L"DarkMode_Explorer", NULL);
    InvalidateRect(hwndDlg, NULL, TRUE);
    UpdateWindow(hwndDlg);

    return TRUE;
}

This will allow full redraw of the window for older versions. Required for Windows 7, and probably XP as well. Windows 8/8.1 is unknown if it updates right away or not. Someone will have to confirm that.

UPDATE:

Owner-drawn tabs. This appeared to be necessary, as the tab control visibility was not great in dark mode so I added a custom paint event and added tab focus highlight effect.

[John Z]

Hi WiiLF23,

Question for you - In your Dark Mode implementation did/do you invert the color of the normal Edit mouse IDC_IBEAM ?  Or maybe you have no user inputs edit boxes?

It inverts itself on the windows background but inside the edit box it appears black and not inverting the color there making it hard to see.  So I'm looking at making IDC_IBEAM default to white when Dark Mode is active.

John Z

So it looks like my best approach is to add a custom cursor, easy enough to do.  Then when in dark mode in an edit box the IBEAM will be a white one....

[WiiLF23]

Hi John Z, correct you will need to invert the cursor color and called SetCursor(...) for the darkmode conditional. I do this on [X] close icons on custom drawn elements in my controls.

I havent implemented this into the main application yet, as demo is still in project folder elsewhere. I set it and left it.

Since that time, I have figured out how to completely darken/customize TabControl, TreeView, etc.


You can see here it is easily possible to draw rows and states in TreeView (took me an hour). Also, customizing dark windows is also very easy as this example shows a splash tutorial on a one-time timer.



^ This is just a BMP within a dialog window. But there is a lot of control logic for the window, drag event, close/mouseover, capture handling, etc. It works perfectly fine. Close button turns red with WM_MOUSEMOVE etc (native button control).

This all combined, can produce a much better dark mode experience - along with the tab drawing.

IntroDialog.zip will get you started with the splash feature.

[John Z]

Thanks WiiLF23!

I've got a fairly decent Dark Mode toggle.
Since I had previously coded for 5 custom user defined
themes it was not a big leap to add a Dark Mode.
I looked at a Menu in dark mode, easy to do, but decided
not.  So I left the main dialog frame, menu, toolbar and
status bar as is.

I completed a white IBEAM which works well in DarkMode.
Started on the white cursor bar but was having problems, it
showed on the main form but not in the edit boxes. Probably
wrong handle or something. Still looking

Thanks very much,
John Z

[WiiLF23]

Hey John Z, the Windows stock cursors have black cursors available in system.

You might just need to align with a custom cursor file:

Code: [Select]

// Load a custom black arrow cursor from resources
HCURSOR hCursor = LoadCursor(GetModuleHandle(NULL), MAKEINTRESOURCE(IDC_BLACK_ARROW));
SetCursor(hCursor);

I havent come across cursor work yet, but I do switch them back and forth when cursor is over specific REC coordinates (custom close button, etc). I'll post what I find as well.

[John Z]

Hi WiiLF23,

Well yes there are white and dark cursors, but I did not find a white IBEAM....so I just made my own, res1.cur below. It works very well and tied to the editable areas whereas the non-editable areas use the standard arrow cursor.

I misspoke in the prior post when I called out a 'white cursor bar' I was referring to a white caret bar needed as in the picture below, which shows a dark caret.

John Z

[WiiLF23]

Hey John Z, that IBeam cursor looks great (and much easier on the eyes in contrast). Did you sort out the scroll bar color? I'm curious about that, as that is probably the one thing I have not tackled yet for my UI. Dark mode is on hold for the moment, as I work the other controls (basically finished as of today). I cant wait to dive back into it 

[John Z]

Hi WiiLF23,

Well sad to say that another feature removed by Micro$oft in WIN10 and onward was the ability to set the scroll bar color!  It was global anyway so it would need to be set back when program looses focus, however SetSysColors for

Code: [Select]

COLOR_SCROLLBAR 0

Scroll bar gray area.

Windows 10 or greater: This value is not supported.
There are web hints that it can be changed through the registry but that seems excessive for an application.  For my program the bars are gray, as most are, so not too visually disruptive in Dark Mode.

I can envision a totally custom drawn scrollbar using bitmap picture controls and line drawings and buttons but every element is reinvented and discrete, possible, but worth the effort?  Maybe it is out there somewhere...

John Z