diff --git a/src/webui/template/index.html b/src/webui/template/index.html
index 7c6b22d..f924a8c 100644
--- a/src/webui/template/index.html
+++ b/src/webui/template/index.html
@@ -12,6 +12,7 @@
         window.VERDACCIO_API_URL = '<%= htmlWebpackPlugin.options.verdaccioURL %>/-/verdaccio/';
         window.VERDACCIO_SCOPE = '<%= htmlWebpackPlugin.options.scope %>';
         window.VERDACCIO_LOGO = '<%= htmlWebpackPlugin.options.logo %>';
+        window.VERDACCIO_PRIMARY_COLOR = '<%= htmlWebpackPlugin.options.primary_color %>';
         window.VERDACCIO_VERSION = '<%= htmlWebpackPlugin.options.version_app %>';
     </script>
 </head>
diff --git a/src/webui/utils/styles/colors.js b/src/webui/utils/styles/colors.js
index 43e5d0b..f448452 100644
--- a/src/webui/utils/styles/colors.js
+++ b/src/webui/utils/styles/colors.js
@@ -30,7 +30,7 @@ const colors = {
     // Main colors
     // -------------------------
 
-    primary: '#4b5e40',
+    primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
     secondary: '#20232a',
 
 };
diff --git a/tools/webpack.prod.config.babel.js b/tools/webpack.prod.config.babel.js
index 48557de..aeb3a3f 100644
--- a/tools/webpack.prod.config.babel.js
+++ b/tools/webpack.prod.config.babel.js
@@ -47,6 +47,7 @@ const prodConf = {
       title: 'ToReplaceByTitle',
       scope: 'ToReplaceByScope',
       logo: 'ToReplaceByLogo',
+      primary_color: 'ToReplaceByPrimaryColor',
       filename: 'index.html',
       favicon: `${env.SRC_ROOT}/webui/template/favicon.ico`,
       verdaccioURL: 'ToReplaceByVerdaccio',