fixed flickering theme color at startup

src/app/globals.css

@@ -43,6 +43,18 @@
     --radius-xl: calc(var(--radius) + 4px);
 }
 
+@media (prefers-color-scheme: light) {
+    @theme inline {
+        --initial-theme-color: oklch(1 0 0);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    @theme inline {
+        --initial-theme-color: oklch(0.145 0 0);
+    }
+}
+
 html {
     min-height: calc(100% + env(safe-area-inset-top));
     padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

src/app/page.tsx

@@ -264,8 +264,11 @@ const ProjectContainer = ({
                 setSelectedProjects([...selectedProjects, project.uuid]);
             } else {
                 const newSelectedProject = selectedProjects;
-                newSelectedProject.splice(newSelectedProject.indexOf(project.uuid), 1);
-                setSelectedProjects(newSelectedProject);
+                const index = selectedProjects.indexOf(project.uuid);
+                if (index >= 0) {
+                    newSelectedProject.splice(newSelectedProject.indexOf(project.uuid), 1);
+                    setSelectedProjects(newSelectedProject);
+                }
             }
         }
         setMounted(true);
@@ -282,7 +285,7 @@ const ProjectContainer = ({
                         {project.editDate && <p className="text-sm text-secondary-foreground">Last edit date: {date.toLocaleDateString()}, {date.toLocaleTimeString()}</p>}
                     </div>
                     <div className="flex flex-col lg:xl:flex-row items-center gap-1">
-                        <ProjectDescription project={project} />
+                        {!selecting && <ProjectDescription project={project} />}
                         <ProjectDropdown selected={selected} setSelected={setSelected} project={project} />
                     </div>
                 </div>

src/app/pwa-head.tsx

@@ -5,7 +5,7 @@ const PWAHead = () => (
         <meta name="apple-mobile-web-app-status-bar-style" content="default" />
         <meta name="apple-touch-fullscreen" content="yes" />
         <meta name="mobile-web-app-capable" content="yes" />
-        <meta name="theme-color" content="var(--background)" />
+        <meta name="theme-color" content="var(--initial-theme-color)" />
         
         <link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-2048-2732.jpg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
         <link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-2732-2048.jpg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />