Support dark + light mode in the playground (#16388)

###### Microsoft Reviewers: [Open in
CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/Azure/bicep/pull/16388)

Author: anthony-c-martin

src/playground/src/components/BicepEditor.tsx

@@ -14,7 +14,6 @@ interface Props {
 
 const editorOptions: editor.IStandaloneEditorConstructionOptions = {
   language: 'bicep',
-  theme: 'vs-dark',
   scrollBeyondLastLine: false,
   automaticLayout: true,
   minimap: {

src/playground/src/components/CodeEditor.tsx

@@ -3,6 +3,7 @@
 import * as monaco from 'monaco-editor';
 import React, { createRef, useEffect, useState } from 'react';
 import { DotnetInterop } from '../utils/interop';
+import { useColorMode } from '../utils/colorModes';
 
 interface Props {
   options: monaco.editor.IStandaloneEditorConstructionOptions,
@@ -14,10 +15,15 @@ export const CodeEditor : React.FC<Props> = (props) => {
   const { options, initialContent, onContentChange } = props;
   const editorRef = createRef<HTMLDivElement>();
   const [model, setModel] = useState<monaco.editor.ITextModel>();
+  const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
+  const colorMode = useColorMode();
 
   useEffect(() => {
     async function initializeEditor() {
-      const editor = monaco.editor.create(editorRef.current!, options);
+      const editor = monaco.editor.create(editorRef.current!, {
+        ...options,
+        theme: colorMode === 'dark' ? 'vs-dark' : 'vs',
+      });
       const model = editor.getModel()!;
 
       editor.onDidChangeModelContent(async () => {
@@ -28,6 +34,7 @@ export const CodeEditor : React.FC<Props> = (props) => {
         }
       });
 
+      setEditor(editor);
       setModel(model);
     }
 
@@ -38,6 +45,13 @@ export const CodeEditor : React.FC<Props> = (props) => {
     model?.setValue(initialContent);
   }, [initialContent, model]);
 
+  useEffect(() => {
+    editor?.updateOptions({
+      ...options,
+      theme: colorMode === 'dark' ? 'vs-dark' : 'vs',
+    });
+  }, [colorMode]);
+
   return (
     <div ref={editorRef} style={{height: '100%', width: '100%'}} />
   );

src/playground/src/components/JsonEditor.tsx

@@ -10,7 +10,6 @@ interface JsonEditorProps {
 
 const editorOptions: editor.IStandaloneEditorConstructionOptions = {
   language: 'json',
-  theme: 'vs-dark',
   scrollBeyondLastLine: false,
   automaticLayout: true,
   minimap: {

src/playground/src/index.css

@@ -3,7 +3,6 @@ html, body {
   border: 0;
   margin: 0;
   overflow: hidden;
-  background-color: #1e1e1e;
 }
 
 .app-container {

src/playground/src/main.tsx

@@ -8,7 +8,12 @@ import { aiKey } from '../package.json';
 import './index.css';
 import { initializeInterop } from './utils/interop';
 import { App } from './App';
+import { getColorMode } from './utils/colorModes';
 
+const updateTheme = () => document.documentElement.setAttribute('data-bs-theme', getColorMode());
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
+window.addEventListener('DOMContentLoaded', updateTheme);
 
 const root = createRoot(document.getElementById('root')!);
 root.render(

src/playground/src/utils/colorModes.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { useEffect, useState } from "react";
+
+type colorMode = "dark" | "light";
+
+export function getColorMode(): colorMode {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+export function useColorMode() {
+  const [colorMode, setColorMode] = useState<colorMode>(getColorMode());
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateColorMode = () => setColorMode(getColorMode());
+
+    mediaQuery.addEventListener("change", updateColorMode);
+    return () => {
+      mediaQuery.removeEventListener("change", updateColorMode);
+    };
+  }, []);
+
+  return colorMode;
+}