Darktheme to stored procedures

less/forms.less

@@ -79,13 +79,13 @@
 
 .storageCapacityTitle {
   padding: @LargeSpace 0px;
-
 }
 .throughputStorageValue {
   font-size: 12px;
 }
 
-.estimatedCost, .largePartitionKeyEnabled {
+.estimatedCost,
+.largePartitionKeyEnabled {
   padding: @SmallSpace 0px @LargeSpace;
 }
 
@@ -109,18 +109,25 @@
 }
 
 .formTree {
-    border: 1px solid #969696;
+  border: 1px solid var(--colorNeutralStroke1);
-    color: #393939;
+  color: var(--colorNeutralForeground1);
+  background-color: var(--colorNeutralBackground1);
   padding: 0px 12px 1px 8px;
 }
 
 .formTree:hover {
-    border: 1px solid #969696;
+  border: 1px solid var(--colorNeutralStroke1Hover);
-    background-color: #e6f8fe;
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.formTree::placeholder {
+  color: var(--colorNeutralForeground2);
+  opacity: 1;
 }
 
 .formTree:active {
-    border: 1px solid #1ebbee;
+  border: 1px solid var(--colorNeutralStroke1Pressed);
+  background-color: var(--colorNeutralBackground1Pressed);
 }
 
 .scaleForm {
@@ -139,7 +146,6 @@
   margin-bottom: 4px;
 }
 
-
 .spUdfTriggerHeader {
   padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
 }
@@ -151,33 +157,33 @@
 
 .unselectedRadio {
   background-color: white;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: black !important;
 }
 
 .disabledRadio {
-    background-color: #A19F9D;
+  background-color: #a19f9d;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
 }
 
 .selectedRadio {
   background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
 }
 
 .selectedRadio:hover {
   background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
 }
 
 .selectedRadio:active {
   background-color: #0072c6;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
   border: 1px solid #0072c6;
@@ -204,8 +210,18 @@
 
 .trigger-field {
   width: 40%;
-    margin-top: 10px
+  margin-top: 10px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
+
+.trigger-field input::placeholder {
+  color: var(--colorNeutralForeground3);
+  opacity: 1;
+}
+
 .trigger-form {
-    padding: 10px 30px 10px 30px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  padding: 10px 30px;
 }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
 
 export type editorType = "indexPolicy" | "computedProperties";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: 'var(--colorNeutralForeground1)' } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' },
+  root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
   text: { fontSize: 14 },
 };
 
@@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15,  color: 'var(--colorNeutralForeground1)' }}>How we calculate this</Text>
+      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+        How we calculate this
+      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>
+      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -290,7 +292,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
         Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
         There are three options you can choose from to proceed:
       </Text>
