Subject: [pgAdmin][RM4348] Theme options in pgAdmin and dark theme

From: Aditya Toshniwal <[email-masked]>
Date: Wed, 6 Nov 2019 12:32:47 +0530

Hi Hackers,

Attached is the patch to introduce theme options in pgAdmin.
Changes include:
1) New theme option in preferences - Miscellaneous -> Themes. You can
select the theme from the dropdown. It also has a preview of the theme just
below the dropdown. Note that, a page refresh is needed to apply changes.
On saving, a dialog appears to ask for refresh.
2) You can create your own theme and submit to hackers. README is updated
to help you create a theme. Theme will be available only after bundle.
3) Correction of SASS variables at few places and few other CSS corrections.
4) Added iconfont-webpack-plugin, which will convert all the svg
files(monochrome) used as icons for buttons to font icons. This will allow
us to change the color of icon by using CSS color property.
5) All the .css files will bundle into a separate file now-
pgadmin.style.css. This will help reduce the size of theme css files as CSS
in .css files will not change with the change of SASS variables.
6) "Dark Beta" theme added as a new theme option.

How theme is built ?
Webpack config is changed to achieve it. On running yarn run bundle, code
will read all the directories in web/pgadmin/static/scss/resources which
will be considered as theme dirs, build a separate css for every theme and
then create a file named pgadmin.themes.json which will have all the
information required.

The patch also fixes RM4173, where there some issue with arrow icons in
browser tree.

Kindly review.

-- 
Thanks and Regards,
Aditya Toshniwal
Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"

---

From: Aditya Toshniwal <[email-masked]>
Date: Thu, 7 Nov 2019 18:38:39 +0530

Hi Hackers,

Attached is the updated patch with few more changes and corrections.
Kindly review.

---

From: Akshay Joshi <[email-masked]>
Date: Thu, 7 Nov 2019 18:55:33 +0530

Thanks, patch applied.

-- 
*Thanks & Regards*
*Akshay Joshi*

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

---

From: Dave Page <[email-masked]>
Date: Thu, 7 Nov 2019 14:18:16 +0000

>> Attached is the updated patch with few more changes and corrections.
I've committed a couple of minor tweaks - one to remove a space, e.g.

gettext('A page refresh is required to apply the theme. Do you wish to
refresh the page now ?'),

is now:

gettext('A page refresh is required to apply the theme. Do you wish to
refresh the page now?'),

And another change to fix the word wrapping in the README which was totally
different from the rest of the file.

Thanks!

>>> 2) You can create your own theme and submit to hackers. README is
>>> updated to help you create a theme. Theme will be available only after
>>> bundle.
>>> Webpack config is changed to achieve it. On running yarn run bundle,
>>> code will read all the directories in web/pgadmin/static/scss/resources
>>> which will be considered as theme dirs, build a separate css for every
>>> theme and then create a file named pgadmin.themes.json which will have all
>>> the information required.
>>>

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

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

---

From: Dave Page <[email-masked]>
Date: Thu, 7 Nov 2019 14:26:46 +0000

On Thu, Nov 7, 2019 at 2:18 PM Dave Page <[email-masked]> wrote:

> gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now ?'),
>
> is now:
>
> gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now?'),
>
> And another change to fix the word wrapping in the README which was
> totally different from the rest of the file.
>
> Thanks!
>

Oh, and do we need all the code in config.py? I really didn't even want a
config option in there to turn theming on or off (what's the point?), let
alone 20 new lines.

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 11 Nov 2019 12:31:03 +0530

Hi Dave,

On Thu, Nov 7, 2019 at 7:56 PM Dave Page <[email-masked]> wrote:

>> On Thu, Nov 7, 2019 at 1:25 PM Akshay Joshi <
>> [email-masked]> wrote:
>>
>>> Thanks, patch applied.
>>>
The code is added after the config_local and config_distro is loaded. So,
user won't be able to disable it unless he directly changes the config.py.
I'll reduce the code a bit.

---

From: Dave Page <[email-masked]>
Date: Mon, 11 Nov 2019 09:08:01 +0000

Hi

> user won't be able to disable it unless he directly changes the config.py.

That is clearly wrong and needs to be fixed. config_local and config_distro
should be able to override anything in config.py.

But... why allow the themes to be updated or disabled at all? It's not like
a non-developer can add new ones, and it's not a security issue that an
administrator might need to control. In fact, it's arguably an
accessibility feature, for those whose eyes (like mine) last the day better
with a darker theme.

Let's remove it entirely please. I don't see any good reason to have any of
that in config.py.

Thanks.

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 11 Nov 2019 15:00:10 +0530

Hi Dave,

On Mon, Nov 11, 2019 at 2:38 PM Dave Page <[email-masked]> wrote:

>>> Oh, and do we need all the code in config.py? I really didn't even want
>>> a config option in there to turn theming on or off (what's the point?), let
>>> alone 20 new lines.
>>>
> That is clearly wrong and needs to be fixed. config_local and
> config_distro should be able to override anything in config.py.
>
> But... why allow the themes to be updated or disabled at all? It's not
> like a non-developer can add new ones, and it's not a security issue that
> an administrator might need to control. In fact, it's arguably an
> Let's remove it entirely please. I don't see any good reason to have any
> of that in config.py.
>
Intention is not to allow disabling the themes, but it's the feature
implementation code. I'll move out the code.

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 11 Nov 2019 15:07:25 +0530

Hi Hackers,

Attached is the patch for further improvements in the Dark theme colors.
Gray shades and other colors are changed to identify different components
more clearly. Few of the controls were missing the privileges of dark
theme, fixed that.
Few dashboard graph related changes.
As suggested, theme related code changes is removed from config.py and
moved to miscellaneous under a new package - Themes. Thank you @Ashesh Vashi
<[email-masked]> for inputs on that.

Kindly review.

On Mon, Nov 11, 2019 at 3:00 PM Aditya Toshniwal <
[email-masked]> wrote:

>>> The code is added after the config_local and config_distro is loaded.
>>> So, user won't be able to disable it unless he directly changes the
>>> config.py.
>>>
>>

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 11 Nov 2019 15:42:43 +0530

Hi,

Kindly hold on with the patch. Few more changes required per review by @Ashesh
Vashi <[email-masked]> .

On Mon, Nov 11, 2019 at 3:07 PM Aditya Toshniwal <
[email-masked]> wrote:

> moved to miscellaneous under a new package - Themes. Thank you @Ashesh
> Vashi <[email-masked]> for inputs on that.
>
> Kindly review.
>
>>>>> Oh, and do we need all the code in config.py? I really didn't even
>>>>> want a config option in there to turn theming on or off (what's the
>>>>> point?), let alone 20 new lines.
>>>>>

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 11 Nov 2019 17:25:00 +0530

Hi Hackers,

Attached is the updated patch.
Kindly review.

On Mon, Nov 11, 2019 at 3:42 PM Aditya Toshniwal <
[email-masked]> wrote:

>>>> Let's remove it entirely please. I don't see any good reason to have
>>>> any of that in config.py.
>>>>

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 11 Nov 2019 18:52:23 +0530

Thanks, patch applied.

As per discussion with Aditya, we have removed customized scroll bars for
the time being as they are not clearly visible with some of the components.

On Mon, Nov 11, 2019 at 5:25 PM Aditya Toshniwal <
[email-masked]> wrote:

>>> Gray shades and other colors are changed to identify different
>>> components more clearly. Few of the controls were missing the privileges of
>>> dark theme, fixed that.

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Dave Page <[email-masked]>
Date: Mon, 11 Nov 2019 15:03:43 +0000

Hi

That's looking a lot better. I see a couple of issues (screenshots
attached):

- The combo box on the query tool toolbar isn't dark.
- The tagline on the dashboard logo isn't readable.

A couple of other thoughts:

- The guide lines on the graphs are still too bright. Let's make them the
same colour as the graph boarders please.

- The header bar foreground colour and the dividing white line below it
seem quite harsh. Are they pure white? They should be softened a little bit.

Thanks!

On Mon, Nov 11, 2019 at 1:22 PM Akshay Joshi <[email-masked]>
wrote:

>>>>>>>>> And another change to fix the word wrapping in the README which
>>>>>>>>> was totally different from the rest of the file.
>>>>>>>>>
>>>>>>>>> Thanks!
>>>>>>>>>
>>>>>>>>
>>>>>>> The code is added after the config_local and config_distro is
>>>>>>> loaded. So, user won't be able to disable it unless he directly changes the
>>>>>>> config.py.
>>>>>>>
>>>>>>
>>>>>> But... why allow the themes to be updated or disabled at all? It's
>>>>>> not like a non-developer can add new ones, and it's not a security issue
>>>>>> that an administrator might need to control. In fact, it's arguably an

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 11 Nov 2019 20:41:29 +0530

Hi Dave,

> - The combo box on the query tool toolbar isn't dark.
I'm not sure why you are not able to see it but I've changed it. Try a
python restart.

> - The tagline on the dashboard logo isn't readable.
Yes because that's an SVG image. We may need to make it completely from
HTML.

> same colour as the graph boarders please.
There is technical limitation here. To change those grid lines based on
theme we need to import variables in JS. I didn't find a way to dynamically
load SASS variables based on theme.
So I chose color which would work for both dark and black backgrounds and
is hard coded in JS.

> seem quite harsh. Are they pure white? They should be softened a little bit.
I'll check the color, but AFAIR it's not pure white.

>
> Thanks!
>
> On Mon, Nov 11, 2019 at 1:22 PM Akshay Joshi <

---

From: Dave Page <[email-masked]>
Date: Mon, 11 Nov 2019 15:42:51 +0000

Hi

> I'm not sure why you are not able to see it but I've changed it. Try a

I've done a make clean/make bundle, restarted Python, and done a hard
reload in the browser to no joy. FYI, I'm running in Chrome 78.0.3904.70 on
macOS.

> Yes because that's an SVG image. We may need to make it completely from

Can we have an alternate image? Maybe if it's served through a flask route
and we look for /logo.png?t=dark or something like that to select the image
version?

> So I chose color which would work for both dark and black backgrounds and

Urgh, OK. We'll need to think about that then.

> I'll check the color, but AFAIR it's not pure white.

OK, thanks!

>>> As per discussion with Aditya, we have removed customized scroll bars
>>> for the time being as they are not clearly visible with some of the
>>> components.
>>>
>>>>>> As suggested, theme related code changes is removed from config.py
>>>>>> and moved to miscellaneous under a new package - Themes. Thank you @Ashesh
>>>>>>>>>> Oh, and do we need all the code in config.py? I really didn't
>>>>>>>>>> even want a config option in there to turn theming on or off (what's the
>>>>>>>> Let's remove it entirely please. I don't see any good reason to
>>>>>>>> have any of that in config.py.
>>>>>>>>

---

From: Aditya Toshniwal <[email-masked]>
Date: Tue, 12 Nov 2019 10:29:04 +0530

Hi Hackers,

Attached is a patch to address the review comments.

> reload in the browser to no joy. FYI, I'm running in Chrome 78.0.3904.70 on
I'm not seeing it. Pulled latest, bundled and restarted. :/

> and we look for /logo.png?t=dark or something like that to select the image
Or better embed the SVG so that we can change colors using CSS. Patch
attached. You can tweak $color-brand to change the welcome dashboards blue
color.

>>> - The guide lines on the graphs are still too bright. Let's make them
>>> the same colour as the graph boarders please.
>>>
I didn't find anyone using white color. Could you please share a screenshot
? I've changed the foreground from #ddd to #d4d4d4 to soften a bit.

>>>>>> Kindly hold on with the patch. Few more changes required per review
>>>>>> by @Ashesh Vashi <[email-masked]> .
>>>>>>
>>>>>>>> Intention is not to allow disabling the themes, but it's the
>>>>>>>> feature implementation code. I'll move out the code.
>>>>>>>>
>>>>>>>>>
>>>>>>>>> Thanks.
>>>>>>>>>
>>>>>>>>>

---

From: Dave Page <[email-masked]>
Date: Tue, 12 Nov 2019 09:17:33 +0000

Hi

> I'm not seeing it. Pulled latest, bundled and restarted. :/

So I eventually found that I had a rogue Python process running pgAdmin
that somehow got detached from PyCharm. Killed that, restarted, and now it
looks good.

>> Can we have an alternate image? Maybe if it's served through a flask
>> route and we look for /logo.png?t=dark or something like that to select the
>> image version?
>>

Looks good.

>>> So I chose color which would work for both dark and black backgrounds
>>> and is hard coded in JS.
>>>
>>
> I didn't find anyone using white color. Could you please share a
> screenshot ? I've changed the foreground from #ddd to #d4d4d4 to soften a
> bit.
>

Attached. It may just be that it looks a little sharp because it's a long
line. Maybe we should just make it a darker shade entirely.

BTW, what was the reason for removing the styling from the scroll bars?

>>>>>>>>>>>>> And another change to fix the word wrapping in the README
>>>>>>>>>>>>> which was totally different from the rest of the file.
>>>>>>>>>>>>>
>>>>>>>>>>>>> Thanks!
>>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>> But... why allow the themes to be updated or disabled at all?
>>>>>>>>>> It's not like a non-developer can add new ones, and it's not a security
>>>>>>>>>> issue that an administrator might need to control. In fact, it's arguably
>>>>>>>>>> an accessibility feature, for those whose eyes (like mine) last the day
>>>>>>>>>> better with a darker theme.
>>>>>>>>>>

---

From: Aditya Toshniwal <[email-masked]>
Date: Tue, 12 Nov 2019 15:20:04 +0530

Hi,

On Tue, Nov 12, 2019 at 2:47 PM Dave Page <[email-masked]> wrote:

>>>>> - The header bar foreground colour and the dividing white line below
>>>>> it seem quite harsh. Are they pure white? They should be softened a little
>>>>> bit.
>>>>>

Why can't I see it :/
Maybe it got fixed along with the dark drop down for no limit. Could you
please check again.

> BTW, what was the reason for removing the styling from the scroll bars?
We had given gray shades to scrollbar which were not clearly visible for
some tables. Plus, for systems were scrollbar is not always enabled was
showing scrollbar. It should appear only on scroll on those systems.

---

From: Dave Page <[email-masked]>
Date: Tue, 12 Nov 2019 09:55:30 +0000

Hi

> showing scrollbar. It should appear only on scroll on those systems.

And you're working on that? We can't keep the ugly grey scroll bars!

Thanks!

---

From: Avin Kavish <[email-masked]>
Date: Tue, 12 Nov 2019 15:30:35 +0530

For inspiration,

On Tue, Nov 12, 2019 at 3:25 PM Dave Page <[email-masked]> wrote:

>>> Attached. It may just be that it looks a little sharp because it's a
>>> long line. Maybe we should just make it a darker shade entirely.
>>>
>>>
>>
>> Why can't I see it :/

---

From: Aditya Toshniwal <[email-masked]>
Date: Tue, 12 Nov 2019 15:41:21 +0530

> Nope, it's definitely still there:
I checked on 2-3 systems. It looks fine. May be the permanent enabled
scrollbar causing it look like that.

> And you're working on that? We can't keep the ugly grey scroll bars!
OK. I'll take it as priority.

---

From: Akshay Joshi <[email-masked]>
Date: Tue, 12 Nov 2019 17:55:20 +0530

Thanks, patch applied.

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Aditya Toshniwal <[email-masked]>
Date: Tue, 12 Nov 2019 19:16:53 +0530

Hi Hackers,

Attached is the patch to customize the scrollbar styling. A new SASS
variable added - $scrollbar-base-color is added to change the color as per
theme.
Please note, customization of scrollbar works only in webkit browsers like
Chrome, Safari. Mozilla does not have any way to customize.

Kindly review.

On Tue, Nov 12, 2019 at 5:55 PM Akshay Joshi <[email-masked]>
wrote:

>>>> Maybe it got fixed along with the dark drop down for no limit. Could
>>>> you please check again.
>>>>
>>>
>>>> We had given gray shades to scrollbar which were not clearly visible
>>>> for some tables. Plus, for systems were scrollbar is not always enabled was

---

From: Dave Page <[email-masked]>
Date: Tue, 12 Nov 2019 13:59:16 +0000

> Chrome, Safari. Mozilla does not have any way to customize.

That looks much nicer :-).

One more issue I just spotted - I'm guessing it's specific to Alertify
dialogues:

---

From: Akshay Joshi <[email-masked]>
Date: Tue, 12 Nov 2019 19:40:41 +0530

Thanks, patch applied.

On Tue, Nov 12, 2019 at 7:17 PM Aditya Toshniwal <
[email-masked]> wrote:

> On Tue, Nov 12, 2019 at 5:55 PM Akshay Joshi <

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Aditya Toshniwal <[email-masked]>
Date: Wed, 13 Nov 2019 10:03:40 +0530

Hi Dave,

On Tue, Nov 12, 2019 at 7:29 PM Dave Page <[email-masked]> wrote:

>> Please note, customization of scrollbar works only in webkit browsers
>> like Chrome, Safari. Mozilla does not have any way to customize.
>>
>
This is your browser autofill which is changing the color and not the issue
with the dialogs.

---

From: Aditya Toshniwal <[email-masked]>
Date: Wed, 13 Nov 2019 10:45:36 +0530

Hi Hackers,

Attached is the patch to set browser autofill color. I've used primary
light color to highlight autofill. Note that, this works only on webkit
browsers.
Kindly review.

On Wed, Nov 13, 2019 at 10:03 AM Aditya Toshniwal <
[email-masked]> wrote:

> This is your browser autofill which is changing the color and not the
> issue with the dialogs.
>
>>
>>
>> --
>> Dave Page

---

From: Akshay Joshi <[email-masked]>
Date: Wed, 13 Nov 2019 11:36:16 +0530

Thanks, patch applied.

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Aditya Toshniwal <[email-masked]>
Date: Wed, 20 Nov 2019 11:58:57 +0530

Hi Hackers,

pgadmin.themes.json is created in web/pgadmin/misc/themes on "yarn run bundle"
and is copied to generated directory also. This file is required for themes
to show up.
Currently, pgadmin.themes.json file is referred
from web/pgadmin/misc/themes directory by the app. It is better to refer
from generated directory instead so that it is not missed in the pgAdmin
distribution phase. The pgAdmin 4.15 wheel distro is not having this file
in web/pgadmin/misc/themes directory and so themes are not available in it.
Attached is the patch to fix this.

---

From: Akshay Joshi <[email-masked]>
Date: Wed, 20 Nov 2019 15:07:17 +0530

Thanks, patch applied.

On Wed, Nov 20, 2019 at 11:59 AM Aditya Toshniwal <
[email-masked]> wrote:

> Hi Hackers,
>
> pgadmin.themes.json is created in web/pgadmin/misc/themes on "yarn run
> bundle" and is copied to generated directory also. This file is required
> for themes to show up.
> On Wed, Nov 13, 2019 at 11:36 AM Akshay Joshi <

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*

---

From: Dave Page <[email-masked]>
Date: Wed, 20 Nov 2019 12:10:29 +0000

Thanks all!

On Wed, Nov 20, 2019 at 4:37 AM Akshay Joshi <[email-masked]>
wrote:

>>>>>>> Please note, customization of scrollbar works only in webkit
>>>>>>> browsers like Chrome, Safari. Mozilla does not have any way to customize.
>>>>>>>
>>>>>>
>>>>>> One more issue I just spotted - I'm guessing it's specific to
>>>>>> Alertify dialogues:
>>>>>>
>>>>>>