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/misc/__init__.py

@@ -23,6 +23,8 @@ MODULE_NAME = 'misc'
 
 
 class MiscModule(PgAdminModule):
+    LABEL = gettext('Miscellaneous')
+
     def get_own_javascripts(self):
         return [
             {
@@ -47,10 +49,6 @@ class MiscModule(PgAdminModule):
         """
         Register preferences for this module.
         """
-        self.misc_preference = Preferences(
-            'miscellaneous', gettext('Miscellaneous')
-        )
-
         lang_options = []
         for lang in config.LANGUAGES:
             lang_options.append(
@@ -61,13 +59,39 @@ class MiscModule(PgAdminModule):
             )
 
         # Register options for the User language settings
-        self.misc_preference.register(
-            'miscellaneous', 'user_language',
+        self.preference.register(
+            'user_language', 'user_language',
             gettext("User language"), 'options', 'en',
             category_label=gettext('User language'),
             options=lang_options
         )
 
+        theme_options = []
+
+        for theme in config.THEMES:
+            theme_options.append({
+                'label': config.THEMES[theme]['disp_name']
+                .replace('_', ' ')
+                .replace('-', ' ')
+                .title(),
+                'value': theme,
+                'preview_src': url_for(
+                    'static', filename='js/generated/img/' +
+                    config.THEMES[theme]['preview_img']
+                )
+            })
+
+        self.preference.register(
+            'themes', 'theme',
+            gettext("Theme"), 'options', 'standard',
+            category_label=gettext('Themes'),
+            options=theme_options,
+            help_str=gettext(
+                'A refresh is required to apply the theme. Below is the '
+                'preview of the theme'
+            )
+        )
+
     def get_exposed_url_endpoints(self):
         """
         Returns: