@docusaurus/theme-common 0.0.0-5542 → 0.0.0-5545

package/lib/components/ThemedComponent/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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';
+declare const AllThemes: readonly ["light", "dark"];
+type Theme = (typeof AllThemes)[number];
+type RenderFn = ({ theme, className, }: {
+    theme: Theme;
+    className: string;
+}) => React.ReactNode;
+type Props = {
+    children: RenderFn;
+    className?: string;
+};
+/**
+ * Generic component to render anything themed in light/dark
+ * Note: it's preferable to use CSS for theming because this component
+ * will need to render all the variants during SSR to avoid a theme flash.
+ *
+ * Use this only when CSS customizations are not convenient or impossible.
+ * For example, rendering themed images or SVGs...
+ *
+ * @param className applied to all the variants
+ * @param children function to render a theme variant
+ * @constructor
+ */
+export default function ThemedComponent({ className, children, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ThemedComponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedComponent/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,SAAS,4BAA6B,CAAC;AAE7C,KAAK,KAAK,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAExC,KAAK,QAAQ,GAAG,CAAC,EACf,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8BrB"}

package/lib/components/ThemedComponent/index.js

@@ -0,0 +1,48 @@
+/**
+ * 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 clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { useColorMode } from '../../contexts/colorMode';
+import styles from './styles.module.css';
+const AllThemes = ['light', 'dark'];
+/**
+ * Generic component to render anything themed in light/dark
+ * Note: it's preferable to use CSS for theming because this component
+ * will need to render all the variants during SSR to avoid a theme flash.
+ *
+ * Use this only when CSS customizations are not convenient or impossible.
+ * For example, rendering themed images or SVGs...
+ *
+ * @param className applied to all the variants
+ * @param children function to render a theme variant
+ * @constructor
+ */
+export default function ThemedComponent({ className, children, }) {
+    const isBrowser = useIsBrowser();
+    const { colorMode } = useColorMode();
+    function getThemesToRender() {
+        if (isBrowser) {
+            return colorMode === 'dark' ? ['dark'] : ['light'];
+        }
+        // We need to render both components on the server / hydration to avoid:
+        // - a flash of wrong theme before hydration
+        // - React hydration mismatches
+        // See https://github.com/facebook/docusaurus/pull/3730
+        return ['light', 'dark'];
+    }
+    return (<>
+      {getThemesToRender().map((theme) => {
+            const themedElement = children({
+                theme,
+                className: clsx(className, styles.themedComponent, styles[`themedComponent--${theme}`]),
+            });
+            return <React.Fragment key={theme}>{themedElement}</React.Fragment>;
+        })}
+    </>);
+}
+//# sourceMappingURL=index.js.map

package/lib/components/ThemedComponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ThemedComponent/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEtD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAiB7C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAS,EACT,QAAQ,GACF;IACN,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAC,SAAS,EAAC,GAAG,YAAY,EAAE,CAAC;IAEnC,SAAS,iBAAiB;QACxB,IAAI,SAAS,EAAE;YACb,OAAO,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;SACpD;QACD,wEAAwE;QACxE,4CAA4C;QAC5C,+BAA+B;QAC/B,uDAAuD;QACvD,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC3B,CAAC;IAED,OAAO,CACL,EACE;MAAA,CAAC,iBAAiB,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACjC,MAAM,aAAa,GAAG,QAAQ,CAAC;gBAC7B,KAAK;gBACL,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,eAAe,EACtB,MAAM,CAAC,oBAAoB,KAAK,EAAE,CAAC,CACpC;aACF,CAAC,CAAC;YACH,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QACtE,CAAC,CAAC,CACJ;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}

package/lib/components/ThemedComponent/styles.module.css

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+.themedComponent {
+  display: none;
+}
+
+[data-theme='light'] .themedComponent--light {
+  display: initial;
+}
+
+[data-theme='dark'] .themedComponent--dark {
+  display: initial;
+}

package/lib/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { useThemeConfig, type ThemeConfig, type UserThemeConfig, type Navbar, type NavbarItem, type NavbarLogo, type MultiColumnFooter, type SimpleFooter, type Footer, type FooterLogo, type FooterLinkItem, type ColorModeConfig, } from './utils/useThemeConfig';
+export { default as ThemedComponent } from './components/ThemedComponent';
 export { createStorageSlot, useStorageSlot, listStorageKeys, } from './utils/storageUtils';
 export { useContextualSearchFilters } from './utils/searchUtils';
 export { useCurrentSidebarCategory, filterDocCardListItems, } from './utils/docsUtils';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,MAAM,EACX,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAExD,OAAO,EACL,yBAAyB,EACzB,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,uBAAuB,CAAC;AAE1E,OAAO,EAAC,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,yBAAyB,EACzB,KAAK,4BAA4B,GAClC,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOpD,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,KAAK,cAAc,GACpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AAExE,OAAO,EAAC,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EACL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,MAAM,EACX,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAExE,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAExD,OAAO,EACL,yBAAyB,EACzB,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,uBAAuB,CAAC;AAE1E,OAAO,EAAC,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,yBAAyB,EACzB,KAAK,4BAA4B,GAClC,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOpD,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,KAAK,cAAc,GACpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AAExE,OAAO,EAAC,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EACL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC"}

package/lib/index.js

@@ -8,6 +8,7 @@
  * APIs to document
  */
 export { useThemeConfig, } from './utils/useThemeConfig';
+export { default as ThemedComponent } from './components/ThemedComponent';
 export { createStorageSlot, useStorageSlot, listStorageKeys, } from './utils/storageUtils';
 export { useContextualSearchFilters } from './utils/searchUtils';
 export { useCurrentSidebarCategory, filterDocCardListItems, } from './utils/docsUtils';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AAEH,OAAO,EACL,cAAc,GAYf,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAExD,OAAO,EACL,yBAAyB,EACzB,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,uBAAuB,CAAC;AAE1E,OAAO,EAAC,YAAY,EAAiB,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,yBAAyB,GAE1B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD;;;GAGG;AAEH,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAElB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AAExE,OAAO,EAAC,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EACL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AAEH,OAAO,EACL,cAAc,GAYf,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAExE,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAExD,OAAO,EACL,yBAAyB,EACzB,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,uBAAuB,CAAC;AAE1E,OAAO,EAAC,YAAY,EAAiB,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,yBAAyB,GAE1B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD;;;GAGG;AAEH,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAElB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AAExE,OAAO,EAAC,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EACL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-common",
-  "version": "0.0.0-5542",
+  "version": "0.0.0-5545",
   "description": "Common code for Docusaurus themes.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -30,13 +30,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/mdx-loader": "0.0.0-5542",
-    "@docusaurus/module-type-aliases": "0.0.0-5542",
-    "@docusaurus/plugin-content-blog": "0.0.0-5542",
-    "@docusaurus/plugin-content-docs": "0.0.0-5542",
-    "@docusaurus/plugin-content-pages": "0.0.0-5542",
-    "@docusaurus/utils": "0.0.0-5542",
-    "@docusaurus/utils-common": "0.0.0-5542",
+    "@docusaurus/mdx-loader": "0.0.0-5545",
+    "@docusaurus/module-type-aliases": "0.0.0-5545",
+    "@docusaurus/plugin-content-blog": "0.0.0-5545",
+    "@docusaurus/plugin-content-docs": "0.0.0-5545",
+    "@docusaurus/plugin-content-pages": "0.0.0-5545",
+    "@docusaurus/utils": "0.0.0-5545",
+    "@docusaurus/utils-common": "0.0.0-5545",
     "@types/history": "^4.7.11",
     "@types/react": "*",
     "@types/react-router-config": "*",
@@ -48,8 +48,8 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/core": "0.0.0-5542",
-    "@docusaurus/types": "0.0.0-5542",
+    "@docusaurus/core": "0.0.0-5545",
+    "@docusaurus/types": "0.0.0-5545",
     "fs-extra": "^11.1.0",
     "lodash": "^4.17.21"
   },
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "58a3d23394f5e0101913369f54fbf70193e1d36a"
+  "gitHead": "862e4be6c3aea4d26fce77e3ef31f644ce386962"
 }

