Dark mode and plug-in with a custom lexer and xml styler

Bas de Reuver

Is it possible to support a separate dark mode style, when the plugin uses a custom lexer? See screenshot below of the CSV Lint plug-in in normal and dark mode.

This plug-in uses a separate CSVLint.xml files for the style but it doesn’t look so nice in dark mode. Btw the custom lexer/styler is talked about in this custom lexer thread.

If I understand correctly, when I want to update the plugin to support dark mode it basically needs three updates:

Support the new Fluent UI icons, so the plug-in needs to implement the new API NPPM_ADDTOOLBARICON_FORDARKMODE as talked about in this thread. I haven’t looked into it in depth, but it seems feasable.
Windows and panel colors, as mentioned here the plug-in can use the API NPPM_GETEDITORDEFAULTBACKGROUNDCOLOR to get the background color and change the panels and window accordingly. Not the most important issue, but certainly a-nice-to-have.
The custom styling xml, this one I don’t know. I’ve added some test colors to the CSVLint.xml file so that users can un-comment that if they wish to use it. But is it possible to somehow include this as a separate darkmode styling, maybe using a tag? Or is it up to the end-user to set these colors manually when switching between dark mode?

I couldn’t find any info about that last point 3. Does anyone know if there is a way to supported dark mode in the style.xml?

PeterJones

@Bas-de-Reuver ,

If you look at a couple of examples in Notepad++, you will notice:

For built-in lexers, the user needs to select a different theme under Dark Mode compared to Normal Mode – for example, the default.xml theme vs the DarkModeDefault.xml theme. (The Developer had it auto-switch to DarkModeDefault when you change from normal to Dark Mode, but if the user prefers a different dark-ish theme, they have to select it manually.)
For UDL, you need to select a separate UDL Language (even if it’s for the same UDL type) for Dark Mode vs Normal Mode – like the supplied markdown._preinstalled.udl.xml vs markdown._preinstalled_DM.udl.xml

The idea is that a given user won’t necessarily be switching between Dark and Normal modes very frequently; most users will pick whichever they prefer, and stick with it, so there doesn’t need to be much automation.

Since you are writing this lexer, and since you are providing the CSVLint.xml file, you get to make design decisions for this:

Do you want to use one CSVLint.xml file that has two sets of color definitions? Maybe <LexerType name="CSVLint" desc="CSV Linter and validator" excluded="no"> vs <LexerType name="CSVLintDark" desc="CSV Linter and validator" excluded="no"> or maybe <LexerType name="CSVLint" mode="Normal" desc="CSV Linter and validator" excluded="no"> vs <LexerType name="CSVLint" mode="Dark" desc="CSV Linter and validator" excluded="no">?

Or do you want to have two different XML files, like CSVLint.xml and CSVLintDark.xml?

Or do you want to use StyleID=“0”…“8” for Normal Mode and “10”…“18” for Dark Mode

It would then be up to you as the lexer plugin’s author, to code the logic to decide which LexerType entry or XML file to look at, depending on the Dark Mode status of Notepad++. Or you could supply a toggle in your lexer plugin’s options to toggle whether its dark mode is on or off.

Ekopalypse

I suppose the simple answer is that users who are using
a different theme will have to use the style configurator and
adjust the colors to their needs.
There is, afaik, no reasonable way for a Lexer plugin to find out
what colors would fit into the theme currently in use.
Moreover, a plugin does not receive any notification about theme changes,
so it is hard to tell when and what should be adjusted.

Bas de Reuver

I’m still looking for a way to detect if Notepad++ is configured to dark mode. A workaround would be to check the config.xml file

%USERPROFILE%\AppData\Roaming\Notepad++\config.xml

Which contains many GUIConfig parts, including this one for the dark mode setting. Incidentally it also just contains all the color values for the dialog window, title bar, text etc. which could be convenient.

<NotepadPlus>
	<GUIConfigs>
		..
		<GUIConfig
			name="DarkMode"
			enable="no"
			colorTone="0"
			customColorTop="2105376"
			customColorMenuHotTrack="4210752"
			customColorActive="4210752"
			customColorMain="2105376"
			customColorError="176"
			customColorText="14737632"
			customColorDarkText="12632256"
			customColorDisabledText="8421504"
			customColorEdge="8421504" />

