1) Added support for custom theme creation and selection. Fixes #4348.

2) Added Dark(Beta) UI Theme option. Fixes #3741.
3) Fix an issue where a black arrow-kind image is displaying at the background of browser tree images. Fixes #4171

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

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

@@ -242,10 +242,17 @@ define('pgadmin.preferences', [
                 // Convert the array to SelectControl understandable options.
               _.each(p.options, function(o) {
                 if ('label' in o && 'value' in o) {
-                  opts.push({
+                  let push_var = {
                     'label': o.label,
                     'value': o.value,
-                  });
+                  };
+                  push_var['label'] = o.label;
+                  push_var['value'] = o.value;
+
+                  if('preview_src' in o) {
+                    push_var['preview_src'] = o.preview_src;
+                  }
+                  opts.push(push_var);
                   if (o.value == p.value)
                     has_value = true;
                 } else {
@@ -454,6 +461,7 @@ define('pgadmin.preferences', [
             }
 
             if (e.button.text == gettext('Save')) {
+              let requires_refresh = false;
               preferences.updateAll();
 
               /* Find the modules changed */
@@ -463,8 +471,27 @@ define('pgadmin.preferences', [
                 if(!modulesChanged[pref.module]) {
                   modulesChanged[pref.module] = true;
                 }
+
+                if(pref.name == 'theme') {
+                  requires_refresh = true;
+                }
               });
 
+              if(requires_refresh) {
+                Alertify.confirm(
+                  gettext('Refresh required'),
+                  gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now ?'),
+                  function() {
+                    /* If user clicks Yes */
+                    location.reload();
+                    return true;
+                  },
+                  function() {/* If user clicks No */ return true;}
+                ).set('labels', {
+                  ok: gettext('Refresh'),
+                  cancel: gettext('Later'),
+                });
+              }
               // Refresh preferences cache
               pgBrowser.cache_preferences(modulesChanged);
             }