From 0f7552accb8f1986f48f788a310c1d4e308d7ebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Fri, 3 Mar 2023 12:54:35 +0100
Subject: [PATCH] feat(theme): allow to load a Docusaurus page with theme from
 query-string: ?docusaurus-theme=dark (#8708)

---
 .../docusaurus-theme-classic/src/index.ts     | 16 +++++--
 website/_dogfooding/_pages tests/embeds.tsx   | 43 +++++++++++++++++++
 website/_dogfooding/_pages tests/index.mdx    |  1 +
 website/docs/styling-layout.mdx               | 11 +++++
 .../src/components/BrowserWindow/index.tsx    | 14 ++++--
 5 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 website/_dogfooding/_pages tests/embeds.tsx

diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts
index b85fddbbf2c3..68b4cf4e82bc 100644
--- a/packages/docusaurus-theme-classic/src/index.ts
+++ b/packages/docusaurus-theme-classic/src/index.ts
@@ -26,6 +26,8 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
 // Need to be inlined to prevent dark mode FOUC
 // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
 const ThemeStorageKey = 'theme';
+const ThemeQueryStringKey = 'docusaurus-theme';
+
 const noFlashColorMode = ({
   defaultMode,
   respectPrefersColorScheme,
@@ -39,6 +41,14 @@ const noFlashColorMode = ({
     document.documentElement.setAttribute('data-theme', theme);
   }
 
+  function getQueryStringTheme() {
+    var theme = null;
+    try {
+      theme = new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
+    } catch(e) {}
+    return theme;
+  }
+
   function getStoredTheme() {
     var theme = null;
     try {
@@ -47,9 +57,9 @@ const noFlashColorMode = ({
     return theme;
   }
 
-  var storedTheme = getStoredTheme();
-  if (storedTheme !== null) {
-    setDataThemeAttribute(storedTheme);
+  var initialTheme = getQueryStringTheme() || getStoredTheme();
+  if (initialTheme !== null) {
+    setDataThemeAttribute(initialTheme);
   } else {
     if (
       respectPrefersColorScheme &&
diff --git a/website/_dogfooding/_pages tests/embeds.tsx b/website/_dogfooding/_pages tests/embeds.tsx
new file mode 100644
index 000000000000..36bc06668862
--- /dev/null
+++ b/website/_dogfooding/_pages tests/embeds.tsx	
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+function IframeTest({url}: {url: string}) {
+  return (
+    <div style={{padding: 10}}>
+      <BrowserWindow
+        url={url}
+        style={{minWidth: '40vw', maxWidth: 400}}
+        bodyStyle={{padding: 0}}>
+        <iframe src={url} title={url} style={{width: '100%', height: 300}} />
+      </BrowserWindow>
+    </div>
+  );
+}
+
+// See https://github.com/facebook/docusaurus/issues/8672
+export default function Embeds(): JSX.Element {
+  return (
+    <Layout>
+      <div style={{padding: 10}}>
+        <Heading as="h1">Test Embeds</Heading>
+        <div style={{display: 'flex', flexWrap: 'wrap'}}>
+          <IframeTest url="/?docusaurus-theme=light" />
+          <IframeTest url="/?docusaurus-theme=dark" />
+          <IframeTest url="/?docusaurus-theme=unexpected-value" />
+          <IframeTest url="/" />
+          <IframeTest url="https://docusaurus.io/" />
+          <IframeTest url="https://tutorial.docusaurus.io/" />
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/website/_dogfooding/_pages tests/index.mdx b/website/_dogfooding/_pages tests/index.mdx
index d3986f1ca47e..545e2184c806 100644
--- a/website/_dogfooding/_pages tests/index.mdx	
+++ b/website/_dogfooding/_pages tests/index.mdx	
@@ -33,3 +33,4 @@ import Readme from "../README.mdx"
 - [Head metadata tests](/tests/pages/head-metadata)
 - [Unlisted page](/tests/pages/unlisted)
 - [Analytics](/tests/pages/analytics)
+- [Embeds](/tests/pages/embeds)
diff --git a/website/docs/styling-layout.mdx b/website/docs/styling-layout.mdx
index d11c8ab07498..cac5c8ca8600 100644
--- a/website/docs/styling-layout.mdx
+++ b/website/docs/styling-layout.mdx
@@ -127,6 +127,17 @@ In light mode, the `<html>` element has a `data-theme="light"` attribute; in dar
 }
 ```
 
+:::tip
+
+It is possible to initialize the Docusaurus theme directly from a `docusaurus-theme` query string parameter.
+
+Examples:
+
+- [`https://docusaurus.io/?docusaurus-theme=dark`](https://docusaurus.io/?docusaurus-theme=dark)
+- [`https://docusaurus.io/docs/configuration?docusaurus-theme=light`](https://docusaurus.io/docs/configuration?docusaurus-theme=light)
+
+:::
+
 ### Mobile View {#mobile-view}
 
 Docusaurus uses `996px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries.
diff --git a/website/src/components/BrowserWindow/index.tsx b/website/src/components/BrowserWindow/index.tsx
index 26f315356c9f..0d2312ee8e6b 100644
--- a/website/src/components/BrowserWindow/index.tsx
+++ b/website/src/components/BrowserWindow/index.tsx
@@ -5,24 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {type CSSProperties, type ReactNode} from 'react';
 import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
 interface Props {
   children: ReactNode;
-  minHeight: number;
+  minHeight?: number;
   url: string;
+  style?: CSSProperties;
+  bodyStyle?: CSSProperties;
 }
 
 export default function BrowserWindow({
   children,
   minHeight,
   url = 'http://localhost:3000',
+  style,
+  bodyStyle,
 }: Props): JSX.Element {
   return (
-    <div className={styles.browserWindow} style={{minHeight}}>
+    <div className={styles.browserWindow} style={{...style, minHeight}}>
       <div className={styles.browserWindowHeader}>
         <div className={styles.buttons}>
           <span className={styles.dot} style={{background: '#f25f58'}} />
@@ -41,7 +45,9 @@ export default function BrowserWindow({
         </div>
       </div>
 
-      <div className={styles.browserWindowBody}>{children}</div>
+      <div className={styles.browserWindowBody} style={bodyStyle}>
+        {children}
+      </div>
     </div>
   );
 }