Fix css conflicts on diff syntaxhighlighting by using a css module

2026-05-07 14:57:44 +02:00 · 2020-10-23 13:06:36 +02:00
parent ea1eab6356
commit 5f30cf8f30
10 changed files with 156 additions and 113 deletions
--- 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>
--- 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);
+  }
 });
--- 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;
--- 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;
--- a/scm-ui/ui-components/src/syntax-highlighting.module.css
+++ b/scm-ui/ui-components/src/syntax-highlighting.module.css