Open emako opened 9 months ago
Full sample code here:
You can try it using DarkModeForWindow\bin\Release\net472\DarkModeForWindow.exe
.
Launch MQTTX and then launch DarkModeForWindow.exe.
Thank you very much for bringing up this issue and for the solution you've provided. @emako
I want to point out that MQTTX is primarily developed using JavaScript within the Electron framework. As such, I need to become more familiar with C#. In light of this, is there another possible approach to change the dark mode caption color, especially one that could be implemented within the JavaScript or Electron framework?
Also, your participation would be most welcome if you're interested in contributing to this feature enhancement. Your expertise and experience would be a valuable asset, and we look forward to your further involvement.
Thanks again for your contribution and support!
This requires me to take some time to try electron.
Meet something error on yarn install
:
D:\Github\MQTTX>yarn install
yarn install v1.22.19
[1/6] Validating package.json...
[2/6] Resolving packages...
warning Resolution field "electron-builder@23.0.2" is incompatible with requested version "electron-builder@^22.2.0"
[3/6] Fetching packages...
[4/6] Linking dependencies...
warning "@vue/cli-plugin-unit-mocha > mocha-webpack@2.0.0-beta.0" has unmet peer dependency "webpack@^4.0.0".
warning " > monaco-editor-webpack-plugin@4.0.0" has unmet peer dependency "webpack@^4.5.0 || 5.x".
warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "typeorm-uml > @oclif/command@1.8.0" has unmet peer dependency "@oclif/config@^1".
[5/6] Building fresh packages...
[10/11] ⠂ husky
[-/11] ⠂ waiting...
[3/11] ⠂ sqlite3
[11/11] ⠂ electron
error D:\Github\MQTTX\node_modules\electron: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: D:\Github\MQTTX\node_modules\electron
Output:
RequestError: unable to verify the first certificate
at ClientRequest.<anonymous> (D:\Github\MQTTX\node_modules\got\source\request-as-event-emitter.js:178:14)
at Object.onceWrapper (node:events:629:26)
at ClientRequest.emit (node:events:526:35)
at origin.emit (D:\Github\MQTTX\node_modules\@szmarczak\http-timer\source\index.js:37:11)
at TLSSocket.socketErrorListener (node:_http_client:495:9)
at TLSSocket.emit (node:events:514:28)
This issue may be due to network problems. As suggested, you can try manually installing it if you like. Go to your project's node_modules\electron
directory and then run node install.js
. This should manually initiate the installation process for Electron.
D:\Github\MQTTX>cd node_modules\electron
D:\Github\MQTTX\node_modules\electron>node install.js
RequestError: unable to verify the first certificate
at ClientRequest.<anonymous> (D:\Github\MQTTX\node_modules\got\source\request-as-event-emitter.js:178:14)
at Object.onceWrapper (node:events:629:26)
at ClientRequest.emit (node:events:526:35)
at origin.emit (D:\Github\MQTTX\node_modules\@szmarczak\http-timer\source\index.js:37:11)
at TLSSocket.socketErrorListener (node:_http_client:495:9)
at TLSSocket.emit (node:events:514:28)
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
I have no idea above it.
Network issues likely cause this error. To resolve this, please make sure you are using Node.js v16. Sometimes, specific versions of Node.js handle SSL/TLS certificate verification better.
If the problem persists after updating to Node.js v16, you could modify npm's configuration to ignore SSL certificate validation. This can be done with the following command:
npm config set strict-ssl false
Just to let you know, while this method might solve your immediate issue, it will cause your npm client to trust all SSL certificates, which could pose security risks. Therefore, it should be considered a temporary solution rather than a long-term practice. Once the issue is resolved, it is advisable to revert this setting to its default state:
npm config set strict-ssl true
Hope this helps you resolve the issue.
D:\Github\MQTTX>node -v
v20.10.0
npm config set strict-ssl false
not work for node v20.10.0
.
Have a try with v16
...
I'm not familiar with how to call the Win32 API in an electron environment.
Some demo code record following...
in package.json
"ffi-napi": "4.0.3",
"ref-napi": "3.0.3"
in background.ts
// ...
win = new BrowserWindow
// ...
console.warn(process.platform)
console.warn(os.release())
if (process.platform === 'win32' ) {
win?.on('ready-to-show', () => {
const hWnd = win?.getNativeWindowHandle()
console.log('Window handle:', hWnd)
WindowsDarkCaption.makeUp(hWnd);
})
}
class WindowsDarkCaption {
public static makeUp(hWnd : Buffer | undefined | number) : void {
if (!hWnd) {
return
}
const ffi = require('ffi-napi')
const ref = require('ref-napi')
if (typeof hWnd === 'object') {
hWnd = ref.address(hWnd);
}
const DwmWindowAttribute = {
UseImmersiveDarkMode: 20,
};
const dwmapi = new ffi.Library('dwmapi', {
'DwmSetWindowAttribute': ['int', ['pointer', 'uint', 'pointer', 'int']],
});
function dwmSetWindowAttribute(hWnd: number, attr: number, attrValue: number, attrSize: number) {
return dwmapi.DwmSetWindowAttribute(hWnd, attr, attrValue, attrSize);
}
function enableDarkModeForWindow(hWnd : number, enable : boolean) {
const darkMode = enable ? 1 : 0;
return dwmSetWindowAttribute(hWnd, DwmWindowAttribute.UseImmersiveDarkMode, darkMode, 4) >= 0;
}
enableDarkModeForWindow(<number>hWnd, true);
}
}
This software support dark mode title bar https://github.com/revezone/revezone
No one wants to fix it.
Sorry for the late reply. I have scheduled it for a future version, but currently, due to other high-priority tasks, we do not have the time to perfect it. Please be patient, and thank you for your suggestion.
Upgrading the electron version should fix this, Although the whole app will stop working as there are breaking changes in the code when upgrading from v13 to v31 😅
Here a temp method for using dark mode titlebar https://github.com/lemutec/MakeDark
Motivation
Fix the dark mode in windows OS.
Detailed design
Use Win32API to change the caption background color.
Here are some C# sample code:
Alternatives
empty
More detail (optional)
The result of the c# sample code:
Before
After