Subject: RM4292 - Dark mode support for Windows/macOS

From: Dave Page <[email-masked]>
Date: Wed, 8 Apr 2020 16:38:10 +0100

The attached patch detects if dark mode is enabled on Windows (10+)/macOS
(10.14+) at server start, and styles the runtime accordingly. It doesn't
dynamically switch if the user changes their preferences.

Linux builds continue to use the standard styling from Qt.

NOTE: I've tested this on macOS, but my Windows build system is playing up
at the moment. Akshay, can you have someone on your team test it please? I
believe the code should work; it's just a case of reading a reg key and
then doing the same thing as on macOS to set the theme accordingly.

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

---

From: Akshay Joshi <[email-masked]>
Date: Thu, 9 Apr 2020 11:12:45 +0530

Neel,

Can you please review/test it?

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*
*EnterpriseDB Software India Private Limited*
*Mobile: +91 976-788-8246*

---

From: Neel Patel <[email-masked]>
Date: Thu, 9 Apr 2020 18:58:08 +0530

Hi Dave,

I reviewed and tested the code on Windows and fixed below issues. Except
below, it looks good to me.

   - Compilation error on windows
   - In configuration window, "maximumSize" of the control is provided
   along with "minimumSize" so it prevents control from expanding when the
   user resizes the window. Removed maxSize and set as default.

A Couple of points for discussion.

   - AFAIK - Users need to manually set the "AppsUseLightTheme" value in
   the registry, right ? Do we need to document that somewhere ?
   - As we have introduced 2 new "dark.qss" & "light.qss" files, so during
   packaging we need to make sure that it should reside along with "pgAdmin4"
   application binary otherwise those css will not be applied at runtime.
   right ?
   - Checkbox is not visible in Configure window UI as per below
   screenshot. Are you able to see on Mac ? If no, I can take a look at it.

Attached is the updated patch.

Thanks,
Neel Patel

On Thu, Apr 9, 2020 at 11:12 AM Akshay Joshi <[email-masked]>
wrote:

>> NOTE: I've tested this on macOS, but my Windows build system is playing
>> up at the moment. Akshay, can you have someone on your team test it please?
>> I believe the code should work; it's just a case of reading a reg key and

---

From: Dave Page <[email-masked]>
Date: Thu, 9 Apr 2020 17:49:25 +0100

Hi

On Thu, Apr 9, 2020 at 2:28 PM Neel Patel <[email-masked]>
wrote:

> Oops, thanks.

> OK.

> No, it's an option if you go to personalise your desktop:

>
>    - As we have introduced 2 new "dark.qss" & "light.qss" files, so
>    during packaging we need to make sure that it should reside along with
>    "pgAdmin4" application binary otherwise those css will not be applied at
>    runtime. right ?
>
> Hmm, that's a good point. I'll look at that.

>    screenshot. Are you able to see on Mac ? If no, I can take a look at it.

No, that works on Mac. If you can look at it that would be great (are the
SVGs from the patch in your filesystem?):

Thanks!

> On Thu, Apr 9, 2020 at 11:12 AM Akshay Joshi <
> [email-masked]> wrote:
>
>> Neel,
>>
>>> The attached patch detects if dark mode is enabled on Windows
>>> (10+)/macOS (10.14+) at server start, and styles the runtime accordingly.
>>> It doesn't dynamically switch if the user changes their preferences.
>>>

---

From: Neel Patel <[email-masked]>
Date: Thu, 9 Apr 2020 22:26:29 +0530

Hi Dave,

>> No, it's an option if you go to personalise your desktop:

OK

> SVGs from the patch in your filesystem?):

Yes, all SVGs from the patch are there. I will take a look.

---

From: Neel Patel <[email-masked]>
Date: Fri, 10 Apr 2020 17:40:49 +0530

Hi Dave/Akshay,

I had manually added the theme parameter in registry but after changing
those from the control panel as suggested by Dave, all control looks fine
in dark theme.
Please find the attached patch for review.

Thanks,
Neel Patel

On Thu, Apr 9, 2020 at 10:26 PM Neel Patel <[email-masked]>
wrote:

>>>    - AFAIK - Users need to manually set the "AppsUseLightTheme" value
>>>    in the registry, right ? Do we need to document that somewhere ?
>>>
>>>>> NOTE: I've tested this on macOS, but my Windows build system is
>>>>> playing up at the moment. Akshay, can you have someone on your team test it
>>>>> please? I believe the code should work; it's just a case of reading a reg
>>>>> key and then doing the same thing as on macOS to set the theme accordingly.
>>>>>
>>>>> --
>>>>> Dave Page

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 13 Apr 2020 14:05:59 +0530

Thanks, patch applied.

On Fri, Apr 10, 2020 at 5:41 PM Neel Patel <[email-masked]>
wrote:

>>>> I reviewed and tested the code on Windows and fixed below issues.
>>>> Except below, it looks good to me.
>>>>
>>> No, that works on Mac. If you can look at it that would be great (are
>>> the SVGs from the patch in your filesystem?):
>>>
>>

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Dave Page <[email-masked]>
Date: Mon, 13 Apr 2020 12:27:28 +0100

