Add experimental high contrast mode (#1845)

Add an experimental high contrast color theme to SCM-Manager. The high contrast mode uses a dark background and color with a high contrast for a better accessibility.
The change adds the theme to ui-styles and theme switcher to the storybook of ui-components.

scm-ui/ui-scripts/src/webpack.config.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 const path = require("path");
+const fs = require("fs");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const WorkerPlugin = require("worker-plugin");
@@ -46,6 +47,13 @@ if (isDevelopment) {
   webpackPlugins.push(new ReactRefreshWebpackPlugin());
 }
 
+const themedir = path.join(root, "ui-styles", "src");
+const themes = fs
+  .readdirSync(themedir)
+  .map((filename) => path.parse(filename))
+  .filter((p) => p.ext === ".scss")
+  .reduce((entries, current) => ({ ...entries, [current.name]: path.join(themedir, current.base) }), {});
+
 console.log(`build ${mode} bundles`);
 
 module.exports = [
@@ -163,7 +171,7 @@ module.exports = [
   {
     mode,
     context: root,
-    entry: "./ui-styles/src/scm.scss",
+    entry: themes,
     module: {
       rules: [
         {
@@ -184,7 +192,7 @@ module.exports = [
     },
     plugins: [
       new MiniCssExtractPlugin({
-        filename: "ui-styles.css",
+        filename: "ui-theme-[name].css",
         ignoreOrder: false
       })
     ],
@@ -193,7 +201,7 @@ module.exports = [
     },
     output: {
       path: path.join(root, "build", "webapp", "assets"),
-      filename: "ui-styles.bundle.js"
+      filename: "ui-theme-[name].bundle.js"
     }
   },
   {