docs: use Shadow DOM to display examples (#2588)

website/package.json

@@ -28,6 +28,7 @@
     "react-day-picker": "workspace:^",
     "react-day-picker-v8": "npm:[email protected]",
     "react-dom": "^18.3.1",
+    "react-shadow": "^20.5.0",
     "remark-github": "^12.0.0"
   },
   "devDependencies": {
@@ -36,6 +37,7 @@
     "@docusaurus/types": "3.5.2",
     "docusaurus-plugin-typedoc": "^1.0.5",
     "identity-obj-proxy": "^3.0.0",
+    "raw-loader": "^4.0.2",
     "typedoc": "^0.26.10",
     "typedoc-plugin-frontmatter": "^1.0.0",
     "typedoc-plugin-markdown": "^4.2.9",

website/src/components/ShadowDomWrapper.tsx

@@ -1,3 +1,23 @@
+import style from "!raw-loader!react-day-picker/style.css";
+import { useColorMode } from "@docusaurus/theme-common";
+import root from "react-shadow";
+
 export function ShadowDomWrapper({ children }: { children: React.ReactNode }) {
-  return children;
+  const colorMode = useColorMode();
+  return (
+    <root.div>
+      {children}
+      <style>{style.toString()}</style>
+      {colorMode.isDarkTheme && (
+        <style>{`
+          .rdp-root {
+              --rdp-accent-color: var(--ifm-color-primary);
+              --rdp-accent-background-color: #073845;
+              --rdp-range_end-color: black;
+              --rdp-range_start-color: black;
+            }
+          `}</style>
+      )}
+    </root.div>
+  );
 }

website/src/css/custom.css

@@ -79,6 +79,7 @@ html[data-theme="dark"] {
 .rdp-footer {
   margin: 1rem 0;
 }
+
 html[data-theme="dark"] .rdp-root {
   --rdp-accent-color: var(--ifm-color-primary);
   --rdp-accent-background-color: #073845;