feat(ColourPicker): add dark mode to the colour picker

package.json

@@ -85,9 +85,9 @@
     "motion": "^10.18.0",
     "postcss": "^8.4.45",
     "publish-browser-extension": "^2.2.1",
-    "react": "^18.3.1",
+    "react": "17",
     "react-best-gradient-color-picker": "^3.0.10",
-    "react-dom": "^18.3.1",
+    "react-dom": "17",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.2",
     "react-shadow-root": "^6.2.0",

src/svelte-interface/components/ColourPicker.css

@@ -0,0 +1,83 @@
+.dark {
+  div:has(> #rbgcp-wrapper) {
+    background: transparent !important;
+  }
+
+  #rbgcp-wrapper {
+    div[style="padding-top: 11px; position: relative;"] div {
+      color: white !important;
+    }
+
+    div:has(> #rbgcp-solid-btn),
+    div:has(> #rbgcp-advanced-btn),
+    #rbgcp-color-model-btn > div,
+    #rbgcp-gradient-controls-wrap {
+      background-color: #37373b !important;
+      color: white !important;
+
+      svg {
+        circle {
+          fill: white !important;
+        }
+
+        polyline,
+        line,
+        g,
+        path {
+          stroke: white !important;
+        }
+      }
+
+      #rbgcp-radial-btn,
+      #rbgcp-linear-btn {
+        &[style*="background: white;"] {
+          background-color: #28282B !important;
+        }
+
+        svg {
+          path, g, polyline, circle {
+            stroke: white !important;
+            fill: transparent !important;
+          }
+        }
+      }
+
+      div:has(> #rbgcp-stop-input) svg {
+        path {
+          stroke: unset !important;
+          fill: white !important;
+        }
+      }
+
+      #rbgcp-comparibles-btn svg path {
+        fill: white !important;
+      }
+
+      > div {
+        color: white !important;
+
+        &[style*="background: white;"] {
+          background: #28282b !important;
+        }
+      }
+    }
+
+    div:has(> #rbgcp-degree-input) {
+      width: 70px !important;
+    }
+
+    #rbgcp-degree-input {
+      width: 50px !important;
+    }
+
+    #rbgcp-degree-input,
+    #rbgcp-stop-input {
+      color: white !important;
+    }
+
+    #rbgcp-gradient-controls-wrap > div,
+    #rbgcp-gradient-controls-wrap > div > div:not([role="button"]) {
+      background-color: #37373b !important;
+    }
+  }
+}

src/svelte-interface/components/ColourPicker.svelte

@@ -13,7 +13,6 @@
   let content: HTMLDivElement;
 
   const closePicker = async () => {
-    // reverse animation
     animate(
       content,
       { scale: [1, 0.4], opacity: [1, 0] },
@@ -26,6 +25,7 @@
       { easing: [0.4, 0, 0.2, 1] }
     );
 
+
     await delay(400);
     hidePicker();
   }

src/svelte-interface/components/utils/ReactAdapter.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
   import React from "react";
-  import { createRoot } from "react-dom/client";
+  import ReactDOM from "react-dom";
   import { onDestroy, onMount } from "svelte";
 
   const e = React.createElement;
   let container: HTMLDivElement;
-  let root: ReturnType<typeof createRoot>;
 
   onMount(() => {
     const { el, children, class: _, ...props } = $$props;
     try {
-      root = createRoot(container);
+      ReactDOM.render(e(el, props, children), container);
-      root.render(e(el, props, children));
     } catch (err) {
       console.warn(`react-adapter failed to mount.`, { err });
     }
@@ -19,9 +17,7 @@
 
   onDestroy(() => {
     try {
-      if (root) {
+      ReactDOM.unmountComponentAtNode(container);
-        root.unmount();
-      }
     } catch (err) {
       console.warn(`react-adapter failed to unmount.`, { err });
     }

src/svelte-interface/index.css

@@ -1,3 +1,5 @@
+@import './components/ColourPicker.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;