fix: default light theme splash 🔧 (#5660)

Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/components/App.tsx

@@ -552,10 +552,6 @@ class App extends React.Component<AppProps, AppState> {
                     typeof this.props?.zenModeEnabled === "undefined" &&
                     this.state.zenModeEnabled
                   }
-                  showThemeBtn={
-                    typeof this.props?.theme === "undefined" &&
-                    this.props.UIOptions.canvasActions.theme
-                  }
                   libraryReturnUrl={this.props.libraryReturnUrl}
                   UIOptions={this.props.UIOptions}
                   focusContainer={this.focusContainer}
@@ -645,7 +641,8 @@ class App extends React.Component<AppProps, AppState> {
         let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         let gridSize = actionResult?.appState?.gridSize || null;
-        let theme = actionResult?.appState?.theme || THEME.LIGHT;
+        const theme =
+          actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
         let name = actionResult?.appState?.name ?? this.state.name;
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
@@ -659,10 +656,6 @@ class App extends React.Component<AppProps, AppState> {
           gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
         }
 
-        if (typeof this.props.theme !== "undefined") {
-          theme = this.props.theme;
-        }
-
         if (typeof this.props.name !== "undefined") {
           name = this.props.name;
         }
@@ -755,6 +748,9 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
+    if (this.props.theme) {
+      this.setState({ theme: this.props.theme });
+    }
     if (!this.state.isLoading) {
       this.setState({ isLoading: true });
     }
@@ -784,6 +780,7 @@ class App extends React.Component<AppProps, AppState> {
     const scene = restore(initialData, null, null);
     scene.appState = {
       ...scene.appState,
+      theme: this.props.theme || scene.appState.theme,
       // we're falling back to current (pre-init) state when deciding
       // whether to open the library, to handle a case where we
       // update the state outside of initialData (e.g. when loading the app

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -1,20 +1,12 @@
-import React from "react";
 import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
 
 export const BackgroundPickerAndDarkModeToggle = ({
-  appState,
-  setAppState,
   actionManager,
-  showThemeBtn,
 }: {
   actionManager: ActionManager;
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-  showThemeBtn: boolean;
 }) => (
   <div style={{ display: "flex" }}>
     {actionManager.renderAction("changeViewBackgroundColor")}
-    {showThemeBtn && actionManager.renderAction("toggleTheme")}
+    {actionManager.renderAction("toggleTheme")}
   </div>
 );

src/components/InitializeApp.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { LoadingMessage } from "./LoadingMessage";
 import { defaultLang, Language, languages, setLanguage } from "../i18n";
+import { Theme } from "../element/types";
 
 interface Props {
   langCode: Language["code"];
   children: React.ReactElement;
+  theme?: Theme;
 }
 
 export const InitializeApp = (props: Props) => {
@@ -21,5 +23,5 @@ export const InitializeApp = (props: Props) => {
     updateLang();
   }, [props.langCode]);
 
-  return loading ? <LoadingMessage /> : props.children;
+  return loading ? <LoadingMessage theme={props.theme} /> : props.children;
 };

src/components/LayerUI.tsx

@@ -53,7 +53,6 @@ interface LayerUIProps {
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   showExitZenModeBtn: boolean;
-  showThemeBtn: boolean;
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
@@ -78,7 +77,6 @@ const LayerUI = ({
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
-  showThemeBtn,
   isCollaborating,
   renderTopRightUI,
   renderCustomFooter,
@@ -209,12 +207,7 @@ const LayerUI = ({
               />
             )}
           </Stack.Row>
-          <BackgroundPickerAndDarkModeToggle
-            appState={appState}
-            actionManager={actionManager}
-            setAppState={setAppState}
-            showThemeBtn={showThemeBtn}
-          />
+          <BackgroundPickerAndDarkModeToggle actionManager={actionManager} />
           {appState.fileHandle && (
             <>{actionManager.renderAction("saveToActiveFile")}</>
           )}
@@ -424,7 +417,6 @@ const LayerUI = ({
           canvas={canvas}
           isCollaborating={isCollaborating}
           renderCustomFooter={renderCustomFooter}
-          showThemeBtn={showThemeBtn}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}

src/components/LoadingMessage.tsx

@@ -1,8 +1,14 @@
 import { t } from "../i18n";
 import { useState, useEffect } from "react";
 import Spinner from "./Spinner";
+import clsx from "clsx";
+import { THEME } from "../constants";
+import { Theme } from "../element/types";
 
-export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
+export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({
+  delay,
+  theme,
+}) => {
   const [isWaiting, setIsWaiting] = useState(!!delay);
 
   useEffect(() => {
@@ -20,7 +26,11 @@ export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
   }
 
   return (
-    <div className="LoadingMessage">
+    <div
+      className={clsx("LoadingMessage", {
+        "LoadingMessage--dark": theme === THEME.DARK,
+      })}
+    >
       <div>
         <Spinner />
       </div>

src/components/MobileMenu.tsx

@@ -38,7 +38,6 @@ type MobileMenuProps = {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
-  showThemeBtn: boolean;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
@@ -61,7 +60,6 @@ export const MobileMenu = ({
   canvas,
   isCollaborating,
   renderCustomFooter,
-  showThemeBtn,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
@@ -171,14 +169,7 @@ export const MobileMenu = ({
             onClick={onCollabButtonClick}
           />
         )}
-        {
-          <BackgroundPickerAndDarkModeToggle
-            actionManager={actionManager}
-            appState={appState}
-            setAppState={setAppState}
-            showThemeBtn={showThemeBtn}
-          />
-        }
+        {<BackgroundPickerAndDarkModeToggle actionManager={actionManager} />}
       </>
     );
   };