feat(frontend): overlay window controls

Might need manual intervention in browsers, e.g.
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay#enable-the-window-controls-overlay-api-in-microsoft-edge

1 files changed, 21 insertions, 0 deletions

diff --git a/subprojects/frontend/src/WindowControlsOverlayColor.tsx b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
new file mode 100644
index 00000000..14eda566
--- /dev/null
+++ b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material/styles';
+import { useEffect } from 'react';
+
+export default function WindowControlsOverlayColor(): null {
+  const {
+    palette: {
+      outer: { background },
+    },
+  } = useTheme();
+  useEffect(() => {
+    document.head
+      .querySelectorAll('meta[name="theme-color"]')
+      .forEach((meta) => meta.remove());
+    const meta = document.createElement('meta');
+    meta.name = 'theme-color';
+    meta.content = background;
+    document.head.appendChild(meta);
+  }, [background]);
+
+  return null;
+}