fix: add auto theme switch to the Canny widget (#8846)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

website/src/plugins/featureRequests/FeatureRequestsPage.tsx

@@ -7,6 +7,7 @@
 
 import React, {useEffect} from 'react';
 import clsx from 'clsx';
+import {useColorMode} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 
 import cannyScript from './cannyScript';
@@ -14,27 +15,43 @@ import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
 
-export default function FeatureRequests({
-  basePath,
-}: {
-  basePath: string;
-}): JSX.Element {
+function useCannyTheme() {
+  const {colorMode} = useColorMode();
+  return colorMode === 'light' ? 'light' : 'dark';
+}
+
+function CannyWidget({basePath}: {basePath: string}) {
   useEffect(() => {
     cannyScript();
+  }, []);
+
+  const theme = useCannyTheme();
+  useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const {Canny} = window as any;
     Canny('render', {
       boardToken: BOARD_TOKEN,
       basePath,
+      theme,
     });
-  }, [basePath]);
+  }, [basePath, theme]);
+  return (
+    <main
+      key={theme} // widget needs a full reset: unable to update the theme
+      className={clsx('container', 'margin-vert--lg', styles.main)}
+      data-canny
+    />
+  );
+}
 
+export default function FeatureRequests({
+  basePath,
+}: {
+  basePath: string;
+}): JSX.Element {
   return (
     <Layout title="Feedback" description="Docusaurus 2 Feature Requests page">
-      <main
-        className={clsx('container', 'margin-vert--lg', styles.main)}
-        data-canny
-      />
+      <CannyWidget basePath={basePath} />
     </Layout>
   );
 }