Further extend theme-color coloring

src/components/modal.jsx

@@ -1,13 +1,20 @@
 import './modal.css';
 
 import { createPortal } from 'preact/compat';
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 
+import store from '../utils/store';
 import useCloseWatcher from '../utils/useCloseWatcher';
 
 const $modalContainer = document.getElementById('modal-container');
 
+function getBackdropThemeColor() {
+  return getComputedStyle(document.documentElement).getPropertyValue(
+    '--backdrop-theme-color',
+  );
+}
+
 function Modal({ children, onClose, onClick, class: className, minimized }) {
   if (!children) return null;
 
@@ -68,6 +75,50 @@ function Modal({ children, onClose, onClick, class: className, minimized }) {
     };
   }, [children, minimized]);
 
+  const $meta = useRef();
+  const metaColor = useRef();
+  useLayoutEffect(() => {
+    if (children && !minimized) {
+      const theme = store.local.get('theme');
+      if (theme) {
+        const backdropColor = getBackdropThemeColor();
+        console.log({ backdropColor });
+        $meta.current = document.querySelector(
+          `meta[name="theme-color"][data-theme-setting="manual"]`,
+        );
+        if ($meta.current) {
+          metaColor.current = $meta.current.content;
+          $meta.current.content = backdropColor;
+        }
+      } else {
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+          .matches
+          ? 'dark'
+          : 'light';
+        const backdropColor = getBackdropThemeColor();
+        console.log({ backdropColor });
+        $meta.current = document.querySelector(
+          `meta[name="theme-color"][media*="${colorScheme}"]`,
+        );
+        if ($meta.current) {
+          metaColor.current = $meta.current.content;
+          $meta.current.content = backdropColor;
+        }
+      }
+    } else {
+      // Reset meta color
+      if ($meta.current && metaColor.current) {
+        $meta.current.content = metaColor.current;
+      }
+    }
+    return () => {
+      // Reset meta color
+      if ($meta.current && metaColor.current) {
+        $meta.current.content = metaColor.current;
+      }
+    };
+  }, [children, minimized]);
+
   const Modal = (
     <div
       ref={(node) => {

src/index.css

@@ -88,8 +88,9 @@
   --outline-hover-color: rgba(128, 128, 128, 0.7);
   --divider-color: rgba(0, 0, 0, 0.1);
   --backdrop-color: rgba(0, 0, 0, 0.1);
+  --backdrop-solid-color: color-mix(in srgb, var(--bg-color) 90%, #000 10%);
+  --backdrop-theme-color: #e5e5e5;
   --backdrop-darker-color: rgba(0, 0, 0, 0.25);
-  --backdrop-solid-color: #eee;
   --img-bg-color: rgba(128, 128, 128, 0.2);
   --loader-color: #1c1e2199;
   --comment-line-color: #e5e5e5;
@@ -161,7 +162,8 @@
     --divider-color: rgba(255, 255, 255, 0.1);
     --bg-blur-color: #24252699;
     --backdrop-color: rgba(0, 0, 0, 0.5);
-    --backdrop-solid-color: #111;
+    --backdrop-solid-color: color-mix(in srgb, var(--bg-color) 50%, #000 50%);
+    --backdrop-theme-color: #121213; /* same as backdrop-solid-color but without color-mix, to be used for meta[theme-color] */
     --loader-color: #f0f2f599;
     --comment-line-color: #565656;
     --drop-shadow-color: rgba(0, 0, 0, 0.5);