Update Light Mode UX

Magicherry · Magicherry · commit b1a2ae85aed3 · 2026-03-24T19:28:49.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -14,6 +14,24 @@
   <title>Yuting Zhou</title>
   <meta name="description" content="Self Developed personal website build with React.js">
 
+  <!-- Match App.js theme init before paint to avoid navbar / preloader color flash -->
+  <script>
+    (function () {
+      try {
+        var t = localStorage.getItem("theme");
+        if (t === "light" || t === "dark") {
+          document.documentElement.setAttribute("data-theme", t);
+        } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+          document.documentElement.setAttribute("data-theme", "light");
+        } else {
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+      } catch (e) {
+        document.documentElement.setAttribute("data-theme", "dark");
+      }
+    })();
+  </script>
+
   <!-- Google / Search Engine Tags -->
   <meta itemprop="name" content="Yuting Zhou">
   <meta itemprop="description" content="Self Developed personal website build with React.js">
@@ -36,7 +54,7 @@
     content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
 </head>
 
-<body>
+<body class="preloader-active">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 </body>
diff --git a/src/App.js b/src/App.js
@@ -34,6 +34,15 @@ function App() {
     }
   }, [theme]);
 
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (load) {
+      document.body.classList.add("preloader-active");
+    } else {
+      document.body.classList.remove("preloader-active");
+    }
+  }, [load]);
+
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
     const handleChange = (e) => {
diff --git a/src/components/Home/Home2.js b/src/components/Home/Home2.js
@@ -108,7 +108,7 @@ function Home2() {
                                         href={link.href}
                                         target={link.onClick ? "_self" : "_blank"}
                                         rel="noopener noreferrer"
-                                        className="social-icon-color home-social-icons"
+                                        className="home-social-icons"
                                         aria-label={link.ariaLabel}
                                         onClick={link.onClick}
                                     >
diff --git a/src/css/style.css b/src/css/style.css

Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ function Home2() {`
`108`	`108`	`href={link.href}`
`109`	`109`	`target={link.onClick ? "_self" : "_blank"}`
`110`	`110`	`rel="noopener noreferrer"`
`111`		`- className="social-icon-color home-social-icons"`
	`111`	`+ className="home-social-icons"`
`112`	`112`	`aria-label={link.ariaLabel}`
`113`	`113`	`onClick={link.onClick}`
`114`	`114`	`>`