From a576533e4cc6bd680881e8191917d266e0dde115 Mon Sep 17 00:00:00 2001 From: Archie Agarwal Date: Thu, 10 Jul 2025 18:34:37 +0530 Subject: [PATCH] Dark theme applied to monaco editor --- src/Explorer/Controls/Editor/EditorReact.tsx | 3 +- .../Controls/Settings/SettingsComponent.less | 72 +++++++++---------- .../ComputedPropertiesComponent.tsx | 3 +- .../IndexingPolicyComponent.tsx | 48 ++++++++++++- .../Tabs/QueryTab/QueryTabComponent.tsx | 3 +- src/Main.tsx | 3 +- src/hooks/useTheme.tsx | 2 + 7 files changed, 92 insertions(+), 42 deletions(-) diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx index 9ca544631..f98a95147 100644 --- a/src/Explorer/Controls/Editor/EditorReact.tsx +++ b/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 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 { +// 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(); diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx index 821aebfe5..640f04b48 100644 --- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx +++ b/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 this.onChangeContent(newContent)} onContentSelected={(selectedContent: string, selection: monaco.Selection) => this.onSelectedContent(selectedContent, selection) diff --git a/src/Main.tsx b/src/Main.tsx index 313acc2f5..38ee345c1 100644 --- a/src/Main.tsx +++ b/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 diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx index 075c83cf3..c809510e2 100644 --- a/src/hooks/useTheme.tsx +++ b/src/hooks/useTheme.tsx @@ -17,6 +17,8 @@ export const CustomThemeProvider: FC = ({ children, theme }) const isDarkMode = theme === "Dark"; return {children}; }; +export const isDarkMode = true; +export const monacoTheme = isDarkMode ? "vs-dark" : "vs"; export const useTheme = () => { const { targetDocument } = useFluent();