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

Co-authored-by: sebastienlorber <[email protected]>

Author: homotechsual

website/src/css/custom.css

@@ -19,15 +19,15 @@
   --site-color-tooltip-background: #353738;
   --site-color-svg-icon-favorite: #e9669e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
-  --site-color-feedback-background: #fff;
+  --site-color-feedback-background: #f0f8ff;
   --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
   /* Use a darker color to ensure contrast, ideally we don't need important */
   --ifm-breadcrumb-color-active: var(--ifm-color-primary-darker) !important;
   --ifm-menu-color-active: var(--ifm-color-primary-darker) !important;
 }
 
 html[data-theme='dark'] {
-  --site-color-feedback-background: #f0f8ff;
+  --site-color-feedback-background: #2a2929;
   --site-color-favorite-background: #1d1e1e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
   --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);

website/src/plugins/featureRequests/FeatureRequestsPage.tsx

@@ -7,34 +7,51 @@
 
 import React, {useEffect} from 'react';
 import clsx from 'clsx';
+import {useColorMode} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 
 import cannyScript from './cannyScript';
 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>
   );
 }