Add signal dark for docusaurus (#207)

pearmini · May 4, 2024 · 7b1383a · 7b1383a
1 parent ae1ad7b
commit 7b1383a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/packages/genji-theme-docusaurus/.prettierrc b/packages/genji-theme-docusaurus/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}
diff --git a/packages/genji-theme-docusaurus/src/theme/DocRoot/index.jsx b/packages/genji-theme-docusaurus/src/theme/DocRoot/index.jsx
@@ -3,9 +3,26 @@ import ClassicDocRoot from "@theme-init/DocRoot";
 import { Page } from "genji-runtime";
 import { useLocation } from "@docusaurus/router";
 
+function useDark() {
+  const [dark, setDark] = React.useState(false);
+  useEffect(() => {
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "data-theme") {
+          setDark(mutation.target.getAttribute("data-theme") === "dark");
+        }
+      }
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    return () => observer.disconnect();
+  }, []);
+  return dark;
+}
+
 export default function DocRoot(props) {
   const pageRef = useRef(null);
   const location = useLocation();
+  const dark = useDark();
 
   useEffect(() => {
     const config = window.__genjiConfig || {};
@@ -14,5 +31,11 @@ export default function DocRoot(props) {
     return () => pageRef.current.dispose();
   }, [location.pathname]);
 
+  useEffect(() => {
+    if (pageRef.current) {
+      pageRef.current.emit("dark", dark);
+    }
+  }, [dark]);
+
   return <ClassicDocRoot {...props} />;
 }
diff --git a/packages/genji-theme-docusaurus/test/docs/dark.md b/packages/genji-theme-docusaurus/test/docs/dark.md
@@ -0,0 +1,9 @@
+# Dark
+
+```js eval
+dark;
+```
+
+```js eval
+document.createTextNode(dark ? "dark" : "light");
+```