From 5862c74fa60061db29c6fc3083660f712f20e0bd Mon Sep 17 00:00:00 2001
From: corgifist <sxuare.science@gmail.com>
Date: Sat, 26 Jul 2025 14:54:37 +0300
Subject: [PATCH] fixed flickering theme color at startup

---
 src/app/globals.css  | 12 ++++++++++++
 src/app/page.tsx     |  9 ++++++---
 src/app/pwa-head.tsx |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 9e9d5c1..9a9ee11 100644
--- a/src/app/globals.css
+++ b/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);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1a04148..5f20a77 100644
--- a/src/app/page.tsx
+++ b/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>
diff --git a/src/app/pwa-head.tsx b/src/app/pwa-head.tsx
index 73e7a70..e048737 100644
--- a/src/app/pwa-head.tsx
+++ b/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)" />