Dark theme applied to monaco editor

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,4 +1,5 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { monacoTheme } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -211,7 +212,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       ariaLabel: this.props.ariaLabel,
       fontSize: this.props.fontSize || 12,
       automaticLayout: true,
-      theme: this.props.theme,
+      theme: monacoTheme,
       wordWrap: this.props.wordWrap || "off",
       lineNumbers: this.props.lineNumbers || "off",
       lineNumbersMinChars: this.props.lineNumbersMinChars,

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -1,42 +1,42 @@
-// @import "../../../../less/Common/Constants";
+@import "../../../../less/Common/Constants";
 
-// .settingsV2MainContainer {
-//   height: 100%;
-//   overflow-y: auto;
-//   width: 100%;
-//   background-color: var(--colorNeutralBackground1);
-//   color: var(--colorNeutralForeground1);
-// }
+.settingsV2MainContainer {
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
 
-// .settingsV2ToolTip {
-//   padding: 10px;
-//   font: 12px @DataExplorerFont;
-//   max-width: 300px;
-// }
+.settingsV2ToolTip {
+  padding: 10px;
+  font: 12px @DataExplorerFont;
+  max-width: 300px;
+}
 
-// .autoPilotSelector span {
-//   height: 25px;
-//   font: 14px @DataExplorerFont;
-// }
+.autoPilotSelector span {
+  height: 25px;
+  font: 14px @DataExplorerFont;
+}
 
-// .settingsV2TabsContainer {
-//   padding: @LargeSpace @LargeSpace 30px @LargeSpace;
-//   height: 100%;
-//   overflow-y: auto;
-//   width: 100%;
-//   font-family: @DataExplorerFont;
-//   background-color: var(--colorNeutralBackground1);
-//   color: var(--colorNeutralForeground1);
-// }
+.settingsV2TabsContainer {
+  padding: @LargeSpace @LargeSpace 30px @LargeSpace;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+  font-family: @DataExplorerFont;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
 
-// .settingsV2Editor {
-//   width: 100%;
-//   height: 60vh;
-// }
+.settingsV2Editor {
+  width: 100%;
+  height: 60vh;
+}
 
-// .settingsV2EditorSpinner {
-//   position: absolute;
-//   top: 50%;
-//   left: 50%;
-//   transform: translate(-50%, -50%);
-// }
+.settingsV2EditorSpinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx

@@ -3,9 +3,9 @@ import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { monacoTheme } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -86,6 +86,7 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
+      theme:monacoTheme,
     });
     if (this.computedPropertiesEditor) {
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -1,4 +1,5 @@
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
@@ -98,6 +98,7 @@ export class IndexingPolicyComponent extends React.Component<
         language: "json",
         readOnly: isIndexTransforming(this.props.indexTransformationProgress),
         ariaLabel: "Indexing Policy",
+        theme: monacoTheme,
       });
       if (this.indexingPolicyEditor) {
         const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
@@ -106,6 +107,51 @@ export class IndexingPolicyComponent extends React.Component<
       }
     }
   }
+//   private async createIndexingPolicyEditor(): Promise<void> {
+//   const isDarkMode = true;
+//   const monacoThemeName = "fluent-theme";
+
+//   if (!this.indexingPolicyDiv.current) return;
+
+//   const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+//   const monaco = await loadMonaco();
+
+//   // Safely get Fluent UI theme colors
+//   const bodyStyles = getComputedStyle(document.body);
+//   const backgroundColor = bodyStyles.getPropertyValue("--colorNeutralBackground1").trim() || "#1b1a19";
+//   const foregroundColor = bodyStyles.getPropertyValue("--colorNeutralForeground1").trim() || "#ffffff";
+
+//   // Define Monaco theme using Fluent UI colors
+//   monaco.editor.defineTheme(monacoThemeName, {
+//     base: isDarkMode ? "vs-dark" : "vs",
+//     inherit: true,
+//     rules: [],
+//     colors: {
+//       "editor.background": backgroundColor,
+//       "editor.foreground": foregroundColor,
+//       "editorCursor.foreground": "#ffcc00",
+//       "editorLineNumber.foreground": "#aaaaaa",
+//       "editor.selectionBackground": "#666666",
+//       "editor.lineHighlightBackground": "#333333"
+//     }
+//   });
+
+//   // Create the editor with the custom theme
+//   this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+//     value,
+//     language: "json",
+//     readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+//     ariaLabel: "Indexing Policy",
+//     theme: monacoThemeName
+//   });
+
+//   if (this.indexingPolicyEditor) {
+//     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+//     indexingPolicyEditorModel?.onDidChangeContent(this.onEditorContentChange.bind(this));
+//     this.props.logIndexingPolicySuccessMessage();
+//   }
+// }
+
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -23,6 +23,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { TabsState, useTabs } from "hooks/useTabs";
+import { monacoTheme } from "hooks/useTheme";
 import React, { Fragment, createRef } from "react";
 import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
@@ -53,7 +54,6 @@ import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPa
 import { SaveQueryPane } from "../../Panes/SaveQueryPane/SaveQueryPane";
 import TabsBase from "../TabsBase";
 import "./QueryTabComponent.less";
-
 enum ToggleState {
   Result,
   QueryMetrics,
@@ -756,6 +756,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                 wordWrap={"on"}
                 ariaLabel={"Editing Query"}
                 lineNumbers={"on"}
+                theme={monacoTheme}
                 onContentChanged={(newContent: string) => this.onChangeContent(newContent)}
                 onContentSelected={(selectedContent: string, selection: monaco.Selection) =>
                   this.onSelectedContent(selectedContent, selection)

src/Main.tsx

@@ -63,7 +63,7 @@ import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
-
+import { isDarkMode } from "./hooks/useTheme";
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
 
@@ -153,7 +153,6 @@ const App = (): JSX.Element => {
 
 const Root: React.FC = () => {
   // Force dark theme
-  const isDarkMode = true;
   const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
   
   // Apply theme to body for Fluent UI v8 components

src/hooks/useTheme.tsx

@@ -17,6 +17,8 @@ export const CustomThemeProvider: FC<ThemeProviderProps> = ({ children, theme })
   const isDarkMode = theme === "Dark";
   return <ThemeContext.Provider value={{ theme, isDarkMode }}>{children}</ThemeContext.Provider>;
 };
+export const isDarkMode  = true;
+export const monacoTheme = isDarkMode ? "vs-dark" : "vs";
 
 export const useTheme = () => {
   const { targetDocument } = useFluent();