afaik there aren’t any API calls to read these settings (as found on the Settings > Preferences menu) at least I couldn’t find any). So is it a good idea to just read from the config.xml file directly?

Bas de Reuver

Another thing, I’ll just ask it here as it is related. The plug-in has a couple of forms and dialogs, I haven’t adjusted the form or button colors so in Dark Mode they appear the same as in Normal Mode, this is what I expected.

However, I noticed that one ContextMenu is adjusted to Dark Mode colors, why is that? And this got me wondering, is there a way to have all the forms and dialogs and buttons adjust to the dark mode colors? Is there a function I can send the form as parameter, and Notepad++ “washes” all widgets on the forms to Dark Mode colors?

Ekopalypse

@bas-de-reuver

The only message I see is NPPM_GETEDITORDEFAULTBACKGROUNDCOLOR to find out if the scintilla background is dark. There is no notification or message to find out if npp is running in dark mode. Unfortunately.

Btw. is the issue with the caret line still open?

Bas de Reuver

@ekopalypse I’ve tried using NPPM_GETEDITORDEFAULTBACKGROUNDCOLOR but that doesn’t seem to give the correct color value during start-up, only after Notepad++ has started. I’ve already created an issue here

And the transparant caret line, as an alternative I’ve added different color sets to my plug-in, using just the foreground color, so the background color. But I haven’t figured if it’s possible to make the caret transparant, or if that’s even possible.

Ekopalypse

@bas-de-reuver

Real transparency? I doubt it, maybe with version5 and the changes introduced around the element-api-messages.
I haven’t really found the time for do some testing in this area.

Bas de Reuver

I’ve added Fluent UI and darkmode icons to the plug-in template. And I thought I’ll just post here how to create custom icon files, as it might be useful to other plug-in developers.

To add Fluent UI icons and dark mode icon for a plug-in, you need to generate icon (*.ico) files. .ICO files contain several raster images, kind of like a zip file, and for Windows icon you would typically include 16px, 32px, 48px, 64px and 256px size icons, and with the 16, 32, 48 sizes also in 8bit color (for backward compatibility)

However, afaik the Notepad++ Fluent UI icons for the plug-in only requires 1616 and 3232 pixel versions, one ico in black and a separate ico file in white/grey.

To create the two .ico files, you can use the freeware GIMP paint program, like so:

First open or create a layer with the 32 x 32 pixel image
Then add the smaller layer for 16 x 16 (if you’ve already create a 16x16 file you can do File > Open as layer)
You now have one image with two layers, the two sizes are both visible
From the menu select File > Export as
Select .ICO and then Export
GIMP will export all layers as a separate icon into the .ICO file

and the export as ico dialog:

icon design tip:
For the icon you can use a line image with pure black. Personally I find it’s easiest to design it as a large icon like 512x512 and then scale it down to 32x32 and 16x16. You can also first create a 16x16 image to get a rough outline that is still “readable” at such small size, then scale it up to 512 x 512 and fill in the details and then scale it down again (sounds like unnecessary extra steps but the end-result is better).

Anyway, for the white icon you can just use the fill-tool to change black to white/grey. The other Notepad++ icons seem to use the color #DEDEDE or RGB(222, 222, 222).

Btw GIMP is not that user-friendly imho so if anyone knows a better freeware program or paint app to create *.ico files, let me know.

artie-finkelstein

@bas-de-reuver said in Dark mode and plug-in with a custom lexer and xml styler:

Btw GIMP is not that user-friendly imho so if anyone knows a better freeware program or paint app to create *.ico files, let me know.

I alternate between Greenfish Icon Editor Pro a/k/a [GFIE] and [IcoFX]. Both are decent free icon creation/edit/conversion programs. Some features are easier in one version or the other. I’ve found GFIE easier overall for editing, but IcoFX seems to create icons that are more reliably used by multiple Npp plugins. FWIW: I use the PortableApp packaged versions, but that’s just to avoid cluttering up the Windows Start Menu.

artie-finkelstein

@artie-finkelstein
I had to delete the URLs as they were flagged as spam. DuckDuckGo is your friend.