Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemment dark mode #411

Open
wants to merge 39 commits into
base: master
Choose a base branch
from
Open

Implemment dark mode #411

wants to merge 39 commits into from

Conversation

wayne-zhang
Copy link
Contributor

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.

@dail8859
Copy link
Owner

dail8859 commented Jul 6, 2023

@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.

@inkydragon
Copy link
Contributor

Test on Windows. Build process works well.

Some corner cases:

  1. Background color of current tabs
  2. Lua Console

image

@wayne-zhang
Copy link
Contributor Author

@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
Copy link
Contributor Author

@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
Copy link
Contributor Author

@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
Copy link
Contributor Author

This is the LnF on MacOS ARM:
image

@inkydragon
Copy link
Contributor

  • Active tabbar text color;
  • 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

@wayne-zhang
Copy link
Contributor Author

@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
Copy link
Contributor Author

@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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor Author

Language sub-menu background/foreground issue fixed.

@wayne-zhang
Copy link
Contributor Author

wayne-zhang commented Jul 12, 2023

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

image

@wayne-zhang
Copy link
Contributor Author

@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.

@inkydragon
Copy link
Contributor

inkydragon commented Dec 17, 2023

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

@knedl1k
Copy link

knedl1k commented Feb 26, 2024

any update?

@IfGremlinThen
Copy link

Bump!

@ArcticLampyrid
Copy link

Any progress?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants