diff --git a/scm-ui/ui-components/.storybook/webpack.config.js b/scm-ui/ui-components/.storybook/webpack.config.js
index 9269500c2d..9b7c1b6d26 100644
--- a/scm-ui/ui-components/.storybook/webpack.config.js
+++ b/scm-ui/ui-components/.storybook/webpack.config.js
@@ -50,8 +50,16 @@ module.exports = {
         use: [
           // Creates `style` nodes from JS strings
           "style-loader",
-          // Translates CSS into CommonJS
-          "css-loader",
+          {
+            loader: "css-loader",
+            options: {
+              // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
+              // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
+              importLoaders: 1,
+              // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
+              modules: { auto: true }
+            }
+          },
           // Compiles Sass to CSS
           "sass-loader"
         ]
diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json
index c4c8eb61fe..31469a0f43 100644
--- a/scm-ui/ui-components/package.json
+++ b/scm-ui/ui-components/package.json
@@ -34,7 +34,7 @@
     "@types/react-router-dom": "^5.1.0",
     "@types/react-select": "^2.0.19",
     "@types/react-syntax-highlighter": "^11.0.1",
-    "@types/refractor": "^2.8.0",
+    "@types/refractor": "^3.0.0",
     "@types/storybook__addon-storyshots": "^5.1.1",
     "@types/styled-components": "^5.1.0",
     "@types/to-camel-case": "^1.0.0",
diff --git a/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js b/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js
index ca1ac2ed69..4d816c3c20 100644
--- a/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js
+++ b/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js
@@ -121,4 +121,4 @@ function createJavascriptStyleSheet(directory, inputFile, outputFile) {
   });
 }
 
-createJavascriptStyleSheet(path.join("..", "src"), "syntax-highlighting.css", "syntax-highlighting.ts");
+createJavascriptStyleSheet(path.join("..", "src"), "syntax-highlighting.module.css", "syntax-highlighting.ts");
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 2129da9f5e..1276bd1c8f 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -4224,7 +4224,7 @@ exports[`Storyshots Diff Binaries 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -4407,7 +4407,7 @@ exports[`Storyshots Diff Binaries 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -5271,7 +5271,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -6129,7 +6129,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -6583,7 +6583,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -7196,7 +7196,7 @@ exports[`Storyshots Diff Default 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -7777,7 +7777,7 @@ exports[`Storyshots Diff Default 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -8635,7 +8635,7 @@ exports[`Storyshots Diff Default 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -9089,7 +9089,7 @@ exports[`Storyshots Diff Default 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -9543,7 +9543,7 @@ exports[`Storyshots Diff Default 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -10604,7 +10604,7 @@ exports[`Storyshots Diff Default 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -11142,7 +11142,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -11760,7 +11760,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -12715,7 +12715,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -13241,7 +13241,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -13767,7 +13767,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -14983,7 +14983,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -15562,7 +15562,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           src/main/java/com/cloudogu/scm/review/events/EventListener.java
         </p>
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -16147,7 +16147,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           src/main/js/ChangeNotification.tsx
         </p>
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -17009,7 +17009,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           src/main/resources/locales/de/plugins.json
         </p>
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -17467,7 +17467,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           src/main/resources/locales/en/plugins.json
         </p>
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -17925,7 +17925,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           src/test/java/com/cloudogu/scm/review/events/ClientTest.java
         </p>
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -18990,7 +18990,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           Main.java
         </p>
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -19546,7 +19546,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -20145,7 +20145,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -21021,7 +21021,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -21493,7 +21493,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -21965,7 +21965,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -23044,7 +23044,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -23582,7 +23582,7 @@ exports[`Storyshots Diff Hunks 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -24427,7 +24427,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -25020,7 +25020,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -25890,7 +25890,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -26344,7 +26344,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -26798,7 +26798,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -27859,7 +27859,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -28409,7 +28409,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -29030,7 +29030,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -29950,7 +29950,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -30434,7 +30434,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -30918,7 +30918,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -32055,7 +32055,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -32629,7 +32629,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -33303,7 +33303,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -34251,7 +34251,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -34757,7 +34757,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -35263,7 +35263,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -36493,7 +36493,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -37104,7 +37104,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -37685,7 +37685,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -38543,7 +38543,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -38997,7 +38997,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -39451,7 +39451,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -40512,7 +40512,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -41050,7 +41050,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -41668,7 +41668,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -42623,7 +42623,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -43149,7 +43149,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -43675,7 +43675,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
@@ -44891,7 +44891,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         className="panel-block is-paddingless"
       >
         <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
           onMouseDown={[Function]}
         >
           <colgroup>
diff --git a/scm-ui/ui-components/src/repos/Tokenize.worker.ts b/scm-ui/ui-components/src/repos/Tokenize.worker.ts
index fba9aec455..72f74b39b1 100644
--- a/scm-ui/ui-components/src/repos/Tokenize.worker.ts
+++ b/scm-ui/ui-components/src/repos/Tokenize.worker.ts
@@ -24,14 +24,28 @@
 
 // @ts-ignore we have no types for react-diff-view
 import { tokenize } from "react-diff-view";
-import refractor from "./refractorAdapter";
+import createRefractor, { RefractorAdapter } from "./refractorAdapter";
 
 // the WorkerGlobalScope is assigned to self
 // see https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/self
 declare const self: Worker;
 
-self.addEventListener("message", ({ data: { id, payload } }) => {
+type TokenizeMessage = {
+  id: string;
+  language: string;
+  hunks: any;
+  payload: any;
+};
+
+let refractor: RefractorAdapter;
+
+function initRefractor(theme: { [key: string]: string }) {
+  refractor = createRefractor(theme);
+}
+
+function runTokenize({ id, payload }: TokenizeMessage) {
   const { hunks, language } = payload;
+
   const options = {
     highlight: language !== "text",
     language: language,
@@ -60,4 +74,12 @@ self.addEventListener("message", ({ data: { id, payload } }) => {
   if (options.highlight) {
     refractor.loadLanguage(language, createTokenizer(self));
   }
+}
+
+self.addEventListener("message", ({ data }) => {
+  if (data.theme) {
+    initRefractor(data.theme);
+  } else {
+    runTokenize(data);
+  }
 });
diff --git a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx b/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
index 26e1d36455..82242af187 100644
--- a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
+++ b/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
@@ -28,10 +28,8 @@ import { Diff, useTokenizeWorker } from "react-diff-view";
 import { File } from "./DiffTypes";
 import { determineLanguage } from "../languages";
 
-// styling for the diff tokens
-// this must be aligned with th style, which is used in the SyntaxHighlighter component
-// eslint-disable-next-line no-restricted-imports
-import "../syntax-highlighting.css";
+// @ts-ignore no types for css modules
+import theme from "../syntax-highlighting.module.css";
 
 const DiffView = styled(Diff)`
   /* align line numbers */
@@ -60,26 +58,11 @@ const DiffView = styled(Diff)`
   &.unified .diff-widget-content .is-indented-line {
     padding-left: 6.5rem;
   }
-  
-  /* conflict between prism and bulma number class */
-  .number {
-    align-items: inherit;
-    background-color: inherit;
-    border-radius: inherit;
-    display: initial;
-    font-size: inherit;
-    height: inherit;
-    justify-content: inherit;
-    margin-right: inherit;
-    margin-left: 0;
-    min-width: inherit;
-    padding: 0;
-    text-align: inherit;
-  }
 `;
 
 // WebWorker which creates tokens for syntax highlighting
 const tokenize = new Worker("./Tokenize.worker.ts", { name: "tokenizer", type: "module" });
+tokenize.postMessage({ theme });
 
 type Props = {
   file: File;
diff --git a/scm-ui/ui-components/src/repos/refractorAdapter.ts b/scm-ui/ui-components/src/repos/refractorAdapter.ts
index 0bac53e4d2..6c2f93f1ec 100644
--- a/scm-ui/ui-components/src/repos/refractorAdapter.ts
+++ b/scm-ui/ui-components/src/repos/refractorAdapter.ts
@@ -24,29 +24,51 @@
 
 import refractor from "refractor/core";
 
-const isLanguageRegistered = (lang: string) => {
-  const registeredLanguages = refractor.listLanguages();
-  return registeredLanguages.includes(lang);
+type RunHookEnv = {
+  classes: string[];
 };
 
-const loadLanguage = (lang: string, callback: () => void) => {
-  if (isLanguageRegistered(lang)) {
-    callback();
-  } else {
-    import(
-      /* webpackChunkName: "tokenizer-refractor-[request]" */
-      `refractor/lang/${lang}`
-    ).then(loadedLanguage => {
-      refractor.register(loadedLanguage.default);
+export type RefractorAdapter = typeof refractor & {
+  isLanguageRegistered: (lang: string) => boolean;
+  loadLanguage: (lang: string, callback: () => void) => void;
+};
+
+const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
+  const isLanguageRegistered = (lang: string) => {
+    const registeredLanguages = refractor.listLanguages();
+    return registeredLanguages.includes(lang);
+  };
+
+  const loadLanguage = (lang: string, callback: () => void) => {
+    if (isLanguageRegistered(lang)) {
       callback();
-    });
-  }
+    } else {
+      import(
+        /* webpackChunkName: "tokenizer-refractor-[request]" */
+        `refractor/lang/${lang}`
+      ).then(loadedLanguage => {
+        refractor.register(loadedLanguage.default);
+        callback();
+      });
+    }
+  };
+
+  // @ts-ignore hooks are not in the type definition
+  const originalRunHook = refractor.hooks.run;
+  const runHook = (name: string, env: RunHookEnv) => {
+    originalRunHook.apply(name, env);
+    if (env.classes) {
+      env.classes = env.classes.map(className => theme[className] || className);
+    }
+  };
+  // @ts-ignore hooks are not in the type definition
+  refractor.hooks.run = runHook;
+
+  return {
+    isLanguageRegistered,
+    loadLanguage,
+    ...refractor
+  };
 };
 
-const refractorAdapter = {
-  isLanguageRegistered,
-  loadLanguage,
-  ...refractor
-};
-
-export default refractorAdapter;
+export default createAdapter;
diff --git a/scm-ui/ui-components/src/syntax-highlighting.css b/scm-ui/ui-components/src/syntax-highlighting.module.css
similarity index 100%
rename from scm-ui/ui-components/src/syntax-highlighting.css
rename to scm-ui/ui-components/src/syntax-highlighting.module.css
diff --git a/scm-ui/ui-scripts/src/webpack.config.js b/scm-ui/ui-scripts/src/webpack.config.js
index 0bc9f93fd7..bc20d91718 100644
--- a/scm-ui/ui-scripts/src/webpack.config.js
+++ b/scm-ui/ui-scripts/src/webpack.config.js
@@ -90,8 +90,16 @@ module.exports = [
           use: [
             // Creates `style` nodes from JS strings
             "style-loader",
-            // Translates CSS into CommonJS
-            "css-loader",
+            {
+              loader: "css-loader",
+              options: {
+                // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
+                // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
+                importLoaders: 1,
+                // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
+                modules: { auto: true }
+              }
+            },
             // Compiles Sass to CSS
             "sass-loader"
           ]
diff --git a/yarn.lock b/yarn.lock
index 087b9f224d..96120d711d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3861,10 +3861,10 @@
   dependencies:
     redux "^4.0.0"
 
-"@types/refractor@^2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-2.8.0.tgz#2e17b69f27e89c1ea076f49b599abe3567c54e01"
-  integrity sha512-l3wSB96RFZnvB8bnbF8UmYsDD1MQl+u7jtYq+DgI/vo3RD5pdbK3OitGEvMO3DNJhTYmCEhXLVWyyWTddzwNzQ==
+"@types/refractor@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-3.0.0.tgz#c535cfad1c54cf377ae2984f6cf6e9627a36ea66"
+  integrity sha512-jkCqkTpxMXXfN03Xpzj+mBMxo9IxG616SV2U42iwHkBGq/f8RrX3DCzLayIqUV+MAIBCUvl5xPnjqpUtZRnMqA==
   dependencies:
     "@types/prismjs" "*"