Did you fix the Windows installer and macOS appbundle to ship the
additional required files?

On Mon, Apr 13, 2020 at 9:36 AM Akshay Joshi <[email-masked]>
wrote:

>>>>>    - In configuration window, "maximumSize" of the control is
>>>>>    provided along with "minimumSize" so it prevents control from expanding
>>>>>    when the user resizes the window. Removed maxSize and set as default.
>>>>>
>>>>> OK.
>>>>
>>>>

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 13 Apr 2020 17:00:25 +0530

No, I think I missed that.

On Mon, Apr 13, 2020 at 4:57 PM Dave Page <[email-masked]> wrote:

> On Mon, Apr 13, 2020 at 9:36 AM Akshay Joshi <
>>>>>>    - AFAIK - Users need to manually set the "AppsUseLightTheme"
>>>>>>    value in the registry, right ? Do we need to document that somewhere ?
>>>>>>

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Dave Page <[email-masked]>
Date: Mon, 13 Apr 2020 12:35:38 +0100

That's why it's still on my todo, but feel free to fix it if you like :-p

On Mon, Apr 13, 2020 at 12:30 PM Akshay Joshi <[email-masked]>
wrote:

>>>>>> On Thu, Apr 9, 2020 at 2:28 PM Neel Patel <
>>>>>> [email-masked]> wrote:
>>>>>>
>>>>>>> Hi Dave,
>>>>>>>

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 13 Apr 2020 17:07:58 +0530

> That's why it's still on my todo, but feel free to fix it if you like :-p

   Currently having too much of review task, once done will fix that.

>
> On Mon, Apr 13, 2020 at 12:30 PM Akshay Joshi <
>>>>> I had manually added the theme parameter in registry but after
>>>>> changing those from the control panel as suggested by Dave, all control
>>>>> looks fine in dark theme.
>>>>> On Thu, Apr 9, 2020 at 10:26 PM Neel Patel <
>>>>>>>>    - As we have introduced 2 new "dark.qss" & "light.qss" files,
>>>>>>>>    so during packaging we need to make sure that it should reside along with
>>>>>>> No, that works on Mac. If you can look at it that would be great
>>>>>>> (are the SVGs from the patch in your filesystem?):
>>>>>>>
>>>>>>

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Neel Patel <[email-masked]>
Date: Mon, 13 Apr 2020 18:37:51 +0530

Hi,

I have tried to fix the bundling issue for Windows and Mac. Attached is the
initial patch. Do review it and let me know if I missed anything.

Thanks,
Neel Patel

On Mon, Apr 13, 2020 at 5:08 PM Akshay Joshi <[email-masked]>
wrote:

>>>>> On Fri, Apr 10, 2020 at 5:41 PM Neel Patel <

---

From: Dave Page <[email-masked]>
Date: Tue, 14 Apr 2020 09:18:18 +0100

Looks reasonable to an eyeball review. Thanks!

On Mon, Apr 13, 2020 at 2:08 PM Neel Patel <[email-masked]>
wrote:

> Hi,
>
> I have tried to fix the bundling issue for Windows and Mac. Attached is
> the initial patch. Do review it and let me know if I missed anything.
>
> Thanks,
> Neel Patel
>
> On Mon, Apr 13, 2020 at 5:08 PM Akshay Joshi <

---

From: Akshay Joshi <[email-masked]>
Date: Tue, 14 Apr 2020 15:49:38 +0530

Thanks, patch applied

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Neel Patel <[email-masked]>
Date: Tue, 14 Apr 2020 17:04:44 +0530

Hi Akshay,

On Mac only, build gets failed and it gives below error. Currently I am
doing the setup in my new Mac with Qt so meanwhile can you please apply the
attached patch with prefix in the qrc file which may fix the issue ?

RCC: Error in 'breeze.qrc': Cannot find file 'light/hmovetoolbar.svg'
RCC: Error in 'breeze.qrc': Cannot find file 'light/vmovetoolbar.svg'
RCC: Error in 'breeze.qrc': Cannot find file 'light/hsepartoolbar.svg'

Thanks,

Neel Patel

On Tue, Apr 14, 2020 at 3:49 PM Akshay Joshi <[email-masked]>
wrote:

>>>>>>>>>>> I reviewed and tested the code on Windows and fixed below
>>>>>>>>>>> issues. Except below, it looks good to me.
>>>>>>>>>>>
>>>>>>>>>>>    - As we have introduced 2 new "dark.qss" & "light.qss"
>>>>>>>>>>>    files, so during packaging we need to make sure that it should reside along
>>>>>>>>>>>    with "pgAdmin4" application binary otherwise those css will not be applied
>>>>>>>>>>>    at runtime. right ?
>>>>>>>>>>>
>>>>>>>>>>>    - Checkbox is not visible in Configure window UI as per
>>>>>>>>>>>    below screenshot. Are you able to see on Mac ? If no, I can take a look at
>>>>>>>>>>>    it.
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>>>> NOTE: I've tested this on macOS, but my Windows build system
>>>>>>>>>>>>> is playing up at the moment. Akshay, can you have someone on your team test
>>>>>>>>>>>>> it please? I believe the code should work; it's just a case of reading a
>>>>>>>>>>>>> reg key and then doing the same thing as on macOS to set the theme
>>>>>>>>>>>>> accordingly.
>>>>>>>>>>>>>
>>>>>>>>>>>>> --
>>>>>>>>>>>>> Dave Page

---

From: Akshay Joshi <[email-masked]>
Date: Tue, 14 Apr 2020 21:18:11 +0530

Thanks, patch applied.

On Tue, Apr 14, 2020 at 5:04 PM Neel Patel <[email-masked]>
wrote:

> On Tue, Apr 14, 2020 at 3:49 PM Akshay Joshi <
>>>>>>>>>>>>    - AFAIK - Users need to manually set the
>>>>>>>>>>>>    "AppsUseLightTheme" value in the registry, right ? Do we need to document
>>>>>>>>>>>>    that somewhere ?
>>>>>>>>>>>>

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Dave Page <[email-masked]>
Date: Wed, 15 Apr 2020 12:34:39 +0100

Hi

> Yes, all SVGs from the patch are there. I will take a look.
So interestingly, with the snapshot build I now see this:

Any idea what's going on?

---

From: Neel Patel <[email-masked]>
Date: Wed, 15 Apr 2020 18:41:38 +0530

Hi Dave,

> Any idea what's going on?

All svg files and qss reside along with the application ?
Initially I got this issue and when I copied the qss and svg files along
with the application, it resolved the issue but again I will double-check
and update on this.

---

From: Dave Page <[email-masked]>
Date: Wed, 15 Apr 2020 14:42:20 +0100

> with the application, it resolved the issue but again I will double-check

Actually, no - I don't see them in the appbundle.

---

From: Neel Patel <[email-masked]>
Date: Mon, 20 Apr 2020 18:58:56 +0530

Hi,

In windows, I am able to reproduce it with my dev environment and after
copying "Qt5Svg.dll", it renders the checkbox and for Mac build, we should
copy theme components in "Resources" folder which might solve the problem
and update the patch accordingly.
Once snapshot build is ready, I will verify with the same. Do review it.

Thanks,
Neel Patel

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 20 Apr 2020 19:19:27 +0530

Thanks, patch applied without testing it.

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Neel Patel <[email-masked]>
Date: Wed, 22 Apr 2020 17:09:58 +0530

Hi,

After debugging, I found that the required image formats Qt plugin was
missing in bundling and due to that "checkbox" images or all images were
not rendered from qss files. It was working fine in my local development
environment because all required plugins to load the images are present. I
have attached the patch for windows and Mac. Can you please review ? I will
verify once snapshot build is available.

Thanks,
Neel Patel

On Mon, Apr 20, 2020 at 7:19 PM Akshay Joshi <[email-masked]>
wrote:

>>>> Initially I got this issue and when I copied the qss and svg files
>>>> along with the application, it resolved the issue but again I will
>>>> double-check and update on this.
>>>>
>>>

---

From: Dave Page <[email-masked]>
Date: Wed, 22 Apr 2020 12:42:40 +0100

Doesn't that revert the previous patch that copied all the required files
into the staging directory?

On Wed, Apr 22, 2020 at 12:40 PM Neel Patel <[email-masked]>
wrote:

> On Mon, Apr 20, 2020 at 7:19 PM Akshay Joshi <
>>>>>> On Thu, Apr 9, 2020 at 5:56 PM Neel Patel <

---

From: Neel Patel <[email-masked]>
Date: Wed, 22 Apr 2020 17:25:37 +0530

yes, as i have tested on my local env without those files and it worked. So
now those staging files for dark themes are not required ( *.qss,
dark/*.svg, light/*.svg etc )  as qss are bundled within the application
itself. If we copy those files along with the application and change the
QSS, it is not affecting any Qt controls. At compile time, whatever the qss
embedded to application, that will be applied.

Thanks,
Neel Patel

On Wed, Apr 22, 2020 at 5:12 PM Dave Page <[email-masked]> wrote:

>>>>> On Wed, Apr 15, 2020 at 2:11 PM Neel Patel <

---

From: Dave Page <[email-masked]>
Date: Wed, 22 Apr 2020 13:04:59 +0100

Ah, OK. Cool :-)

On Wed, Apr 22, 2020 at 12:55 PM Neel Patel <[email-masked]>
wrote:

> yes, as i have tested on my local env without those files and it worked.
> So now those staging files for dark themes are not required ( *.qss,
>>>>> In windows, I am able to reproduce it with my dev environment and
>>>>> after copying "Qt5Svg.dll", it renders the checkbox and for Mac build, we
>>>>> should copy theme components in "Resources" folder which might solve the
>>>>> problem and update the patch accordingly.

---

From: Akshay Joshi <[email-masked]>
Date: Wed, 22 Apr 2020 18:48:51 +0530

Thanks, patch applied.

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*