From 096a7b5f238b21f8101cbb7c05dc11b33211cb05 Mon Sep 17 00:00:00 2001
From: Mikey O'Toole <mikey@homotechsual.dev>
Date: Thu, 6 Apr 2023 14:00:27 +0100
Subject: [PATCH] fix: add auto theme switch to the Canny widget (#8846)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
---
 website/src/css/custom.css                    |  4 +-
 .../featureRequests/FeatureRequestsPage.tsx   | 37 ++++++++++++++-----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 8a48acc891..11125c5cad 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -19,7 +19,7 @@
   --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;
@@ -27,7 +27,7 @@
 }
 
 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%);
diff --git a/website/src/plugins/featureRequests/FeatureRequestsPage.tsx b/website/src/plugins/featureRequests/FeatureRequestsPage.tsx
index f5d836130b..0ff26e826b 100644
--- a/website/src/plugins/featureRequests/FeatureRequestsPage.tsx
+++ b/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>
   );
 }