fixing theme loading somewhat?

client/src/App.tsx

@@ -38,15 +38,16 @@ function parseArgs(): UrlArgs {
   return Object.fromEntries(_args)
 }
 
+const isBrowserDefaultDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+
 function App() {
   const codeviewRef = useRef<HTMLDivElement>(null)
   const infoviewRef = useRef<HTMLDivElement>(null)
   const [dragging, setDragging] = useState<boolean | null>(false)
 
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>()
 
-  const [preferences, setPreferences] = useState<IPreferencesContext>(defaultSettings)
-
+  const [preferences, setPreferences] = useState<IPreferencesContext>({...defaultSettings, loaded: false})
 
   /* Option to change themes */
   // const isBrowserDefaultDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -67,13 +68,17 @@ function App() {
   /** Load preferences from store in the beginning */
   useEffect(() => {
     console.debug('Preferences: Loading.')
+
+    // only load them once
+    if (preferences.loaded) { return }
+
     let saveInLocalStore = false;
     let newPreferences: any = { ...preferences } // TODO: need `any` instead of `IPreferencesContext` here to satisfy ts
     for (const [key, value] of Object.entries(preferences)) {
       let storedValue = window.localStorage.getItem(key)
       if (storedValue) {
         saveInLocalStore = true
-        console.debug(`Found stored config for ${key}: ${storedValue}`)
+        console.debug(`Found stored value for ${key}: ${storedValue}`)
         if (typeof value === 'string') {
           newPreferences[key] = storedValue
         } else if (typeof value === 'boolean') {
@@ -83,15 +88,29 @@ function App() {
           // other values aren't implemented yet.
           console.error(`Preferences contain a value of unsupported type: ${typeof value}`)
         }
+      } else {
+        // no stored preferences
+        if (key == 'theme') {
+          if (isBrowserDefaultDark()) {
+            console.debug("Preferences: Set dark theme.")
+            newPreferences['theme'] = 'Visual Studio Dark'
+          } else {
+            console.debug("Preferences: Set light theme.")
+            newPreferences['theme'] = 'Visual Studio Light'
+          }
+        }
       }
-      newPreferences['saveInLocalStore'] = saveInLocalStore
-      setPreferences(newPreferences)
     }
+    newPreferences['saveInLocalStore'] = saveInLocalStore
+    newPreferences['loaded'] = true
+    setPreferences(newPreferences)
   }, [])
 
   /** Use the window witdh to switch between mobile/desktop layout */
   useEffect(() => {
-    console.debug("Preferences: Set mobile.")
+    // Wait for preferences to be loaded
+    if (!preferences.loaded) { return }
+
     const _mobile = width < 800
     if (!preferences.saveInLocalStore && _mobile !== preferences.mobile) {
       setPreferences({ ...preferences, mobile: _mobile })
@@ -100,6 +119,12 @@ function App() {
 
   // Setting up the editor and infoview
   useEffect(() => {
+    // Wait for preferences to be loaded
+    if (!preferences.loaded) { return }
+
+    console.debug('Restarting Editor!')
+    console.debug(preferences)
+
     const socketUrl = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/websocket" + "/" + project
     console.log(`socket url: ${socketUrl}`)
 
@@ -141,10 +166,6 @@ function App() {
     }
   }, [project, preferences])
 
-  useEffect(() => {
-    console.log(`Settings changed`)
-    console.log(preferences)
-  }, [preferences])
   // Read the URL once
   useEffect(() => {
     if (!editor) { return }

client/src/Popups/Settings.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useContext } from 'react'
-// import settings from '../config/settings';
 import Switch from '@mui/material/Switch';
 import lean4webConfig from '../config/config'
 import { Popup } from '../Navigation';
@@ -17,14 +16,17 @@ export interface IPreferencesContext {
   theme: string,
   // lean4
   abbreviationCharacter: string
+
+  // This isn't present in the settings; we use it for a hack to prevent multiple loading/saving
+  loaded: boolean
 }
 
 /** The context holding the preferences */
 export const PreferencesContext = React.createContext<{
   preferences: IPreferencesContext,
   setPreferences: React.Dispatch<React.SetStateAction<IPreferencesContext>>
 }>({
-  preferences: defaultSettings,
+  preferences: {...defaultSettings, loaded: false},
   setPreferences: () => {}
 })
 
@@ -101,13 +103,14 @@ const SettingsPopup: React.FC<{
             value={preferences.theme}
             onChange={(ev) => {modifyPreferences("theme", ev.target.value)}}
             >
-          <option value="Default Light+">light+</option>
+          <option value="Visual Studio Light">visual studio light</option>
+          <option value="Visual Studio Dark">visual studio dark</option>
+          {/* <option value="Default Light+">light+</option> */}
+          {/* <option value="Default Dark+">dark+</option> */}
           {/* <option value="Default Light Modern">light modern</option> */}
-          <option value="Default Dark+">dark+</option>
           <option value="Default High Contrast">high contrast</option>
           <option value="Cobalt">cobalt</option>
-          {/* <option value="Visual Studio Light">visual studio light</option> */}
-          {/* <option value="Visual Studio Dark">visual studio dark</option> */}
+
         </select>
       </p>
       <p>

client/src/config/settings.ts

@@ -1,18 +1,18 @@
 /* This file contains the default settings. */
 
 const isBrowserDefaultDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches
-
+  
 const settings = {
   'saveInLocalStore': false,
   'inputModeEnabled': true,
   'abbreviationCharacter': '\\',
   'languages': ['lean4', 'lean'],
   'inputModeCustomTranslations': {},
   'eagerReplacementEnabled': true,
-  'mobile': false, // value here irrelevant, will be overwritten with `width < 800` in Settings.tsx
   'wordWrap': true,
   'acceptSuggestionOnEnter': false,
-  'theme': isBrowserDefaultDark() ? 'Default Dark+' : 'Default Light+',
+  'mobile': false, // value irrelevant as it will be overwritten with `width < 800` in App.tsx
+  'theme': 'Visual Studio Light', // irrelevant as it will be overwritten in App.tsx
 }
 
 export default settings

client/src/css/index.css

@@ -12,7 +12,7 @@ body {
 
 @media (prefers-color-scheme: dark) {
   body {
-    background: #000;
+    background: rgb(30, 30, 30);
     color: #fff;
   }
 }