package/src/components/ThemedComponent/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {useColorMode} from '../../contexts/colorMode';
+
+import styles from './styles.module.css';
+
+const AllThemes = ['light', 'dark'] as const;
+
+type Theme = (typeof AllThemes)[number];
+
+type RenderFn = ({
+  theme,
+  className,
+}: {
+  theme: Theme;
+  className: string;
+}) => React.ReactNode;
+
+type Props = {
+  children: RenderFn;
+  className?: string;
+};
+
+/**
+ * Generic component to render anything themed in light/dark
+ * Note: it's preferable to use CSS for theming because this component
+ * will need to render all the variants during SSR to avoid a theme flash.
+ *
+ * Use this only when CSS customizations are not convenient or impossible.
+ * For example, rendering themed images or SVGs...
+ *
+ * @param className applied to all the variants
+ * @param children function to render a theme variant
+ * @constructor
+ */
+export default function ThemedComponent({
+  className,
+  children,
+}: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+  const {colorMode} = useColorMode();
+
+  function getThemesToRender(): Theme[] {
+    if (isBrowser) {
+      return colorMode === 'dark' ? ['dark'] : ['light'];
+    }
+    // We need to render both components on the server / hydration to avoid:
+    // - a flash of wrong theme before hydration
+    // - React hydration mismatches
+    // See https://github.com/facebook/docusaurus/pull/3730
+    return ['light', 'dark'];
+  }
+
+  return (
+    <>
+      {getThemesToRender().map((theme) => {
+        const themedElement = children({
+          theme,
+          className: clsx(
+            className,
+            styles.themedComponent,
+            styles[`themedComponent--${theme}`],
+          ),
+        });
+        return <React.Fragment key={theme}>{themedElement}</React.Fragment>;
+      })}
+    </>
+  );
+}

package/src/components/ThemedComponent/styles.module.css

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+.themedComponent {
+  display: none;
+}
+
+[data-theme='light'] .themedComponent--light {
+  display: initial;
+}
+
+[data-theme='dark'] .themedComponent--dark {
+  display: initial;
+}

package/src/index.ts

@@ -24,6 +24,8 @@ export {
   type ColorModeConfig,
 } from './utils/useThemeConfig';
 
+export {default as ThemedComponent} from './components/ThemedComponent';
+
 export {
   createStorageSlot,
   useStorageSlot,