feat: Implement dark mode for create index modal in early journey variant CLOUDP-313986 (#6972)

rubydong · waltertan12 · web-flow · commit 715ce44e4b3d · 2025-06-04T09:23:20.000-04:00
* Add dark mode styles for covered queries

* Add light mode style to code editor

* Add light mode styles for skeleton loader

* Fix subtitle color

* Fix border styling

---------

Co-authored-by: Walter Tan &lt;walter.tan@mongodb.com&gt;
diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx
@@ -11,6 +11,7 @@ import {
   fontFamilies,
   InfoSprinkle,
   Tooltip,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import React, { useState, useCallback, useEffect } from 'react';
 import {
@@ -41,6 +42,10 @@ const indexFieldsCalloutStyles = css({
   marginBottom: spacing[600],
 });
 
+const indexFieldsCalloutDarkStyles = css({
+  border: `1px solid ${palette.gray.base}`,
+});
+
 const codeEquivalentToggleLabelStyles = css({
   marginRight: spacing[100],
   fontWeight: 'normal',
@@ -51,13 +56,20 @@ const coveredQueriesHeaderContainerStyles = css({
 });
 
 const coveredQueriesCalloutStyles = css({
-  border: `1px solid ${palette.gray.light2}`,
-  background: palette.gray.light3,
   borderRadius: '12px',
   padding: spacing[600],
   marginBottom: spacing[600],
 });
 
+const lightModeCoveredQueriesCalloutStyles = css({
+  border: `1px solid ${palette.gray.light2}`,
+  background: palette.gray.light3,
+});
+
+const darkModeCoveredQueriesCalloutStyles = css({
+  border: `1px solid ${palette.gray.dark2}`,
+  background: palette.black,
+});
 const buttonContainerStyles = css({
   display: 'flex',
   justifyContent: 'right',
@@ -171,6 +183,7 @@ const IndexFlowSection = ({
   onErrorEncountered,
   onErrorCleared,
 }: IndexFlowSectionProps) => {
+  const darkMode = useDarkMode();
   const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
     useState(false);
   const [hasFieldChanges, setHasFieldChanges] = useState(false);
@@ -266,7 +279,12 @@ const IndexFlowSection = ({
           />
         </div>
       </div>
-      <div className={indexFieldsCalloutStyles}>
+      <div
+        className={cx(
+          indexFieldsCalloutStyles,
+          darkMode && indexFieldsCalloutDarkStyles
+        )}
+      >
         {isCodeEquivalentToggleChecked ? (
           <MDBCodeViewer
             dbName={dbName}
@@ -321,7 +339,14 @@ const IndexFlowSection = ({
             </InfoSprinkle>
           </div>
 
-          <div className={coveredQueriesCalloutStyles}>
+          <div
+            className={cx(
+              coveredQueriesCalloutStyles,
+              darkMode
+                ? darkModeCoveredQueriesCalloutStyles
+                : lightModeCoveredQueriesCalloutStyles
+            )}
+          >
             {/* Covered Queries */}
             <Body
               className={codeStyles}
diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx
@@ -6,6 +6,7 @@ import {
   cx,
   useFocusRing,
   ParagraphSkeleton,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { Document } from 'mongodb';
 import React, { useMemo, useCallback } from 'react';
@@ -62,7 +63,6 @@ const codeEditorContainerStyles = css({
 const codeEditorStyles = css({
   borderRadius: editorContainerRadius,
   '& .cm-editor': {
-    background: `${palette.white} !important`,
     borderRadius: editorContainerRadius,
   },
   '& .cm-content': {
@@ -71,12 +71,21 @@ const codeEditorStyles = css({
   },
 });
 
+const lightModeCodeEditorStyles = css({
+  '& .cm-editor': {
+    background: `${palette.white} !important`,
+  },
+});
+
 const indexSuggestionsLoaderStyles = css({
   marginBottom: spacing[600],
   padding: spacing[600],
+  borderRadius: editorContainerRadius,
+});
+
+const indexSuggestionsLoaderLightStyles = css({
   background: palette.gray.light3,
   border: `1px solid ${palette.gray.light2}`,
-  borderRadius: editorContainerRadius,
 });
 
 const insightStyles = css({
@@ -111,6 +120,7 @@ const QueryFlowSection = ({
   initialQuery: Document | null;
 }) => {
   const track = useTelemetry();
+  const darkMode = useDarkMode();
   const [inputQuery, setInputQuery] = React.useState(
     initialQuery ? JSON.stringify(initialQuery, null, 2) : ''
   );
@@ -205,7 +215,10 @@ const QueryFlowSection = ({
             onChangeText={(text) => handleQueryInputChange(text)}
             placeholder="Type a query: { field: 'value' }"
             completer={completer}
-            className={codeEditorStyles}
+            className={cx(
+              codeEditorStyles,
+              !darkMode && lightModeCodeEditorStyles
+            )}
           />
         </div>
 
@@ -230,7 +243,10 @@ const QueryFlowSection = ({
       {isFetchingIndexSuggestions ? (
         <ParagraphSkeleton
           data-testid="query-flow-section-code-loader"
-          className={indexSuggestionsLoaderStyles}
+          className={cx(
+            indexSuggestionsLoaderStyles,
+            !darkMode && indexSuggestionsLoaderLightStyles
+          )}
         />
       ) : (
         indexSuggestions && (
diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx
@@ -5,6 +5,7 @@ import {
   css,
   palette,
   Link,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 
@@ -13,18 +14,23 @@ const headerStyle = css({
   paddingBottom: 0,
 });
 
-const subtitleStyle = css({
+const subtitleLightStyle = css({
   color: palette.gray.dark1,
 });
 
+const subtitleDarkStyle = css({
+  color: palette.gray.light1,
+});
+
 const CreateIndexModalHeader = () => {
+  const darkMode = useDarkMode();
   return (
     <div className={headerStyle}>
       <H3 data-testid="create-index-modal-header-title">Create Index</H3>
 
       <Body
         data-testid="create-index-modal-header-subtitle"
-        className={subtitleStyle}
+        className={darkMode ? subtitleDarkStyle : subtitleLightStyle}
       >
         The best indexes for your application should consider a number of
         factors, such as your data model, and the queries you use most often. To
