fix(v2): make feedback page compatible with dark mode

website/src/css/custom.css

@@ -13,6 +13,11 @@
   --ifm-color-primary-light: rgb(70, 203, 174);
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-feedback-background: #fff;
+}
+
+html[data-theme='dark'] {
+  --ifm-color-feedback-background: #f0f8ff;
 }
 
 @media screen and (max-width: 996px) {
@@ -26,4 +31,3 @@
     --ifm-font-size-base: 17px;
   }
 }
-

website/src/pages/feedback/index.js

@@ -9,6 +9,8 @@ import React, {useEffect} from 'react';
 import Layout from '@theme/Layout';
 
 import canny from '../../scripts/canny';
+import classnames from 'classnames';
+import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
 
@@ -24,7 +26,14 @@ function Feedback() {
 
   return (
     <Layout permalink={'/feedback'} description={'Docusaurus 2 Feedback page'}>
-      <div className="container margin-vert--xl" data-canny />
+      <div
+        className={classnames(
+          'container',
+          'margin-vert--xl',
+          styles.feedbackBackground,
+        )}
+        data-canny
+      />
     </Layout>
   );
 }

website/src/pages/feedback/styles.module.css

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.feedbackBackground {
+  padding: var(--ifm-spacing-horizontal);
+  border-radius: 4px;
+  background: var(--ifm-color-feedback-background);
+}