fix(connection-form): dark mode support for new connection informatio…

…n cards COMPASS-7753 (#5597)

* chore: fix black theme

* chore: linting

packages/connection-form/src/components/form-help/form-help.tsx

@@ -5,7 +5,9 @@ import {
   Link,
   spacing,
   css,
+  cx,
   palette,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 
 const formHelpContainerStyles = css({
@@ -16,14 +18,14 @@ const formHelpContainerStyles = css({
 });
 
 const sectionContainerStyles = css({
-  backgroundColor: palette.blue.light3,
+  backgroundColor: 'var(--theme-background-color)',
+  border: `1px solid var(--theme-border-color)`,
   margin: 0,
   marginBottom: spacing[3],
   padding: spacing[4],
   paddingTop: spacing[3],
   paddingBottom: spacing[3],
   borderRadius: spacing[2],
-  border: `1px solid ${palette.blue.light2}`,
 });
 
 const titleStyles = css({
@@ -34,9 +36,22 @@ const descriptionStyles = css({
   marginTop: spacing[2],
 });
 
+const sectionDarkModeStyles = css({
+  '--theme-background-color': palette.blue.dark3,
+  '--theme-border-color': palette.blue.dark2,
+});
+
+const sectionLightModeStyles = css({
+  '--theme-background-color': palette.blue.light3,
+  '--theme-border-color': palette.blue.light2,
+});
+
 function FormHelp(): React.ReactElement {
+  const darkMode = useDarkMode();
+  const themeStyles = darkMode ? sectionDarkModeStyles : sectionLightModeStyles;
+
   return (
-    <div className={formHelpContainerStyles}>
+    <div className={cx(formHelpContainerStyles, themeStyles)}>
       <div className={sectionContainerStyles}>
         <Subtitle className={titleStyles}>
           How do I find my connection string in Atlas?