feat(app): default to dark mode and apply custom dark palette\n\n- Default theme fallback to THEME.DARK and editorTheme=THEME.DARK\n- Pre-init theme script defaults to dark to avoid FOUC; PWA theme-color updated\n- App-only dark palette overrides in index.scss per provided palette

excalidraw-app/index.html

@@ -9,7 +9,7 @@
     />
     <meta name="referrer" content="origin" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#121212" />
+    <meta name="theme-color" content="#121416" />
 
     <!-- Primary Meta Tags -->
     <meta
@@ -75,9 +75,9 @@
             return window.matchMedia("(prefers-color-scheme: dark)").matches
               ? "dark"
               : "light";
-          } else {
-            return theme || "light";
-          }
+        } else {
+            return theme || "dark";
+        }
         }
 
         setTheme(getTheme());
@@ -87,7 +87,7 @@
     </script>
     <style>
       html.dark {
-        background-color: #121212;
+        background-color: #121416;
         color: #fff;
       }
     </style>

excalidraw-app/index.scss

@@ -1,8 +1,8 @@
 .excalidraw {
-  --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion
+  --color-primary-contrast-offset: #747a86; // to offset Chubb illusion
 
   &.theme--dark {
-    --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
+    --color-primary-contrast-offset: #71767e; // to offset Chubb illusion
   }
 
   .top-right-ui {
@@ -115,3 +115,52 @@
     }
   }
 }
+
+/* App-only dark theme overrides (custom palette) */
+.excalidraw.theme--dark {
+  /* base palette tokens */
+  --bg-900: #121416;
+  --bg-800: #181a1d;
+  --bg-700: #1c1e22;
+  --border-600: #2a2c30;
+  --ink-100: #f1f3f5;
+  --ink-200: #e7e9ec;
+  --ink-400: #c9ccd2;
+  --ink-600: #8f9399;
+
+  /* primary scale */
+  --color-primary: #2a2d32;
+  --color-primary-darker: #26292e;
+  --color-primary-darkest: #212428;
+  --color-primary-light: #34383d;
+  --color-primary-light-darker: #2f3338;
+  --color-primary-hover: #34383d;
+
+  /* surfaces */
+  --color-surface-lowest: var(--bg-900);
+  --color-surface-mid: var(--bg-800);
+  --color-surface-low: var(--bg-700);
+  --island-bg-color: var(--bg-800);
+
+  /* text and icons */
+  --color-on-surface: var(--ink-400);
+  --popup-text-color: var(--ink-400);
+  --popup-text-inverted-color: var(--ink-100);
+
+  /* borders */
+  --color-border-outline: var(--border-600);
+  --color-border-outline-variant: var(--border-600);
+
+  /* inputs */
+  --input-bg-color: var(--bg-900);
+  --input-border-color: var(--border-600);
+  --input-hover-bg-color: var(--bg-800);
+
+  /* brand */
+  --color-brand-hover: var(--color-primary-hover);
+  --color-brand-active: var(--color-primary);
+
+  /* main background and text */
+  --default-bg-color: var(--bg-900);
+  --color-logo-text: var(--ink-100);
+}

excalidraw-app/useHandleAppTheme.ts

@@ -15,10 +15,10 @@ export const useHandleAppTheme = () => {
       (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
         | Theme
         | "system"
-        | null) || THEME.LIGHT
+        | null) || THEME.DARK
     );
   });
-  const [editorTheme, setEditorTheme] = useState<Theme>(THEME.LIGHT);
+  const [editorTheme, setEditorTheme] = useState<Theme>(THEME.DARK);
 
   useEffect(() => {
     const mediaQuery = getDarkThemeMediaQuery();