Added High Contrast theme support. Fixes #5653

Fixed text color issue in explain analyze for the Dark theme. Fixes #5677

docs/en_US/enabling_ldap_authentication.rst

@@ -38,6 +38,16 @@ and modify the values for the following parameters:
    want to connect to. For example, 'ldap://172.16.209.35:389' is a valid
    LDAP_SERVER_URI where ldap is the connection protocol, 172.16.209.35 is the IP
    address and 389 is the port. Port 636 is used for the ldaps communication protocol."
+   "LDAP_BIND_USER", "The account of the user to log in for simple bind.
+   Set this parameter to allow the connection to bind using a dedicated user.
+   After the connection is made, the pgadmin login user will be further
+   authenticated by the username and password provided at the login screen.
+
+   This is an optional parameter. If you do not specify any value for LDAP_BIND_USER,
+   LDAP connection and authentication will be done by the username and password provided
+   at the login screen."
+   "LDAP_BIND_PASSWORD", "Password for simple bind.
+   Specify the value if you have set the LDAP_BIND_USER parameter."
    "LDAP_BASE_DN","Specifies the base DN from where a server will start the search
    for users. For example, an LDAP search for any user will be performed by the server
    starting at the base DN (dc=example,dc=com). When the base DN matches, the full

docs/en_US/preferences.rst

@@ -185,6 +185,7 @@ Expand the *Miscellaneous* node to specify miscellaneous display preferences.
 * Use the *Themes* drop-down listbox to select the theme for pgAdmin. You'll also get a preview just below the
   drop down. Note that, to apply the theme you need to refresh the pgAdmin page. You can also submit your
   own themes, check `here <https://git.postgresql.org/gitweb/?p=pgadmin4.git;a=blob_plain;f=README>`_ how.
+  Currently we support Standard, Dark and High Contrast (Beta) theme.
 
 The Paths Node
 **************

docs/en_US/release_notes_4_24.rst

@@ -14,6 +14,7 @@ New features
 | `Issue #5583 <https://redmine.postgresql.org/issues/5583>`_ -  Added support for schema level restriction.
 | `Issue #5601 <https://redmine.postgresql.org/issues/5601>`_ -  Added RLS Policy support in Schema Diff.
 | `Issue #5622 <https://redmine.postgresql.org/issues/5622>`_ -  Added support for permissive/restricted policy type while creating RLS Policy.
+| `Issue #5653 <https://redmine.postgresql.org/issues/5653>`_ -  Added High Contrast theme support.
 
 Housekeeping
 ************
@@ -21,7 +22,6 @@ Housekeeping
 | `Issue #5323 <https://redmine.postgresql.org/issues/5323>`_ -  Improve code coverage and API test cases for Foreign Data Wrapper.
 | `Issue #5326 <https://redmine.postgresql.org/issues/5326>`_ -  Improve code coverage and API test cases for Domain and Domain Constraints.
 | `Issue #5329 <https://redmine.postgresql.org/issues/5329>`_ -  Improve code coverage and API test cases for FTS Configuration, FTS Parser, FTS Dictionaries, and FTS Template.
-| `Issue #5666 <https://redmine.postgresql.org/issues/5666>`_ -  Added missing dependencies/dependent and corrected some wrongly identified.
 
 Bug fixes
 *********
@@ -45,5 +45,7 @@ Bug fixes
 | `Issue #5633 <https://redmine.postgresql.org/issues/5633>`_ -  Ensure that create RLS Policy menu should not be visible for catalog objects.
 | `Issue #5647 <https://redmine.postgresql.org/issues/5647>`_ -  Fixed an issue where difference DDL is showing the wrong SQL when changing the policy owner.
 | `Issue #5662 <https://redmine.postgresql.org/issues/5662>`_ -  Fixed accessibility issue where few dialogs are not rendering properly when we zoomed in browser window 200% and screen resolution is low.
+| `Issue #5666 <https://redmine.postgresql.org/issues/5666>`_ -  Added missing dependencies/dependent and corrected some wrongly identified.
 | `Issue #5673 <https://redmine.postgresql.org/issues/5673>`_ -  Fixed an issue where fetching the schema throws an error if the database is not connected in Schema Diff.
-| `Issue #5675 <https://redmine.postgresql.org/issues/5675>`_ -  Fixed CSRF errors when pgAdmin opened in an iframe on safari browser.
+| `Issue #5675 <https://redmine.postgresql.org/issues/5675>`_ -  Fixed CSRF errors when pgAdmin opened in an iframe on safari browser.
+| `Issue #5677 <https://redmine.postgresql.org/issues/5677>`_ -  Fixed text color issue in explain analyze for the Dark theme.

web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js