-      <ol style={{ fontSize: 14, color: 'var(--colorNeutralForeground1)', marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
         <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
         {instantMaximumThroughput < maximumThroughput && (
           <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -507,17 +509,24 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
     height: 25,
     width: 300,
     borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    backgroundColor: "var(--colorNeutralBackground3)",
     selectors: {
       ":disabled": {
-        backgroundColor:'var(--colorNeutralBackground1)',
+        backgroundColor: "var(--colorNeutralBackground1)",
         borderColor: StyleConstants.BaseMediumHigh,
       },
+      "input:disabled": {
+        backgroundColor: "var(--colorNeutralBackground3)",
+      },
+    },
+    field: {
+      color: "var(--colorNeutralForeground1)",
     },
   },
   subComponentStyles: {
     label: {
       root: {
-        color: 'var(--colorNeutralForeground1)'
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -529,7 +538,8 @@ export const getChoiceGroupStyles = (
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
   label: {
-    color: 'var(--colorNeutralForeground1)', },
+    color: "var(--colorNeutralForeground1)",
+  },
   flexContainer: [
     {
       selectors: {
@@ -544,7 +554,7 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
-          color: 'var(--colorNeutralForeground1)'
+          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@fluentui/react-components";
+import { Link, tokens } from "@fluentui/react-components";
 import QueryError from "Common/QueryError";
 import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
 import { MessageBanner } from "Explorer/Controls/MessageBanner";
@@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
         <p>
           <img src={RunQuery} aria-hidden="true" />
         </p>
-        <p>Execute a query to see the results</p>
+        <p style={{ color: tokens.colorNeutralForeground1 }}>Execute a query to see the results</p>
       </div>
     </div>
   );

src/Explorer/Tabs/TriggerTabContent.tsx

@@ -1,5 +1,6 @@
 import { TriggerDefinition } from "@azure/cosmos";
-import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react";
+import { getTheme, IDropdownOption, IDropdownStyles, Label, TextField } from "@fluentui/react";
+import { Dropdown } from "@fluentui/react/lib/Dropdown";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React, { Component } from "react";
@@ -17,11 +18,46 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { EditorReact } from "../Controls/Editor/EditorReact";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import TriggerTab from "./TriggerTab";
-
 const triggerTypeOptions: IDropdownOption[] = [
   { key: "Pre", text: "Pre" },
   { key: "Post", text: "Post" },
 ];
+const theme = getTheme();
+const dropdownStyles: Partial<IDropdownStyles> = {
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdown: {
+    width: "100%",
+  },
+  title: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdownItem: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdownItems: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdownItemSelected: {
+    backgroundColor: "var(--colorBrandBackgroundSelected)",
+    color: "var(--colorNeutralForegroundOnBrand)",
+    selectors: {
+      "&:before": {
+        content: '""',
+        position: "absolute",
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: "4px",
+        background: "var(--colorBrandBackground)",
+      },
+    },
+  },
+};
 
 const triggerOperationOptions: IDropdownOption[] = [
   { key: "All", text: "All" },
@@ -304,6 +340,23 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           value={triggerId}
           readOnly={!isIdEditable}
           onChange={this.handleTriggerIdChange}
+          styles={{
+            root: { width: "40%", marginTop: "10px" },
+            fieldGroup: {
+              backgroundColor: "var(--colorNeutralBackground1)",
+              border: "1px solid var(--colorNeutralStroke1)",
+            },
+            field: {
+              color: "var(--colorNeutralForeground1)",
+            },
+            subComponentStyles: {
+              label: {
+                root: {
+                  color: "var(--colorNeutralForeground1)",
+                },
+              },
+            },
+          }}
         />
         <Dropdown
           placeholder="Trigger Type"
@@ -312,6 +365,42 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           selectedKey={triggerType}
           className="trigger-field"
           onChange={(event, selectedKey) => this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")}
+          styles={{
+            root: { width: "40%", marginTop: "10px" },
+            // dropdown: {
+            //   backgroundColor: "var(--colorNeutralBackground1)",
+            //   color: "var(--colorNeutralForeground1)",
+            //   border: "1px solid var(--colorNeutralStroke1)",
+            // },
+
+            // dropdown: {
+            //   backgroundColor: theme.palette.neutralLighterAlt, // dynamic background
+            //   borderColor: theme.palette.neutralSecondary,
+            // },
+            // title: {
+            //   backgroundColor: theme.palette.neutralLighterAlt,
+            //   color: theme.semanticColors.bodyText, // selected value color
+            // },
+
+            dropdown: {
+              backgroundColor: theme.semanticColors.bodyBackground,
+              borderColor: theme.semanticColors.bodyDivider,
+            },
+            title: {
+              backgroundColor: theme.semanticColors.bodyBackground,
+              color: theme.semanticColors.bodyText,
+            },
+            callout: {
+              backgroundColor: theme.semanticColors.bodyBackground,
+            },
+            subComponentStyles: {
+              label: {
+                root: {
+                  color: "var(--colorNeutralForeground1)",
+                },
+              },
+            },
+          }}
         />
         <Dropdown
           placeholder="Trigger Operation"
@@ -322,6 +411,26 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           onChange={(event, selectedKey) =>
             this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation")
           }
+          styles={dropdownStyles}
+
+          // styles={{
+          //   root: { width: "40%", marginTop: "10px" },
+          //   dropdown: {
+          //     backgroundColor: theme.palette.neutralLighterAlt, // dynamic background
+          //     borderColor: theme.palette.neutralSecondary,
+          //   },
+          //   title: {
+          //     backgroundColor: theme.palette.neutralLighterAlt,
+          //     color: theme.semanticColors.bodyText, // selected value color
+          //   },
+          //   subComponentStyles: {
+          //     label: {
+          //       root: {
+          //         color: "var(--colorNeutralForeground1)",
+          //       },
+          //     },
+          //   },
+          // }}
         />
         <Label className="trigger-field">Trigger Body</Label>
         <EditorReact

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -1,7 +1,9 @@
 import { UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { Label, TextField } from "@fluentui/react";
+import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
+import { isDarkMode } from "hooks/useTheme";
 import React, { Component } from "react";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
@@ -16,7 +18,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { EditorReact } from "../Controls/Editor/EditorReact";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import UserDefinedFunctionTab from "./UserDefinedFunctionTab";
-
 interface IUserDefinedFunctionTabContentState {
   udfId: string;
   udfBody: string;
@@ -258,8 +259,10 @@ export default class UserDefinedFunctionTabContent extends Component<
 
   render(): JSX.Element {
     const { udfId, udfBody, isUdfIdEditable } = this.state;
+    const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
     return (
       <div className="tab-pane flexContainer trigger-form" role="tabpanel">
+        <FluentProvider theme={currentTheme}>
           <TextField
             className="trigger-field"
             label="User Defined Function Id"
@@ -274,7 +277,28 @@ export default class UserDefinedFunctionTabContent extends Component<
             size={40}
             value={udfId}
             onChange={this.handleUdfIdChange}
-        />
+            styles={{
+              root: {
+                width: "40%",
+                marginTop: "10px",
+              },
+              fieldGroup: {
+                backgroundColor: "var(--colorNeutralBackground1)",
+                border: "1px solid var(--colorNeutralStroke1)",
+              },
+              field: {
+                color: "var(--colorNeutralForeground2)",
+              },
+              subComponentStyles: {
+                label: {
+                  root: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+            }}
+          />{" "}
+        </FluentProvider>
         <Label className="trigger-field">User Defined Function Body</Label>
         <EditorReact
           language={"javascript"}

src/hooks/useTheme.tsx

@@ -60,6 +60,6 @@ export const useTheme = () => {
   }, [targetDocument, context]);
 
   return {
-    isDarkMode
+    isDarkMode,
   };
 };