From 50f6d2cf9d43877c8f7442112cfdf591c1eff5c9 Mon Sep 17 00:00:00 2001
From: cavidelizade <elizadecavidnice@gmail.com>
Date: Fri, 17 Jul 2026 00:55:11 +0400
Subject: [PATCH 1/3] fix(ui): apply the saved theme before paint to avoid a
 light flash

index.html hardcoded data-theme="light" and the real theme was only applied
once React ran, so dark and pink users saw a flash of light on every load. Add
a tiny blocking script in the head that reads devlane-theme from localStorage
(same key, values and system fallback as ThemeContext) and sets data-theme
before the bundle paints.

Closes #348

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/index.html | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/web/index.html b/apps/web/index.html
index 2ec4dd9c..1ce3bc66 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -1,6 +1,29 @@
 <!doctype html>
-<html lang="en" data-theme="light">
+<html lang="en">
   <head>
+    <script>
+      // Apply the saved theme before the bundle paints so dark/pink users don't
+      // flash light first. Mirrors ThemeContext (key, values, system fallback).
+      (function () {
+        try {
+          var pref = localStorage.getItem('devlane-theme');
+          if (pref !== 'light' && pref !== 'dark' && pref !== 'system' && pref !== 'pink') {
+            pref = 'system';
+          }
+          var effective = pref;
+          if (pref === 'system') {
+            effective = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          }
+          if (effective === 'dark' || effective === 'pink') {
+            document.documentElement.setAttribute('data-theme', effective);
+          } else {
+            document.documentElement.removeAttribute('data-theme');
+          }
+        } catch (e) {
+          /* localStorage blocked; fall back to the default light theme */
+        }
+      })();
+    </script>
     <link rel="icon" href="/devlane-2-dark-no-bg.png" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

From 82b93be103aaa67b58b812fc0b7a916a548508d8 Mon Sep 17 00:00:00 2001
From: martian56 <fuadelizade469@gmail.com>
Date: Sun, 25 Oct 2026 12:13:22 +0400
Subject: [PATCH 2/3] style(ui): wrap theme bootstrap condition to satisfy
 prettier

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/index.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/index.html b/apps/web/index.html
index 1ce3bc66..9bde8fc8 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -7,7 +7,12 @@
       (function () {
         try {
           var pref = localStorage.getItem('devlane-theme');
-          if (pref !== 'light' && pref !== 'dark' && pref !== 'system' && pref !== 'pink') {
+          if (
+            pref !== 'light' &&
+            pref !== 'dark' &&
+            pref !== 'system' &&
+            pref !== 'pink'
+          ) {
             pref = 'system';
           }
           var effective = pref;

From 40bfc3957e5c2838f998f3c3633da80599293cc5 Mon Sep 17 00:00:00 2001
From: martian56 <fuadelizade469@gmail.com>
Date: Sun, 25 Oct 2026 12:23:37 +0400
Subject: [PATCH 3/3] style(ui): apply prettier to theme bootstrap script

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/index.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/web/index.html b/apps/web/index.html
index 9bde8fc8..c488d163 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -7,17 +7,14 @@
       (function () {
         try {
           var pref = localStorage.getItem('devlane-theme');
-          if (
-            pref !== 'light' &&
-            pref !== 'dark' &&
-            pref !== 'system' &&
-            pref !== 'pink'
-          ) {
+          if (pref !== 'light' && pref !== 'dark' && pref !== 'system' && pref !== 'pink') {
             pref = 'system';
           }
           var effective = pref;
           if (pref === 'system') {
-            effective = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            effective = window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light';
           }
           if (effective === 'dark' || effective === 'pink') {
             document.documentElement.setAttribute('data-theme', effective);