@@ -213,7 +213,7 @@ define('pgadmin.node.fts_configuration', [
           '   </div>',
           '   <div class="col-6" header="token"></div>',
           '   <div class="col-2">',
-          '     <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ><span class="sr-only">' + gettext('Add Token') + '</span></button>',
+          '     <button class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ><span class="sr-only">' + gettext('Add Token') + '</span></button>',
           '   </div>',
           '  </div>',
           ' </div>',

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js

@@ -450,7 +450,7 @@ define('pgadmin.node.exclusion_constraint', [
           titleTmpl = _.template([
             '<div class="subnode-header">',
             '  <label class="control-label pg-el-sm-10"><%-label%></label>',
-            '  <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
+            '  <button class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
             '</div>'].join('\n')),
           $gridBody =
           $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js

@@ -385,7 +385,7 @@ define('pgadmin.node.foreign_key', [
           titleTmpl = _.template([
             '<div class="subnode-header">',
             '  <label class="control-label pg-el-sm-10"><%-label%></label>',
-            '  <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
+            '  <button class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
             '</div>'].join('\n')),
           $gridBody =
           $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(

web/pgadmin/browser/server_groups/servers/static/js/variable.js

@@ -338,7 +338,7 @@ function(gettext, _, $, Backbone, Backform, Backgrid, Alertify, pgAdmin, pgNode)
             titleTmpl = _.template([
               '<div class=\'subnode-header\'>',
               '<span class=\'control-label\'><%-label%></span>',
-              '<button class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + gettext('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>><span class="sr-only">' + gettext('Add new row') + '</span></button>',
+              '<button class=\'btn btn-sm-sq btn-primary-icon add fa fa-plus\' title=\'' + gettext('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>><span class="sr-only">' + gettext('Add new row') + '</span></button>',
               '</div>'].join('\n')),
             $gridBody =
             $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(

web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js

@@ -190,7 +190,7 @@ define('pgadmin.node.tablespace', [
                   return {
                     buttons: [{
                       text: '', key: 112,
-                      className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                      className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                       attrs:{name:'dialog_help', type:'button', label: gettext('Users'),
                         url: url_for('help.static', {'filename': 'move_objects.html'})},
                     },{

web/pgadmin/browser/static/js/browser.js

@@ -603,7 +603,7 @@ define('pgadmin.browser', [
               return {
                 buttons:[{
                   text: '',
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',

web/pgadmin/browser/static/js/collection.js

@@ -246,7 +246,7 @@ define([
           label: '',
           type: 'delete',
           tooltip: gettext('Delete/Drop'),
-          extraClasses: ['btn-secondary m-1', 'delete_multiple'],
+          extraClasses: ['btn-primary-icon m-1', 'delete_multiple'],
           icon: 'fa fa-lg fa-trash-o',
           disabled:  (_.isFunction(that.canDrop)) ? !(that.canDrop.apply(self, [data, item])) : (!that.canDrop),
           register: function(btn) {
@@ -260,7 +260,7 @@ define([
           label: '',
           type: 'delete',
           tooltip: gettext('Drop Cascade'),
-          extraClasses: ['btn-secondary m-1', 'delete_multiple_cascade'],
+          extraClasses: ['btn-primary-icon m-1', 'delete_multiple_cascade'],
           icon: 'pg-font-icon icon-drop-cascade',
           disabled: (_.isFunction(that.canDropCascade)) ? !(that.canDropCascade.apply(self, [data, item])) : (!that.canDropCascade),
           register: function(btn) {

web/pgadmin/browser/static/js/node.js

@@ -1245,7 +1245,7 @@ define('pgadmin.browser.node', [
               label: '',
               type: 'help',
               tooltip: gettext('SQL help for this object type.'),
-              extraClasses: ['btn-secondary', 'btn-secondary', 'm-1'],
+              extraClasses: ['btn-primary-icon', 'btn-primary-icon', 'm-1'],
               icon: 'fa fa-lg fa-info',
               disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
               register: function(btn) {
@@ -1498,7 +1498,7 @@ define('pgadmin.browser.node', [
               label: '',
               type: 'help',
               tooltip: gettext('SQL help for this object type.'),
-              extraClasses: ['btn-secondary', 'pull-left', 'mx-1'],
+              extraClasses: ['btn-primary-icon', 'pull-left', 'mx-1'],
               icon: 'fa fa-lg fa-info',
               disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
               register: function(btn) {
@@ -1510,7 +1510,7 @@ define('pgadmin.browser.node', [
               label: '',
               type: 'help',
               tooltip: gettext('Help for this dialog.'),
-              extraClasses: ['btn-secondary', 'pull-left', 'mx-1'],
+              extraClasses: ['btn-primary-icon', 'pull-left', 'mx-1'],
               icon: 'fa fa-lg fa-question',
               disabled: (that.dialogHelp == '') ? true : false,
               register: function(btn) {

web/pgadmin/browser/static/js/toolbar.js

@@ -24,7 +24,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
   {
@@ -34,7 +34,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
   {
@@ -44,7 +44,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
   {
@@ -54,7 +54,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
 ];

web/pgadmin/browser/static/js/wizard.js

@@ -129,7 +129,7 @@ define([
       '        <div class="wizard-buttons d-flex">' +
       '          <div>' +
       '            <button tabindex="0" aria-label="' + gettext('Help') + '" title = "' + gettext('Help for this dialog.') + '"' +
-      '              class="btn btn-secondary pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
+      '              class="btn btn-primary-icon pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
       '              <span class="fa fa-lg fa-question" role="img"></span></button>' +
       '          </div>' +
       '          <div class="ml-auto">' +

web/pgadmin/browser/static/scss/_wizard.scss

@@ -2,10 +2,10 @@
   padding: 6px!important;
   min-height: $title-height;
   max-height: $title-height;
-  background-color: $color-primary;
+  background-color: $alert-header-bg;
   font-size: $font-size-base;
   font-weight: bold;
-  color: $color-primary-fg;
+  color: $alert-header-fg;
   overflow: hidden;
   white-space: nowrap;
   border-radius: 0rem;

web/pgadmin/dashboard/templates/dashboard/database_dashboard.html

@@ -85,7 +85,7 @@
                             </div>
                             <input type="search" class="form-control" id="txtGridSearch" placeholder="{{ _('Search') }}" aria-describedby="labelSearch" aria-labelledby="labelSearch">
                         </div>
-                        <button id="btn_refresh" type="button" class="btn btn-secondary btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
+                        <button id="btn_refresh" type="button" class="btn btn-primary-icon btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
                             <span class="fa fa-refresh" aria-hidden="true"></span>
                         </button>
                     </div>

web/pgadmin/dashboard/templates/dashboard/server_dashboard.html

@@ -89,7 +89,7 @@
                             </div>
                             <input type="search" class="form-control" id="txtGridSearch" placeholder="{{ _('Search') }}" aria-label="{{ _('Search') }}" aria-describedby="labelSearch">
                         </div>
-                        <button id="btn_refresh" type="button" class="btn btn-secondary btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
+                        <button id="btn_refresh" type="button" class="btn btn-primary-icon btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
                             <span class="fa fa-refresh" aria-hidden="true"></span>
                         </button>
                     </div>

web/pgadmin/misc/bgprocess/static/js/bgprocess.js

@@ -38,21 +38,21 @@ define('misc.bgprocess', [
         <div class="pr-2">
           <i class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true" role="img"></i>
         </div>
-        <div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
+        <div class="mx-auto pg-bg-status-text alert-text-body"><%-status_text%></div>
       </div>`),
       failed_status_tpl: _.template(`
       <div class="d-flex px-2 py-1 bg-danger-lighter border border-danger rounded">
         <div class="pr-2">
           <i class="fa fa-close fa-lg text-danger pg-bg-status-icon" aria-hidden="true" role="img"></i>
         </div>
-        <div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
+        <div class="mx-auto pg-bg-status-text alert-text-body"><%-status_text%></div>
       </div>`),
       other_status_tpl: _.template(`
       <div class="d-flex px-2 py-1 bg-primary-light border border-primary rounded">
         <div class="pr-2">
           <i class="fa fa-info fa-lg text-primary pg-bg-status-icon" aria-hidden="true" role="img"></i>
         </div>
-        <div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
+        <div class="mx-auto pg-bg-status-text alert-text-body"><%-status_text%></div>
       </div>`),
       initialize: function(info, notify) {
         _.extend(this, {

web/pgadmin/misc/file_manager/static/js/utility.js

@@ -1542,7 +1542,7 @@ define([
         // we remove simple file upload element
         $('.file-input-container').remove();
         $('.upload').remove();
-        $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-secondary upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
+        $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-primary-icon upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
 
         $('#uploader .upload').off().on('click', function() {
           // we create prompt

web/pgadmin/misc/file_manager/static/scss/_file_manager.scss

@@ -53,7 +53,8 @@
 .file_listing #contents.grid li.selected {
   cursor: pointer;
   border: $table-hover-border;
-  background: $table-hover-bg-color;
+  background: $grid-hover-bg-color;
+  color: $grid-hover-fg-color;
 }
 
 .fileinfo #contents li span.less_text {
@@ -317,6 +318,16 @@
   cursor: pointer;
 }
 
+.cap_select_file:hover {
+  color: $grid-hover-fg-color !important;
+  .fm_folder_list,
+  .fm_folder_grid,
+  .fm_file_grid,
+  .fm_file_list {
+    color: $grid-hover-fg-color !important;
+  }
+}
+
 .add-folder-icon {
   position: relative;
   top: -8px;

web/pgadmin/misc/file_manager/templates/file_manager/index.html

@@ -8,11 +8,11 @@
             <div class="flex-grow-1 mr-1">
                 <div class="input-group" role="group">
                     <div class="input-group-prepend">
-                        <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-secondary home"
+                        <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-primary-icon home"
                                 tabindex="0">
                             <span class="fa fa-home sql-icon-lg"></span>
                         </button>
-                        <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-secondary level-up"
+                        <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-primary-icon level-up"
                                 disabled tabindex="0">
                             <span class="fa fa-level-up sql-icon-lg"></span>
                         </button>
@@ -24,32 +24,32 @@
             <div>
                 <input class="mode" name="mode" type="hidden" value="add"/>
                 <input class="currentpath" name="currentpath" type="hidden"/>
-                <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm btn-secondary refresh"
+                <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm btn-primary-icon refresh"
                         tabindex="0">
                     <span class="fa fa-refresh sql-icon-lg"></span>
                 </button>
-                <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-secondary download"
+                <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-primary-icon download"
                         disabled>
                     <span class="fa fa-download sql-icon-lg"></span>
                 </button>
-                <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm btn-secondary delete"
+                <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm btn-primary-icon delete"
                         disabled>
                     <span class="fa fa-trash sql-icon-lg"></span>
                 </button>
-                <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-secondary rename"
+                <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-primary-icon rename"
                         tabindex="0">
                     <span class="fa fa-pencil-square-o sql-icon-lg"></span>
                 </button>
                 <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
-                        class="btn btn-sm btn-secondary create" tabindex="0">
+                        class="btn btn-sm btn-primary-icon create" tabindex="0">
                     <span class="fa fa-folder-open sql-icon-lg"></span>
                     <span class="fa fa-plus add-folder-icon"></span>
                 </button>
                 <div class="btn-group" role="group">
-                    <button class="ON btn btn-secondary btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0">
+                    <button class="ON btn btn-primary-icon btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0">
                         <span class="fa fa-th sql-icon-lg"></span>
                     </button>
-                    <button type="button" class="btn btn-secondary btn-sm list" title="{{ _('View as table') }}" tabindex="0">
+                    <button type="button" class="btn btn-primary-icon btn-sm list" title="{{ _('View as table') }}" tabindex="0">
                         <span class="fa fa-list sql-icon-lg"></span>
                     </button>
                 </div>
@@ -67,14 +67,14 @@
         <div class='delete_item'>
             <span>{{ _('Are you sure you want to delete this item?') }}</span>
             <span class="pull-right">
-                <button type='button' class='btn btn-secondary btn_no' tabindex="0">{{ _('No') }}</button>
+                <button type='button' class='btn btn-primary-icon btn_no' tabindex="0">{{ _('No') }}</button>
                 <button type='button' class='btn btn-primary btn_yes' tabindex="0">{{ _('Yes') }}</button>
             </span>
         </div>
         <div class='replace_file'>
             <span>{{ _('Are you sure you want to replace this file?') }}</span>
             <span class="pull-right">
-                <button type='button' class='btn btn-secondary btn_no' tabindex="0">{{ _('No') }}</button>
+                <button type='button' class='btn btn-primary-icon btn_no' tabindex="0">{{ _('No') }}</button>
                 <button type='button' class='btn btn-primary btn_yes' tabindex="0">{{ _('Yes') }}</button>
             </span>
         </div>

web/pgadmin/misc/static/explain/js/explain.js

@@ -1285,7 +1285,7 @@ define('pgadmin.misc.explain', [
           role: 'group',
         }).appendTo(graphicalContainer),
         zoomInBtn = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn',
+          class: 'btn btn-primary-icon pg-explain-zoom-btn',
           title: gettext('Zoom in'),
           'aria-label': gettext('Zoom in'),
           tabindex: 0,
@@ -1294,7 +1294,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-search-plus',
           })),
         zoomToNormal = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn',
+          class: 'btn btn-primary-icon pg-explain-zoom-btn',
           title: gettext('Zoom to original'),
           'aria-label': gettext('Zoom to original'),
           tabindex: 0,
@@ -1303,7 +1303,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-arrows-alt',
           })),
         zoomOutBtn = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn',
+          class: 'btn btn-primary-icon pg-explain-zoom-btn',
           title: gettext('Zoom out'),
           'aria-label': gettext('Zoom out'),
           tabindex: 0,
@@ -1318,7 +1318,7 @@ define('pgadmin.misc.explain', [
         }).appendTo(graphicalContainer),
         downloadBtn = $('<button></button>', {
           id: 'btn-explain-download',
-          class: 'btn btn-secondary pg-explain-download-btn',
+          class: 'btn btn-primary-icon pg-explain-download-btn',
           title: gettext('Download'),
           'aria-label': gettext('Download'),
           tabindex: 0,
@@ -1347,7 +1347,7 @@ define('pgadmin.misc.explain', [
 
       $('<button></button>', {
         id: 'btn-explain-stats',
-        class: 'btn btn-secondary pg-explain-stats-btn',
+        class: 'btn btn-primary-icon pg-explain-stats-btn',
         title: gettext('Statistics'),
         'aria-label': gettext('Statistics'),
         tabindex: 0,

web/pgadmin/misc/static/explain/scss/_explain.scss

@@ -49,6 +49,7 @@ div.tab-pane[data-explain-tabpanel=table] {
   td.pga-ex-inclusive-2,
   td.pga-ex-rowsx-2 {
     background-color: $explain-sev-2-bg;
+    color: $explain-sev-2-color;
   }
 
   td.pga-ex-exclusive-3,

web/pgadmin/preferences/static/js/preferences.js

@@ -420,7 +420,7 @@ define('pgadmin.preferences', [
               buttons: [{
                 text: '',
                 key: 112,
-                className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                 attrs: {
                   name: 'dialog_help',
                   type: 'button',

web/pgadmin/static/js/alertify.pgadmin.defaults.js

@@ -442,7 +442,7 @@ define([
         <div class="pr-2">
           <i class="fa fa-check" aria-hidden="true"></i>
         </div>
-        <div class="text-body" role="status">${message}</div>
+        <div class="alert-text-body" role="status">${message}</div>
       </div>`;
       return alertify.orig_success(alertMessage, timeout, callback);
     },
@@ -452,7 +452,7 @@ define([
         <div class="pr-2">
           <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
         </div>
-        <div class="text-body" role="status">${message}</div>
+        <div class="alert-text-body" role="status">${message}</div>
       </div>`;
       return alertify.orig_error(alertMessage, timeout, callback);
     },
@@ -462,7 +462,7 @@ define([
         <div class="mr-3">
           <i class="fa fa-info-circle" aria-hidden="true"></i>
         </div>
-        <div class="text-body" role="status">${message}</div>
+        <div class="alert-text-body" role="status">${message}</div>
       </div>`;
       var alert = alertify.notify(alertMessage, timeout);
       return alert;

web/pgadmin/static/js/backform.pgadmin.js

@@ -1298,7 +1298,7 @@ define([
         gridHeader = _.template([
           '<div class="subnode-header">',
           '  <span  class="control-label pg-el-sm-10" id="<%=cId%>"><%-label%></span>',
-          '  <button aria-label="' + gettext('Add new row') + '" class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"><%-add_label%></button>',
+          '  <button aria-label="' + gettext('Add new row') + '" class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"><%-add_label%></button>',
           '</div>',
         ].join('\n')),
         gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-12 object subnode "></div>').append(
@@ -1585,7 +1585,7 @@ define([
       var self = this,
         gridHeader = ['<div class=\'subnode-header\'>',
           '  <span class=\'control-label pg-el-sm-10\'>' + data.label + '</span>',
-          '  <button aria-label="' + gettext('Add') + '" class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + gettext('Add new row') + '\'></button>',
+          '  <button aria-label="' + gettext('Add') + '" class=\'btn btn-sm-sq btn-primary-icon add fa fa-plus\' title=\'' + gettext('Add new row') + '\'></button>',
           '</div>',
         ].join('\n'),
         gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-12 object subnode\'></div>').append(gridHeader);
@@ -2728,7 +2728,7 @@ define([
       '<div class="input-group">',
       '<input type="<%=type%>" id="<%=cId%>" class="form-control <%=extraClasses.join(\' \')%>" name="<%=name%>" min="<%=min%>" max="<%=max%>"maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> <%=required ? "required" : ""%> />',
       '<div class="input-group-append">',
-      '<button class="btn btn-secondary fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> aria-hidden="true" aria-label="' + gettext('Select file') + '" title="' + gettext('Select file') + '"></button>',
+      '<button class="btn btn-primary-icon fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> aria-hidden="true" aria-label="' + gettext('Select file') + '" title="' + gettext('Select file') + '"></button>',
       '</div>',
       '</div>',
       '<% if (helpMessage && helpMessage.length) { %>',

web/pgadmin/static/js/sqleditor/filter_dialog.js

@@ -65,7 +65,7 @@ let FilterDialog = {
                 buttons: [{
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',

web/pgadmin/static/scss/_aci_tree.overrides.scss

@@ -10,7 +10,7 @@
 
 .aciTree, .aciTree.aciTreeFullRow {
     & .aciTreeButton, & .aciTreePush, & .aciTreeItem, & .aciTreeIcon, & .aciTreeText, & .aciTreeColumn {
-        color: $color-fg;
+        color: $tree-text-fg;
     }
 
     .aciTreeLi {
@@ -53,6 +53,15 @@
             border-radius: none !important;
             color: $tree-fg-selected;
         }
+
+        & .aciTreeText {
+          color: $tree-text-hover-fg;
+        }
+
+        & .aciTreePush {
+          color: $tree-text-hover-fg;
+        }
+
     }
 
     .aciTreeItem {
@@ -77,6 +86,15 @@
             border-radius: none !important;
             color: $tree-fg-hover;
         }
+
+        & .aciTreeText {
+          color: $tree-text-hover-fg;
+        }
+
+        & .aciTreePush {
+          color: $tree-text-hover-fg;
+        }
+
     }
 
     &.aciTreeFocus {

web/pgadmin/static/scss/_alert.scss

@@ -44,7 +44,7 @@
   align-self: center;
   // To make sure IE picks up the correct font
   font-family: $font-family-primary;
-  color: $color-fg;
+  color: $alert-color-fg;
 }
 
 .alert-info {

web/pgadmin/static/scss/_alertify.overrides.scss

@@ -5,10 +5,10 @@
     //margin is calculated with -$alertify-borderremove-margin, adjust the header
     min-height: $title-height + $alertify-borderremove-margin !important;
     max-height: $title-height + $alertify-borderremove-margin !important;
-    background-color: $color-primary;
+    background-color: $alert-header-bg;
     font-size: $font-size-base;
     font-weight: bold;
-    color: $color-primary-fg;
+    color: $alert-header-fg;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -19,12 +19,12 @@
     margin: -24px - $alertify-borderremove-margin; //-24px is default by alertify
     margin-bottom: 0px;
     &:hover {
-      background-color: $color-primary;
+      background-color: $alert-header-bg;
     }
   }
 
   .ajs-body {
-    background-color: $color-bg !important;
+    background-color: $alert-dialog-body-bg !important;
     color: $color-fg !important;
   }
 
@@ -123,7 +123,7 @@
     border: $panel-border;
     border-radius: $panel-border-radius;
     box-shadow: $dialog-box-shadow;
-    background-color: $color-bg !important;
+    background-color: $alert-dialog-body-bg !important;
     color: $color-fg !important;
   }
   .ajs-content {
@@ -146,7 +146,7 @@
   width: 20px;
   height: 20px;
   border: $input-btn-border-width solid $btn-secondary-border !important;
-  background-color: $color-secondary !important;
+  background-color: $alert-action-bg !important;
   font-size: 12px;
   border-radius: $btn-border-radius;
   position: relative;
@@ -157,7 +157,7 @@
 }
 
 .ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
-  background-color: $btn-secondary-hover-bg !important;
+  background-color: $alert-action-hover-bg !important;
 }
 
 .alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
@@ -280,6 +280,9 @@
   }
 }
 
+.alert-text-body {
+  color: $alert-color-fg;
+}
 
 .ajs-commands, .ajs-close {
   button {

web/pgadmin/static/scss/_backgrid.overrides.scss

@@ -169,6 +169,12 @@ table.backgrid {
   font-weight: normal;
 }
 
+.backgrid tr:hover {
+  .label {
+    color: $grid-hover-fg-color;
+  }
+}
+
 .subnode {
   border: $panel-border;
   background: $color-bg;

web/pgadmin/static/scss/_bootstrap.overrides.scss

@@ -100,17 +100,84 @@ legend {
  * Refer file : bootstrap/scss/mixins/_buttons.scss
  */
 .btn-secondary {
-	@include button-variant($color-secondary, $btn-secondary-border, $btn-secondary-hover-bg);
+	@include button-variant($btn-secondary-bg, $btn-secondary-border, $btn-secondary-hover-bg, $hover-border: $btn-secondary-border-hover-bg);
+	@include hover() {
+	  color: $btn-secondary-hover-fg !important;
+	} &.disabled, &:disabled {
+	  color: $btn-secondary-disabled-fg !important;
+	  border-color: $btn-secondary-disabled-bg !important;
+	}
+	color: $btn-secondary-fg !important;
+
 }
 
-/** Overriding secondary button of bootstrap **/
+/** Overriding ternary button of bootstrap **/
 /* Used Bootstrap 4 Mixin button-variant
  * Refer file : bootstrap/scss/mixins/_buttons.scss
  */
-.btn-ternary {
+ .btn-ternary {
-	@include button-variant($color-ternary, $btn-ternary-border, $btn-ternary-hover-bg);
+    @include button-variant($color-ternary, $color-fg);
+    border-color: $color-ternary;
+ }
+
+.btn-ternary[disabled] {
+  background-color: $btn-ternary-disabled-bg !important;
+  color: $btn-ternary-disabled-fg !important;
+  border-color: btn-ternary-disabled-border-color !important;
+
+  label {
+    background-color: $btn-ternary-disabled-bg !important;
+    color: $btn-ternary-disabled-fg !important;
+    border-color: btn-ternary-disabled-border-color !important;
+  }
+
 }
 
+.btn-primary {
+  @include button-variant($color-primary, $color-primary, $hover-background: $btn-primary-hover-bg, $hover-border: $btn-primary-border-hover-bg);
+  & .disabled,
+  &:disabled {
+    background-color: $btn-primary-disabled-bg;
+    border-color: $btn-primary-disabled-bg;
+  }
+}
+
+.btn-primary-icon {
+  @include button-variant($btn-primary-icon-bg, $btn-primary-icon-border-color);
+  @include hover() {
+	  background-color: $btn-primary-icon-hover-bg;
+	  color: $btn-primary-icon-hover-fg;
+	} &.disabled, &:disabled {
+	  color: $btn-primary-icon-disable-fg !important;
+	  border-color: $btn-primary-icon-border-disable-bg !important;
+	  background-color: $btn-primary-icon-disable-bg;
+	}
+
+	border-color: $btn-primary-icon-border-color;
+}
+
+.btn-success {
+  @include button-variant($color-success, $color-fg);
+  border-color: $color-success;
+  @include hover() {
+    color: $color-success-hover-fg !important;
+    border-color: $color-success !important;
+  }
+}
+
+.btn-success[disabled] {
+    background-color: $color-success-disabled-bg !important;
+    border-color: $color-success-disabled-bg !important;
+    color: $color-success-disabled-fg !important;
+
+    label {
+      background-color: $color-success-disabled-bg !important;
+      border-color: $color-success-disabled-bg !important;
+      color: $color-success-disabled-fg !important;
+    }
+}
+
+
 .form-group fieldset {
 	background-color: $color-gray-lighter;
 	border-color: $color-gray-lighter;
@@ -167,6 +234,9 @@ legend {
 .card-header {
 	padding: $card-header-padding;
 	font-weight: bold;
+	background-color: $card-header-bg;
+	color: $card-header-fg;
+	border-color: $card-header-border-color;
 }
 
 .table {
@@ -228,6 +298,7 @@ legend {
 	& > tbody {
 		& > tr:not(.nohover):not(.empty):hover, tr.selected {
 			background-color: $table-hover-bg-color;
+			color: $grid-hover-fg-color;
 			& > td {
 				border-top: $table-hover-border;
 				border-bottom: $table-hover-border;
@@ -236,6 +307,7 @@ legend {
 
 		& > tr.nohover {
 			background-color: transparent;
+			color: $input-color;
 		}
 	}
 }
@@ -330,6 +402,10 @@ td.switch-cell > div.toggle {
   &:focus:checked ~ .custom-control-label::before {
     border-color: $custom-control-indicator-focus-border-color;
   }
+
+  &:hover {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
 }
 
 @media (max-width: 992px) {

web/pgadmin/static/scss/_codemirror.overrides.scss

@@ -168,7 +168,7 @@
 }
 
 .CodeMirror .CodeMirror-selected {
-  background: $color-primary-light !important;
+  background: $sql-editor-selection-bg !important;
 }
 
 .CodeMirror-activeline-background {
@@ -200,3 +200,7 @@
         }
     }
 }
+
+.bg-gray-lighter {
+  background-color: $sql-editor-disable-bg !important;
+}

web/pgadmin/static/scss/_pgadmin.style.scss

@@ -368,7 +368,7 @@
   display: block;
   text-align: left;
   cursor: pointer;
-  background-color: $header-bg;
+  background-color: $badge-header-bg;
   padding: 7px;
   font-size: inherit;
   border-bottom: $panel-border;
@@ -866,7 +866,7 @@ body {
 }
 
 .editor-toolbar {
-  background: $sql-gutters-bg;
+  background: $editor-toolbar-bg;
   padding: 0.05rem 0.25rem;
 }
 

web/pgadmin/static/scss/_select2.overrides.scss

@@ -4,13 +4,13 @@
 }
 
 .select2-container--default .select2-results__option[aria-selected=true] {
-  background-color: $tree-bg-selected;
+  background-color: $select2-container-bg-selected;
-  color: $tree-fg-selected;
+  color: $select2-container-fg-selected;
 }
 
 .select2-container--default .select2-results__option--highlighted {
-  background-color: $tree-bg-hover !important;
+  background-color: $select2-container-hover-bg !important;
-  color: $tree-fg-hover !important;
+  color: $select2-container-hover-fg !important;
 }
 
 .select2-container--default .select2-selection--multiple {
@@ -27,7 +27,7 @@
   line-height: 2;
 
   & .select2-selection__choice__remove {
-    color: $dropdown-link-hover-bg;
+    color: $dropdown-link-remove-color;
     margin-right: 0.25rem;
   }
 }

web/pgadmin/static/scss/_webcabin.pgadmin.scss

@@ -38,7 +38,7 @@
 
 /* darken % taken from bootstrap - button_variant */
 .wcFrameButton:hover, .wcFrameButtonHover,  .wcFrameButton:focus {
-  background-color: $btn-secondary-hover-bg;
+  background-color: $btn-frame-close-bg;
 }
 
 .wcFrameButton.disabled {
@@ -74,7 +74,7 @@
 }
 
 .wcPanelTab, .wcFrameTitle{
-  color: $color-fg;
+  color: $panel-color-fg;
   padding: $tabs-padding;
   margin: 0px;
 }

web/pgadmin/static/scss/resources/_default.style.scss

@@ -113,15 +113,15 @@
 }
 
 .text-danger {
-  color: $color-danger;
+  color: $color-danger-fg;
 }
 
 .text-primary {
-  color: $color-primary;
+  color: $color-primary-fg;
 }
 
 .text-success {
-  color: $color-success;
+  color: $color-success-fg;
 }
 
 .text-bold {

web/pgadmin/static/scss/resources/_default.variables.scss

@@ -18,6 +18,7 @@ $color-ternary: #5b6d7c !default;
 $color-ternary-fg: $white !default;
 
 $color-danger: #e53935 !default;
+$color-danger-icon-fg: $color-danger !default;
 $color-danger-fg: $white !default;
 $color-danger-light: #F39999 !default;
 $color-danger-lighter: #FAECEC !default;
@@ -26,6 +27,10 @@ $color-success: #26852B !default;
 $color-success-fg: $black !default;
 $color-success-light: #D9ECDA !default;
 
+$color-success-disabled-fg: $color-bg !default;
+$color-success-disabled-bg: $color-success !default;
+$color-success-hover-fg: $white !default;
+
 $color-warning: #eea236 !default;
 $color-warning-fg: $black !default;
 $color-warning-light: #fce5c5 !default;
@@ -61,6 +66,7 @@ $border-radius: 0.25rem;
 
 $text-muted: #667185 !default;
 $header-bg: $color-bg !default;
+$badge-header-bg: $header-bg !default;
 
 $tree-font-size: 0.815rem;
 
@@ -71,14 +77,14 @@ $alert-danger-color: $color-danger !default;
 $alert-success-bg: $color-success-light !default;
 $alert-success-color: $color-success !default;
 
-$navbar-bg: $color-primary;
+$navbar-bg: $color-primary !default;
 $navbar-font-size: 0.925rem;
 $navbar-height: 32px;
 $navbar-dropdown-top: 100%;
-$navbar-dark-color: $color-primary-fg;
+$navbar-dark-color: $color-primary-fg !default;
 $navbar-dark-hover-color: $color-primary-fg;
-$navbar-dark-active-color: $color-primary-fg;
+$navbar-dark-active-color: $color-primary-fg !default;
-$navbar-dark-disabled-color: $color-gray;
+$navbar-dark-disabled-color: $color-gray !default;
 
 $navbar-toggler-padding-y: 0.25rem; //no-change
 
@@ -92,6 +98,7 @@ $dropdown-color: $color-fg;
 $dropdown-link-color: $color-fg;
 $dropdown-link-hover-color: $color-primary-fg;
 $dropdown-link-hover-bg: $color-primary;
+$dropdown-link-remove-color: $color-primary !default;
 $dropdown-border-color: $border-color;
 $dropdown-box-shadow: 0 0.125rem 0.5rem rgba($shadow-base-color, .275);
 $dropdown-divider-bg: $dropdown-border-color;
@@ -113,9 +120,9 @@ $btn-transition: color .05s ease-in-out, background-color .05s ease-in-out, bord
 $card-spacer-y: 0rem;
 $card-spacer-x: 0rem;
 $card-border-radius: $border-radius;
-$card-border-color: $border-color;
+$card-border-color: $border-color !default;
-$card-cap-bg: $header-bg;
+$card-cap-bg: $header-bg !default;
-$card-bg: $color-bg;
+$card-bg: $color-bg !default;
 
 $navbar-padding-y: 0rem;
 $navbar-padding-x: 0rem;
@@ -135,9 +142,9 @@ $nav-tabs-link-active-border-color: none;
 
 $table-cell-padding: 0.25rem;
 $table-header-cell-padding: 0.75rem;
-$table-hover-bg: none; //we will use our own classes
+$table-hover-bg: none !default; //we will use our own classes
 $table-hover-color: #000 !default;
-$table-active-bg: $color-primary-light;
+$table-active-bg: $color-primary-light !default;
 $table-border-width: $border-width;
 $table-border-color: $border-color;
 $table-head-bg: $color-primary;
@@ -162,9 +169,10 @@ $btn-danger-color: $color-danger-fg;
 $component-active-bg: $color-primary;
 $input-btn-focus-width: .2rem;
 $input-btn-focus-color: rgba($component-active-bg, .25);
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-btn-focus-shadow-color: $input-btn-focus-color !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-shadow-color;
 $input-focus-bg: $input-bg;
-$input-focus-border-color: lighten($component-active-bg, 25%);
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
 $input-focus-color: $input-color;
 $input-focus-width: $input-btn-focus-width;
 $input-focus-box-shadow: $input-btn-focus-box-shadow;
@@ -186,12 +194,13 @@ $color-editor-foldmarker: #0000FF !default;
 $color-editor-activeline: #50B0F0 !default;
 
 $active-color: $color-primary !default;
-$active-border: 3px solid $active-color;
+$active-border: 3px solid $active-color !default;
 $panel-border-width: $border-width;
-$panel-border-color: $border-color;
+$panel-border-color: $border-color !default;
 $panel-border-radius: $border-radius;
 $panel-border: $panel-border-width solid $panel-border-color !important;
 $panel-border-dark: $panel-border-width solid $border-color-dark !important;
+$panel-color-fg: $color-fg !default;
 $tabs-padding: 5px 10px 2px;
 $title-height: ($line-height-base*16px) + 5px + 2px + $border-width;
 $footer-padding: 0.5rem;
@@ -207,13 +216,16 @@ $table-bg: $color-bg !default;
 $table-bg-selected: $color-primary-light;
 $table-hover-border-color: $color-primary;
 $table-hover-border: $panel-border-width solid $color-primary !important;
-$table-hover-bg-color: $color-primary-light;
+$table-hover-bg-color: $color-primary-light !default;
-$datagrid-bg: $color-gray-light;
+$datagrid-bg: $color-gray-light !default;
+$datagrid-selected-color : $color-primary-fg !default;
 
-$tree-fg-hover: $color-fg;
+$tree-text-fg: $color-fg !default;
-$tree-bg-hover: $color-gray-light;
+$tree-text-hover-fg: $color-fg !default;
-$tree-fg-selected: $color-fg;
+$tree-fg-hover: $color-fg !default;
-$tree-bg-selected: $color-primary-light;
+$tree-bg-hover: $color-gray-light !default;
+$tree-fg-selected: $color-fg !default;
+$tree-bg-selected: $color-primary-light !default;
 
 $sql-grid-data-cell-fg: $input-color;
 $sql-grid-data-cell-bg: $input-bg;
@@ -221,19 +233,21 @@ $sql-grid-title-cell-fg: $input-color;
 $sql-grid-title-cell-bg: $input-bg;
 
 $sql-title-padding: 3px;
-$sql-title-bg: $color-ternary;
+$sql-title-bg: $color-ternary !default;
-$sql-title-fg: $color-ternary-fg;
+$sql-title-fg: $color-ternary-fg !default;
 // Toolbar + editor title heights + title bottom border
 $sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width - 0.5px;
-$sql-gutters-bg: $datagrid-bg;
+$sql-editor-disable-bg: $color-gray-lighter !default;
-$sql-history-detail-bg: $color-gray-lighter;
+$sql-editor-selection-bg: $color-primary-light !default;
+$sql-gutters-bg: $datagrid-bg !default;
+$sql-history-detail-bg: $color-gray-lighter !default;
 $sql-history-success-bg: $color-primary-light;
-$sql-history-success-fg: $active-color;
+$sql-history-success-fg: $active-color !default;
 $sql-history-error-bg: $color-danger-lighter;
 $sql-history-error-fg: $color-danger;
 $sql-hint-bg: $color-bg;
 $sql-hint-active-bg: $color-primary;
-$sql-hint-active-fg: $white;
+$sql-hint-active-fg: $white !default;
 $sql-bracket-match-fg: #5b6d7c;
 $sql-bracket-match-bg: #f5d2af;
 
@@ -243,19 +257,45 @@ $explain-sev-3-bg: #EE8800 !default;
 $explain-sev-4-bg: #880000 !default;
 $explain-sev-3-color: #FFFFFF !default;
 $explain-sev-4-color: #FFFFFF !default;
+$explain-sev-2-color: $black !default;
 
 $dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color;
 
 $alert-icon-color: $white;
+$alert-header-bg: $color-primary !default;
+$alert-header-fg: $white !default;
+$alert-action-bg: $color-secondary !default;
+$alert-action-hover-bg: $color-gray-light !default;
 $alertify-borderremove-margin: $panel-border-width;
+$alert-color-fg: $color-fg !default;
+$alert-dialog-body-bg: $color-bg !default;
 
-$btn-secondary-border: $color-gray;
+$btn-primary-hover-bg: darken($color-primary, 7.5%) !default;
-$btn-secondary-hover-bg: $color-gray-light;
+$btn-primary-border-hover-bg: darken($color-primary, 7.5%) !default;
+$btn-primary-disabled-bg: $color-primary !default;
+
+$btn-secondary-bg: $color-secondary !default;
+$btn-secondary-border-hover-bg: $color-gray !default;
+$btn-secondary-fg: $color-fg !default;
+$btn-secondary-hover-fg: $color-fg !default;
+$btn-secondary-border: $color-gray !default;
+$btn-secondary-hover-bg: $color-gray-light !default;
+$btn-secondary-disabled-bg: $color-gray !default;
+$btn-secondary-disabled-fg: $color-fg !default;
+
+$btn-frame-close-bg:$btn-secondary-hover-bg !default;
 
 $btn-ternary-border: $color-ternary !default;
 $btn-ternary-hover-bg: darken($color-ternary, 7.5%) !default;
 
+$btn-ternary-disabled-bg: $color-ternary !default;
+$btn-ternary-disabled-fg: $color-bg !default;
+$btn-ternary-disabled-border-color: $btn-ternary-disabled-bg !default;
+
 $card-header-padding : 0.25rem 0.5rem;
+$card-header-bg: $color-bg !default;
+$card-header-fg: $color-fg !default;
+$card-header-border-color: $border-color !default;
 $no-border-radius: 0px !important;
 
 $btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
@@ -278,8 +318,30 @@ $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='ut
 $schemadiff-diff-row-color: #fff9c4 !default;
 $schemadiff-source-row-color: #ffebee !default;
 $schemadiff-target-row-color: #fbe3bf !default;
+$schema-diff-color-fg: $input-color !default;
 
 /* Custom controls bootstrap changes */
-$custom-forms-transition: none;
+$custom-forms-transition: none !default;
-$custom-control-indicator-focus-border-color: $input-focus-border-color;
+$custom-control-indicator-focus-border-color: $input-focus-border-color !default;
-$custom-control-indicator-border-color: $input-border-color;
+$custom-control-indicator-border-color: $input-border-color !default;
+
+$select2-container-hover-bg: $tree-bg-hover !default;
+$select2-container-hover-fg: $tree-fg-hover !default;
+$select2-container-bg-selected: $tree-bg-selected !default;
+$select2-container-fg-selected: $tree-fg-selected !default;
+
+$btn-primary-icon-bg: $color-bg !default;
+$btn-primary-icon-fg: $color-fg !default;
+$btn-primary-icon-hover-fg: $color-fg !default;
+$btn-primary-icon-hover-bg: $color-gray-light !default;
+$btn-primary-icon-border-color: $color-gray !default;
+$btn-primary-icon-border-disable-bg: $color-gray !default;
+$btn-primary-icon-disable-fg: $color-fg !default;
+$btn-primary-icon-disable-bg: $color-bg !default;
+
+$editor-toolbar-bg: $sql-gutters-bg !default;
+$grid-hover-bg-color: $table-hover-bg-color !default;
+$grid-hover-fg-color: $color-fg !default;
+
+$btn-copied-color-fg: $active-color !default;
+

web/pgadmin/static/scss/resources/dark/_theme.variables.scss

@@ -20,6 +20,9 @@ $color-success: #26852B;
 $color-success-fg: $black;
 $color-success-light: #2B472C;
 
+$color-success-disabled-fg: $color-fg;
+$color-success-disabled-bg: $color-success;
+
 $color-warning: #eea236;
 $color-warning-fg: $black;
 $color-warning-light: #b18d5a;
@@ -56,6 +59,7 @@ $alert-danger-bg: $color-bg;
 $alert-danger-color: $color-danger;
 $alert-success-bg: $color-bg;
 $alert-success-color: $color-success;
+$alert-header-fg: $color-fg;
 
 $table-bg: $color-gray-lighter;
 
@@ -77,6 +81,7 @@ $explain-sev-3-bg: #c2812b;
 $explain-sev-4-bg: #880000;
 $explain-sev-3-color: $color-fg;
 $explain-sev-4-color: $color-fg;
+$explain-sev-2-color: $black;
 
 $negative-bg: $color-bg;
 
@@ -88,3 +93,24 @@ $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='ut
 $schemadiff-diff-row-color: #807a48 !default;
 $schemadiff-source-row-color: #402025 !default;
 $schemadiff-target-row-color: #6b5438 !default;
+
+$btn-secondary-fg: $white;
+$btn-secondary-border-hover-bg: $color-gray-light;
+$btn-secondary-hover-fg: $white;
+
+$card-header-bg: $color-gray-lighter;
+$card-header-fg: $color-fg;
+$card-header-border-color: $border-color;
+
+
+$btn-primary-icon-bg: $color-secondary;
+$btn-primary-icon-fg: $white;
+$btn-primary-icon-hover-fg: $white;
+$btn-primary-icon-hover-bg: $color-gray-light;
+$btn-primary-icon-border-color: $color-gray;
+$btn-primary-icon-border-disable-bg: $color-gray;
+$btn-primary-icon-disable-fg: $white;
+$btn-primary-icon-disable-bg: $color-secondary;
+
+$btn-ternary-disabled-fg: $color-fg;
+$color-success-hover-fg: $color-fg;

web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss

@@ -0,0 +1,201 @@
+$white: #FFFFFF;
+$color-bg: #010B15;
+$color-fg: $white;
+
+$color-primary: #84D6FF;
+$color-primary-fg: $color-bg;
+$color-primary-light: #84D6FF;
+$color-primary-light-fg: $color-bg;
+$color-secondary: #6B6B6B;
+
+$color-ternary: #c9d0d7;
+$color-ternary-fg: $color-bg;
+
+$color-danger: #EE7A55;
+$color-danger-icon-fg: $color-bg;
+$color-danger-fg: $color-bg;
+$color-danger-light: #EE7A55;
+$color-danger-lighter: #EE7A55;
+
+$color-success: #45D48A;
+$color-success-fg: $color-bg;
+$color-success-light: #45D48A;
+
+$color-success-disabled-fg: $color-fg;
+$color-success-disabled-bg: $color-bg;
+$color-success-hover-fg: #010B15;
+
+$color-warning: #F4D35E;
+$color-warning-fg: $color-bg;
+$color-warning-light: #F4D35E;
+
+
+$color-gray-dark: #010B15;
+$color-gray: #1F2932;
+$color-gray-light: #2D3A48;
+$color-gray-lighter: #8B9CAD;
+
+$sql-gutters-bg: $color-gray-light;
+$sql-title-bg: #1F2932;
+$sql-title-fg: $color-fg;
+$sql-editor-disable-bg: $color-gray;
+$sql-editor-selection-bg: $color-gray;
+$sql-history-detail-bg: $color-gray;
+$sql-history-success-fg: #010B15;
+
+$color-brand: $color-primary;
+
+$border-color: #A6B7C8;
+
+// $shadow-base-color: #C9D0D7;
+$shadow-base-color: transparent;
+
+$text-muted: #8b9cad;
+
+$header-bg: $color-bg;
+$card-cap-bg: $color-bg;
+$badge-header-bg: $color-bg;
+
+$alert-primary-bg: $color-primary;
+$alert-primary-color: $color-bg;
+$alert-danger-bg: $color-danger;
+$alert-danger-color: $color-bg !important;
+$alert-success-bg̰: $color-success;
+$alert-success-color: $color-bg;
+
+$alert-color-fg: $color-bg;
+
+$negative-bg: $color-bg;
+
+$popover-bg: $color-gray-dark;
+$popover-body-color: $color-fg;
+
+$table-hover-color: $color-bg;
+$table-hover-bg: $color-fg !important;
+$table-hover-bg-color: $color-primary-light;
+
+$input-bg: $color-bg;
+$input-color: $color-fg;
+$input-border-color: $border-color;
+$input-disabled-bg: $color-gray;
+$input-focus-border-color: $color-primary;
+$input-btn-focus-shadow-color: none;
+
+$color-editor-fg: $white;
+$color-editor-keyword: #F8845F;
+$color-editor-number: #45D48A;
+$color-editor-string: #EAEA43;
+$color-editor-variable: #7DC9F1;
+$color-editor-variable-2: #7DC9F1;
+$color-editor-builtin: #B394FC;
+$color-editor-comment: #FFAD65;
+$color-editor-bracket: #D6AAAA;
+$color-editor-operator: $color-fg;
+$color-editor-foldmarker: #FFFFFF;
+$color-editor-activeline: #50B0F0;
+
+$active-color: $color-fg;
+$active-border: 3px solid $color-primary;
+
+$table-bg: $color-bg;
+
+$explain-sev-2-bg: #EAEA43;
+$explain-sev-3-bg: #FFAD65;
+$explain-sev-4-bg: #EE7A55;
+$explain-sev-3-color: #010B15;
+$explain-sev-4-color: #010B15;
+$explain-sev-2-color: #010B15;
+
+$btn-ternary-border: $color-ternary;
+$btn-ternary-hover-bg: #a6b7c8;
+$btn-ternary-disabled-bg: $color-bg;
+$btn-ternary-disabled-fg: $color-fg;
+$btn-ternary-disabled-border-color: $btn-ternary-disabled-fg;
+
+$scrollbar-base-color: #C9D0D7;
+
+$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
+$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+
+$schemadiff-diff-row-color: #CFC56E;
+$schemadiff-source-row-color: #EE97A5;
+$schemadiff-target-row-color: #FFAD65;
+$schema-diff-color-fg: #010B15;
+
+$tree-text-fg: $color-fg;
+$tree-text-hover-fg: $color-bg;
+$tree-fg-hover: $color-bg;
+$tree-bg-hover: $color-fg;
+$tree-fg-selected: $color-fg;
+$tree-bg-selected: $color-primary-light;
+
+$select2-container-hover-bg: $color-primary;
+$select2-container-hover-fg: $color-bg;
+$select2-container-bg-selected: $color-fg;
+$select2-container-fg-selected: $color-bg;
+
+$sql-hint-active-fg: $color-bg;
+
+$btn-primary-hover-bg: $color-fg;
+$btn-primary-border-hover-bg: $color-fg;
+$btn-primary-disabled-bg: $color-gray-lighter;
+
+$btn-secondary-hover-bg: transparent;
+$btn-secondary-border-hover-bg: $color-fg;
+$btn-secondary-bg: transparent;
+$btn-secondary-fg: $color-primary;
+$btn-secondary-hover-fg: $color-fg;
+$btn-secondary-border: $color-primary;
+$btn-secondary-disabled-bg: $color-gray-lighter;
+$btn-secondary-disabled-fg: $color-gray-lighter;
+
+$btn-frame-close-bg: $color-gray-light;
+// $dialog-box-shadow: 0rem 0rem transparent !important;
+
+$navbar-bg: #062F57;
+$navbar-dark-color: $color-fg;
+$navbar-dark-active-color: $color-fg;
+// $navbar-dark-disabled-color: $color-gray !important;
+
+$alert-header-bg: #062F57 !important;
+$alert-header-fg: $color-fg;
+$alert-action-bg: $alert-header-fg;
+$alert-action-hover-bg: $color-fg;
+$alert-dialog-body-bg: $color-gray;
+
+$datagrid-bg: $color-bg;
+$datagrid-selected-color : $color-primary-fg;
+
+$card-header-bg: #062F57 !important;
+$card-header-fg: $color-fg !important;
+$card-header-border-color: $card-header-bg;
+$card-border-color: transparent;
+$card-bg: $color-gray;
+
+
+$custom-forms-transition: none;
+$custom-control-indicator-focus-border-color: #FFFFFF !important;
+$custom-control-indicator-border-color: $color-gray-lighter;
+
+$panel-color-fg: $color-ternary;
+$panel-border-color: $color-gray;
+
+$btn-primary-icon-bg: $color-bg;
+$btn-primary-icon-border-color: $color-fg;
+$btn-primary-icon-border-disable-bg: $color-gray-lighter;
+$btn-primary-icon-fg: $color-fg;
+$btn-primary-icon-hover-bg: $color-fg;
+$btn-primary-icon-hover-fg: $color-bg;
+$btn-primary-icon-disable-fg: $color-gray-lighter;
+$btn-primary-icon-disable-bg: $color-gray;
+
+$dropdown-link-remove-color: $color-bg;
+
+$editor-toolbar-bg: $color-bg;
+
+$grid-hover-bg-color: $white;
+$grid-hover-fg-color: #010B15;
+
+$btn-copied-color-fg: #010B15;
+
+

web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js

@@ -38,7 +38,7 @@ export class BackupDialogWrapper extends DialogWrapper {
     return {
       buttons: [{
         text: '',
-        className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-info pg-alertify-icon-button',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -49,7 +49,7 @@ export class BackupDialogWrapper extends DialogWrapper {
       }, {
         text: '',
         key: 112,
-        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',

web/pgadmin/tools/datagrid/static/js/show_data.js

@@ -125,7 +125,7 @@ function initFilterDialog(alertify, pgBrowser) {
             buttons:[{
               text: '',
               key: 112,
-              className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+              className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
               attrs: {
                 name: 'dialog_help',
                 type: 'button',

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -15,19 +15,19 @@
     <div class="sql-editor">
         <div id="btn-toolbar" class="editor-toolbar" role="toolbar" aria-label="">
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-load-file" type="button" class="btn btn-sm btn-secondary btn-load-file"
+                <button id="btn-load-file" type="button" class="btn btn-sm btn-primary-icon btn-load-file"
                         title=""
                         accesskey=""
                         tabindex="0">
                     <i class="fa fa-folder-open-o sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-save-file" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-save-file" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         disabled>
                     <i class="fa fa-floppy-o sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
                 </button>
-                <button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
                         tabindex="0">
                 </button>
@@ -45,7 +45,7 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-save-data" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-save-data" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
@@ -53,10 +53,10 @@
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-find" type="button" class="btn btn-sm btn-secondary" aria-label="{{ _('Find') }}" title="{{ _('Find (Ctrl/Cmd+F)') }}">
+                <button id="btn-find" type="button" class="btn btn-sm btn-primary-icon" aria-label="{{ _('Find') }}" title="{{ _('Find (Ctrl/Cmd+F)') }}">
                     <i class="fa fa-search sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
                 </button>
-                <button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -115,13 +115,13 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-copy-row" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-copy-row" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-files-o sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         tabindex="0">
                 </button>
@@ -133,7 +133,7 @@
                         </a>
                     </li>
                 </ul>
-                <button id="btn-paste-row" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-paste-row" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
@@ -141,7 +141,7 @@
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-delete-row" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-delete-row" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
@@ -149,7 +149,7 @@
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
+                <button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         aria-label="{{ _('Edit') }}" title="{{ _('Edit') }}" tabindex="0">
                     <i class="fa fa-pencil-square-o sql-icon-lg" aria-hidden="true" role="img"></i>
@@ -232,18 +232,18 @@
             </div>
 
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-cancel-query" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-cancel-query" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled >
                     <i class="fa fa-stop sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-sm btn-secondary" style="width: 32px;"
+                <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-sm btn-primary-icon" style="width: 32px;"
                         title=""
                         tabindex="0" data-click-counter="0" disabled>
                     <i class="fa fa-play sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-query-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-query-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         accesskey=""
                         title=""
@@ -265,18 +265,18 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-explain" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-explain" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-hand-pointer-o sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-explain-analyze" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-explain-analyze" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey="" disabled>
                     <i class="fa fa-list-alt sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         tabindex="0">
                 </button>
@@ -320,20 +320,20 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-commit" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-commit" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
                     <i class="pg-font-icon icon-commit sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-rollback" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-rollback" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         tabindex="0" disabled>
                     <i class="pg-font-icon icon-rollback sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-clear-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
+                <button id="btn-clear-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -354,7 +354,7 @@
                 </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <button id="btn-download" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-download" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         tabindex="0">
                     <i class="fa fa-download sql-icon-lg" aria-hidden="true" role="img"></i>

web/pgadmin/tools/maintenance/static/js/maintenance.js

@@ -270,7 +270,7 @@ define([
               return {
                 buttons: [{
                   text: '',
-                  className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-info pg-alertify-icon-button',
                   attrs: {
                     name: 'object_help',
                     type: 'button',
@@ -281,7 +281,7 @@ define([
                 }, {
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',

web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js

@@ -32,7 +32,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
     return {
       buttons: [{
         text: '',
-        className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-info pg-alertify-icon-button',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -43,7 +43,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
       }, {
         text: '',
         key: 112,
-        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',

web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js

@@ -318,16 +318,16 @@ let SchemaDiffHeaderView = Backform.Form.extend({
       <div class="col-5 target-buttons">
           <div class="action-btns d-flex">
               <button class="btn btn-primary mr-auto"><i class="icon-schema-diff-white"></i>&nbsp;` + gettext('Compare') + `</button>
-              <button id="generate-script" class="btn btn-secondary mr-1" disabled><i class="fa fa-file-code-o sql-icon-lg"></i>&nbsp;` + gettext('Generate Script') + `</button>
+              <button id="generate-script" class="btn btn-primary-icon mr-1" disabled><i class="fa fa-file-code-o sql-icon-lg"></i>&nbsp;` + gettext('Generate Script') + `</button>
               <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-filter" type="button" class="btn btn-secondary"
+                <button id="btn-filter" type="button" class="btn btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0"
                         style="pointer-events: none;">
                     <i class="fa fa-filter sql-icon-lg" aria-hidden="true"></i>&nbsp;` + gettext('Filter') + `
                 </button>
-                <button id="btn-filter-dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-filter-dropdown" type="button" class="btn btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""

web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss

@@ -24,7 +24,7 @@
   font-size: $tree-font-size;
   .ui-widget-content {
     background-color: $input-bg;
-    color: $input-color;
+    color: $schema-diff-color-fg;
   }
 
   .ui-state-default {
@@ -114,3 +114,15 @@
   font-size: 0.7rem;
   margin-left: 0rem;
 }
+
+.slick-group {
+  color: $input-color !important;
+}
+
+.slick-group:hover {
+  color: $schema-diff-color-fg !important;
+}
+
+.slick-group.active {
+  color: $schema-diff-color-fg !important;
+}

web/pgadmin/tools/search_objects/static/js/search_objects_dialog_wrapper.js

@@ -510,7 +510,7 @@ export default class SearchObjectsDialogWrapper extends DialogWrapper {
       buttons: [{
         text: '',
         key: 112,
-        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',

web/pgadmin/tools/sqleditor/static/scss/_history.scss

@@ -179,7 +179,7 @@
     .was-copied {
       background-color: $color-primary-light;
       border-color: $color-primary-light;
-      color: $active-color;
+      color: $btn-copied-color-fg;
     }
 
     .CodeMirror-scroll {

web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss

@@ -149,7 +149,7 @@ li.CodeMirror-hint-active {
 
 #datagrid .slick-header .slick-header-column.selected {
   background-color: $color-primary;
-  color: $color-primary-fg;
+  color: $datagrid-selected-color;
 }
 .slick-row .slick-cell {
   border-bottom: $panel-border;
@@ -211,6 +211,7 @@ li.CodeMirror-hint-active {
 /* Override selected row color */
 #datagrid .slick-row .slick-cell.selected {
     background-color: $table-bg-selected;
+    color: $datagrid-selected-color;
 }
 
 /* color the first column */

web/pgadmin/tools/user_management/static/js/user_management.js

@@ -106,7 +106,7 @@ define([
                 buttons: [{
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
@@ -686,7 +686,7 @@ define([
                 buttons: [{
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',

web/webpack.config.js

@@ -167,9 +167,16 @@ fs.readdirSync(all_themes_dir).map(function(curr_dir) {
   if(stats.isDirectory()) {
     /* Theme directory found */
     let cssfile = 'pgadmin.theme.'+curr_dir;
+
+    let disp_name = curr_dir;
+
+    if(curr_dir == 'high_contrast') {
+      disp_name = curr_dir + ' (Beta)';
+    }
+
     pgadminThemes[curr_dir] = {
       /* For now lets keep it as beta release */
-      disp_name: curr_dir,
+      disp_name: disp_name,
       cssfile: cssfile,
       preview_img: curr_dir + '_preview.png',
     };