NotepadNext icon indicating copy to clipboard operation
NotepadNext copied to clipboard

Implemment dark mode

Open wayne-zhang opened this issue 1 year ago • 19 comments

I have implemented dark mode, both UI, editors and languages (Lua configuration).

Dark mode change requires application restart to take effect at the moment, will try to do enhancement without application bounce in the future.

Tested on Linux ARM64 and MacOS ARM64, haven't tested it on Windows.

wayne-zhang avatar Jul 05 '23 15:07 wayne-zhang

@wayne-zhang Thanks for the PR!

Been very busy lately so it might take me some time to get around to reviewing this especially since it's a large PR.

I very briefly glanced over the changes and it seems relatively inline with what I'd suspect, which is good.

dail8859 avatar Jul 06 '23 01:07 dail8859

Test on Windows. Build process works well.

Some corner cases:

  1. Background color of current tabs
  2. Lua Console

image

inkydragon avatar Jul 06 '23 03:07 inkydragon

@inkydragon, thanks for your test (on Windows).

I know the issue of edit tab foreground color, same on Linux and MacOS, but I haven't found where it is defined, neither in npp.css or darkstyle, so haven't fix it and just leave it there.

I have noticed Lua console but forgot to change it. Will fix it.

Also, please test sever languages too, for example, Java, C++, C#, make file, XML. I have tested it on Linux and MacOS, no major issue expect language keywords/elements fg color need teak, use dark mode friendly colors. Current color are for light mode.

wayne-zhang avatar Jul 06 '23 05:07 wayne-zhang

@dail8859, review is not urgent, we all have other import works to do.

One thing I'd point out - to make the change safe (and not impact default/light mode), I cloned language Lua configuration files to a separate folder (/languates/dark) instead of share them, and set different language path based on dark/default mode. In the dark lua scripts, I have replaced default foreground (#000000/back) with Lua variable darkFg and default background (#FFFFFF/white) with Lua varible darkBg, and set the variables by LuaState in NotepadNextApplication based on mode. Also, add space configuration for CPP family languages (default is light mode friendly).

In theory, Lua language scripts can be shared (use the changed dark mode one) so that

  1. Easy to add a new language;
  2. Easy to change a languate (add a new element config for example);
  3. LuaState change (to support dynamic lang path) is not required any more.

problem is it is more risky as default light mode may be impacted and more regression tests (all languages should be tested in default/light mode).

If you think it worth to accept the risk and make it more maintainable, I will change it to use one set of configuration for both dark/light mode.

wayne-zhang avatar Jul 06 '23 06:07 wayne-zhang

@inkydragon, I have fixed the 2 dark mode issues you have reported:

  1. Active tabbar text color;
  2. Lua console dark mode

Please test it.

wayne-zhang avatar Jul 06 '23 18:07 wayne-zhang

This is the LnF on MacOS ARM: image

wayne-zhang avatar Jul 06 '23 18:07 wayne-zhang

  • [ ] Active tabbar text color;
  • [x] Lua console dark mode

image

highlight test: C++; Java, C#; HTML, Lua image

On windows, the left margin of the editor looks a bit strange. image

inkydragon avatar Jul 07 '23 13:07 inkydragon

@inkydragon, thanks for you test.

I know the first character cut-off issue (margin-left settings), it's on ALL platforms actually. I know it's a configuration issuein qtdarkstype css (qtdarkstyle/dark/style.qss) but I couldn't found it where it is before. I found it finally today and fixed, it's in QAbstractView, which is the editor component of Scintilla (editor).

wayne-zhang avatar Jul 09 '23 16:07 wayne-zhang

@inkydragon, I have fixed the active tab bar text color issue too. My last change works on MacOS, possibly because of my MacOS is in dark mode. I have tested today's change and it works on Linux (and MacOS), please test if it works on Winodws.

On Linux, there is another issue - sub-menu items still in dark theme when NotepadNext sets to dark mode, e.g Languates > J > Java|JavaScript|JSON, sub-menu items Java|JavaScript|JSON is still in light theme. On issue on MacOS. Please test if this issue exists on Windows.

wayne-zhang avatar Jul 09 '23 16:07 wayne-zhang

Download the PR build and tested on Windows, the sub-menu issue do exist on Windows. So both Windows and Linux (MacOS woks at least in system dark mode). Will try to fix it, if possibly. Don't have too much experience on Qt/CSS though:

image

wayne-zhang avatar Jul 11 '23 05:07 wayne-zhang

Also, I have fixed Lua language scripts for dark mode, keywords of most of languages are dark mode friendly now (light foreground color).

wayne-zhang avatar Jul 11 '23 05:07 wayne-zhang

Language sub-menu background/foreground issue fixed.

wayne-zhang avatar Jul 11 '23 17:07 wayne-zhang

Tested the latest Windows build, sub-menu color issue has been fixed:

image

wayne-zhang avatar Jul 12 '23 01:07 wayne-zhang

@dail8859, I decided to take a more aggressive approach to implement the language (dark/light) themes, use shared Lua language templates/configurations instead of 2 copies for each theme. I have encapsulate default fg/bg colors and some language 'keywords' colors (such as instruction, operator, type) as variables and set them based on theme. This approach make language maintenance easier. The side effect is that it may impact light mode. I have done basic tests and it seems OK for both modes.

Also, I have done my best to fix all of the issues I found in dark mode. Possibly there are other issues/regression, will fix if any found regression tests.

wayne-zhang avatar Jul 16 '23 16:07 wayne-zhang

I've tested the latest commit.

Text has a white background when it is not selected in DEBUG version. If it's a release version, everything works fine.

DEBUG: image image

RELEASE: image

inkydragon avatar Dec 17 '23 21:12 inkydragon

any update?

knedl1k avatar Feb 26 '24 12:02 knedl1k

Bump!

IfGremlinThen avatar Mar 06 '24 02:03 IfGremlinThen

Any progress?

ArcticLampyrid avatar Mar 18 '24 07:03 ArcticLampyrid