Implemented light-dark mode theme support.

public/index.html

@@ -10,7 +10,7 @@
     <link rel="apple-touch-icon" href="logo192.png">
     <!-- https://developers.google.com/web/fundamentals/web-app-manifest/ -->
     <link rel="manifest" href="manifest.json">
-    <meta name="theme-color" content="#000000">
+    <meta name="theme-color" content="#1e1e1e">
 
     <link rel="prefetch" href="openscad.wasm">
     <link rel="prefetch" href="openscad-worker.js">
@@ -52,6 +52,8 @@
 
         height: 100vh;
         height: var(--app-height);
+        background-color: var(--app-bg-color, #1e1e1e);
+        color: var(--app-text-color, rgba(255, 255, 255, 0.87));
       }
 
       .p-tabmenu-nav {
@@ -61,9 +63,6 @@
       .p-fieldset .p-fieldset-content {
         padding: 0 !important;
       }
-      .p-fieldset-legend {
-        background-color: rgba(255,255,255,0.4) !important;
-      }
 
       .p-fieldset-legend,
       .p-fieldset-content {
@@ -79,10 +78,6 @@
         bottom: 0;
       }
 
-      .monaco-editor,
-      .openscad-editor {
-        background-color: rgba(255,255,255,0.5) !important;
-      }
       textarea.openscad-editor {
         font-family: "Droid Sans Mono", "monospace", monospace;
         font-weight: normal;
@@ -91,11 +86,6 @@
         line-height: 22px;
         letter-spacing: 0px;
       }
-      .overflow-guard,
-      .monaco-scrollable-element,
-      .monaco-editor-background {
-        background-color: transparent !important;
-      }
 
       .opacity-animated {
         transition: opacity 0.5s ease-in-out;

src/components/App.tsx

@@ -18,6 +18,32 @@ export function App({initialState, statePersister, fs}: {initialState: State, st
   const model = new Model(fs, state, setState, statePersister);
   useEffect(() => model.init());
 
+  useEffect(() => {
+    const theme = state.view.theme;
+    const themeCssId = 'primereact-theme-css';
+
+    const existingTheme = document.getElementById(themeCssId);
+    if (existingTheme) {
+      existingTheme.remove();
+    }
+
+    const link = document.createElement('link');
+    link.id = themeCssId;
+    link.rel = 'stylesheet';
+    link.href = `primereact/resources/themes/lara-${theme}-indigo/theme.css`;
+    document.head.appendChild(link);
+
+    const rootStyle = document.documentElement.style;
+    if (theme === 'light') {
+      rootStyle.setProperty('--app-bg-color', '#ffffff');
+      rootStyle.setProperty('--app-text-color', '#333333');
+    } else {
+      rootStyle.setProperty('--app-bg-color', '#1e1e1e');
+      rootStyle.setProperty('--app-text-color', 'rgba(255, 255, 255, 0.87)');
+    }
+
+  }, [state.view.theme]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'F5') {

src/components/EditorPanel.tsx

@@ -1,6 +1,6 @@
 // Portions of this file are Copyright 2021 Google LLC, and licensed under GPL2+. See COPYING.
 
-import React, { CSSProperties, useContext, useRef, useState } from 'react';
+import React, { CSSProperties, useContext, useEffect, useRef, useState } from 'react';
 import Editor, { loader, Monaco } from '@monaco-editor/react';
 import openscadEditorOptions from '../language/openscad-editor-options.ts';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
@@ -37,6 +37,20 @@ export default function EditorPanel({className, style}: {className?: string, sty
 
   const [editor, setEditor] = useState(null as monaco.editor.IStandaloneCodeEditor | null)
 
+  useEffect(() => {
+    if (editor && monacoInstance) {
+      const theme = state.view.theme === 'dark' ? 'vs-dark' : 'vs';
+      monacoInstance.editor.setTheme(theme);
+    }
+  }, [state.view.theme, editor, monacoInstance]);
+
+  useEffect(() => {
+    if (monacoInstance && !editor) {
+      const theme = state.view.theme === 'dark' ? 'vs-dark' : 'vs';
+      monacoInstance.editor.setTheme(theme);
+    }
+  }, [state.view.theme, monacoInstance, editor]);
+
   if (editor) {
     const checkerRun = state.lastCheckerRun;
     const editorModel = editor.getModel();
@@ -48,6 +62,9 @@ export default function EditorPanel({className, style}: {className?: string, sty
   }
 
   const onMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
+    const theme = state.view.theme === 'dark' ? 'vs-dark' : 'vs';
+    monacoInstance?.editor.setTheme(theme);
+
     editor.addAction({
       id: "openscad-render",
       label: "Render OpenSCAD",
@@ -86,7 +103,7 @@ export default function EditorPanel({className, style}: {className?: string, sty
         margin: '5px',
       }}>
 
-        <Menu model={[
+        <Menu key={`editor-menu-${state.view.theme}`} model={[
           {
             label: "New project",
             icon: 'pi pi-plus-circle',

src/components/FilePicker.tsx

@@ -105,7 +105,8 @@ export default function FilePicker({className, style}: {className?: string, styl
   }
 
   return (
-      <TreeSelect 
+      <TreeSelect
+          key={`file-picker-${state.view.theme}`} // Force re-render on theme change
           className={className}
           title='OpenSCAD Playground Files'
           value={state.params.activePath}

src/components/SettingsMenu.tsx

@@ -16,7 +16,7 @@ export default function SettingsMenu({className, style}: {className?: string, st
   const settingsMenu = useRef<Menu>(null);
   return (
     <>
-      <Menu model={[
+      <Menu key={`settings-menu-${state.view.theme}`} model={[
         {
           label: state.view.layout.mode === 'multi'
             ? 'Switch to single panel mode'
@@ -40,6 +40,21 @@ export default function SettingsMenu({className, style}: {className?: string, st
           // disabled: true,
           command: () => model.mutate(s => s.view.lineNumbers = !s.view.lineNumbers)
         },
+        {
+          label: state.view.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode',
+          icon: state.view.theme === 'dark' ? 'pi pi-sun' : 'pi pi-moon',
+          command: () => {
+            const newTheme = state.view.theme === 'dark' ? 'light' : 'dark';
+            model.mutate(s => { s.view.theme = newTheme; });
+            if (typeof localStorage !== 'undefined') {
+              if (newTheme === 'light') {
+                localStorage.setItem('theme', 'light');
+              } else {
+                localStorage.setItem('theme', 'dark');
+              }
+            }
+          }
+        },
         ...(isInStandaloneMode() ? [
           {
             separator: true

src/index.css

@@ -6,6 +6,8 @@ body {
     sans-serif; */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--app-bg-color, #1e1e1e);
+  color: var(--app-text-color, rgba(255, 255, 255, 0.87));
 }
 
 code {

src/index.tsx

@@ -15,7 +15,6 @@ import { isInStandaloneMode, registerCustomAppHeightCSSProperty } from './utils.
 import { State, StatePersister } from './state/app-state.ts';
 import { writeStateInFragment } from "./state/fragment-state.ts";
 
-import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.min.css";

src/state/app-state.ts

@@ -52,10 +52,11 @@ export interface State {
     } & { [K in MultiLayoutComponentId]: boolean })
 
     collapsedCustomizerTabs?: string[],
-    
+
     color: string,
     showAxes?: boolean,
     lineNumbers?: boolean,
+    theme: 'light' | 'dark',
   }
 
   currentRunLogs?: ['stderr'|'stdout', string][],

src/state/fragment-state.ts

@@ -101,7 +101,8 @@ export async function readStateFromFragment(): Promise<State | null> {
           collapsedCustomizerTabs: validateArray(view?.collapsedCustomizerTabs, validateString),
           color: validateString(view?.color, () => defaultModelColor),
           showAxes: validateBoolean(view?.layout?.showAxis, () => true),
-          lineNumbers: validateBoolean(view?.layout?.lineNumbers, () => false)
+          lineNumbers: validateBoolean(view?.layout?.lineNumbers, () => false),
+          theme: validateStringEnum(view?.theme, ['light', 'dark'], () => 'dark')
         }
       };
     } catch (e) {

src/state/initial-state.ts

@@ -48,6 +48,7 @@ export function createInitialState(state: State | null, source?: {content?: stri
         } as any,
 
         color: defaultModelColor,
+        theme: (typeof localStorage !== 'undefined' && localStorage.getItem('theme') as 'light' | 'dark') || (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
       },
       preview: blurhash ? {blurhash} : undefined,
     };

webpack.config.js

@@ -108,6 +108,16 @@ const config = [
             to: path.resolve(__dirname, 'dist/fonts'),
             toType: 'dir',
           },
+          {
+            from: path.resolve(__dirname, 'node_modules/primereact/resources/themes/lara-dark-indigo'),
+            to: path.resolve(__dirname, 'dist/primereact/resources/themes/lara-dark-indigo'),
+            toType: 'dir',
+          },
+          {
+            from: path.resolve(__dirname, 'node_modules/primereact/resources/themes/lara-light-indigo'),
+            to: path.resolve(__dirname, 'dist/primereact/resources/themes/lara-light-indigo'),
+            toType: 'dir',
+          },
           {
             from: path.resolve(__dirname, 'src/wasm/openscad.js'),
             to: path.resolve(__dirname, 'dist'),