fix(loading): consistent colors in loading screen (#6679)

**Problem:**
Today if there is a difference between the system theme preferences and
the Utopia theme preferences, at some point we get mixed colors in the
loading screen.
This happens because at first we can rely only on system preferences
(React code was not loaded yet and we don't have user preferences), and
only 1-2s into the loading we have the user preferences.

**Fix:**
All the colors now are consistent with the theme.
We have two options when the system theme and the Utopia theme don't
match:
1. continue with the theme that was displayed when the loading screen
started (currently the theme from the system preferences since this is
the only information we have)
2. switch the theme once we have the user preferences mid-way in the
loading screen. this was not chosen by Mckayla.

Once we'll be able to send this information from the server we can start
with the Utopia preferred theme (have a class name on the body).

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode

Author: liady

editor/src/components/editor/loading-screen.tsx

@@ -4,13 +4,10 @@ import { getImportOperationTextAsJsx } from './import-wizard/import-wizard-helpe
 import { getTotalImportStatusAndResult } from '../../core/shared/import/import-operation-service'
 import type { TotalImportResult } from '../../core/shared/import/import-operation-types'
 import type { Theme } from '../../uuiui'
-import { useColorTheme } from '../../uuiui'
 import { getCurrentTheme } from './store/editor-state'
 import ReactDOM from 'react-dom'
 
 export function LoadingEditorComponent() {
-  const colorTheme = useColorTheme()
-
   const currentTheme: Theme = useEditorState(
     Substores.theme,
     (store) => getCurrentTheme(store.userState),
@@ -131,25 +128,14 @@ export function LoadingEditorComponent() {
     hasMounted.current = true
   }
 
-  const themeStyle =
-    currentTheme === 'dark'
-      ? `
-    .editor-loading-screen { background-color: ${colorTheme.bg6.value} }
-    .utopia-logo-pyramid.light { display: none; }
-    .utopia-logo-pyramid.dark { display: block; }
-  `
-      : ''
-
   return ReactDOM.createPortal(
     <React.Fragment>
-      <style>{themeStyle}</style>
-      <div className='progress-bar-shell' style={{ borderColor: colorTheme.fg0.value }}>
+      <div className='progress-bar-shell'>
         <div
           className='progress-bar-progress animation-progress'
           style={{
             transform: 'translateX(-180px)',
             animationName: 'animation-keyframes-2',
-            backgroundColor: colorTheme.fg0.value,
           }}
         ></div>
       </div>
@@ -159,7 +145,6 @@ export function LoadingEditorComponent() {
             <li
               style={{
                 listStyle: 'none',
-                color: colorTheme.fg0.value,
               }}
               key={currentOperationToShow.id}
             >

editor/src/templates/index.html

@@ -38,6 +38,31 @@
       }
 
       @scope (:root) to (#canvas-container) {
+        body {
+          /* handle system preferences and utopia theme */
+          --theme-bg-color: white;
+          --theme-fg-color: black;
+          --theme-light-png-visibility: block;
+          --theme-dark-png-visibility: none;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          body:not(.utopia-theme-light) {
+            --theme-bg-color: #1a1a1a;
+            --theme-fg-color: white;
+            --theme-light-png-visibility: none;
+            --theme-dark-png-visibility: block;
+          }
+        }
+
+        /* utopia preferences should override system preferences */
+        body.utopia-theme-dark {
+          --theme-bg-color: #1a1a1a;
+          --theme-fg-color: white;
+          --theme-light-png-visibility: none;
+          --theme-dark-png-visibility: block;
+        }
+
         body {
           margin: 0;
           font-size: 11px !important;
@@ -46,6 +71,8 @@
           outline: none;
           overscroll-behavior-x: contain;
           --loadscreen-accent: rgba(46, 255, 109, 0.5);
+          background-color: var(--theme-bg-color);
+          transition: background-color 0.1s ease-in-out;
         }
 
         @keyframes animation-keyframes {
@@ -85,7 +112,8 @@
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          background-color: white;
+          background-color: var(--theme-bg-color);
+          transition: background-color 0.1s ease-in-out;
           z-index: 1000;
         }
 
@@ -105,7 +133,8 @@
         }
 
         .progress-bar-shell {
-          border: 1px solid black;
+          border: 1px solid var(--theme-fg-color);
+          transition: border-color 0.1s ease-in-out;
           margin-top: 64px;
           width: 212px;
           height: 11px;
@@ -115,13 +144,13 @@
         }
 
         .progress-bar-progress {
-          background-color: black;
+          background-color: var(--theme-fg-color);
+          transition: background-color 0.1s ease-in-out;
           border-radius: 6px;
           height: 9px;
         }
 
         .loading-screen-import-operations {
-          color: black;
           height: 150px;
           overflow: hidden;
           width: auto;
@@ -136,11 +165,17 @@
           font-family: utopian-inter, 'sans-serif';
         }
 
+        .loading-screen-import-operations,
+        .loading-screen-import-operations li {
+          color: var(--theme-fg-color);
+          transition: color 0.1s ease-in-out;
+        }
+
         .utopia-logo-pyramid.light {
-          display: block;
+          display: var(--theme-light-png-visibility);
         }
         .utopia-logo-pyramid.dark {
-          display: none;
+          display: var(--theme-dark-png-visibility);
         }
 
         .loading-screen-wrapper {
@@ -149,36 +184,6 @@
           align-items: center;
           justify-content: center;
         }
-
-        @media (prefers-color-scheme: dark) {
-          body {
-            background-color: #1a1a1a;
-          }
-
-          .editor-loading-screen {
-            background-color: #1a1a1a;
-          }
-
-          .loading-screen-import-operations,
-          .loading-screen-import-operations li {
-            color: white;
-          }
-
-          .progress-bar-shell {
-            border: 1px solid white;
-          }
-
-          .progress-bar-progress {
-            background-color: white;
-          }
-
-          .utopia-logo-pyramid.light {
-            display: none;
-          }
-          .utopia-logo-pyramid.dark {
-            display: block;
-          }
-        }
       }
     </style>
   </head>