From fb0246dafc9864aaf49ff35473b93f3a9163c949 Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Wed, 25 Jun 2025 15:43:37 +0300
Subject: [PATCH 1/3] fix: interface blinks on reload with dark theme

---
 public/index.html | 62 +++++++++++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 26 deletions(-)
diff --git a/public/index.html b/public/index.html
index 868f82eab..3b8145989 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/static/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="YDB Monitoring"
-    />
-    <meta name="referrer" content="no-referrer-when-downgrade" />
-    <!--
+    <head>
+        <script>
+            (function () {
+                const savedTheme = localStorage.getItem('theme') || 'light';
+                if (
+                    savedTheme.includes('dark') ||
+                    (savedTheme === 'system' &&
+                        window.matchMedia &&
+                        window.matchMedia('(prefers-color-scheme: dark)').matches)
+                ) {
+                    document.documentElement.style.backgroundColor = '#2d2c33';
+                }
+            })();
+        </script>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/static/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="YDB Monitoring" />
+        <meta name="referrer" content="no-referrer-when-downgrade" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -18,19 +29,19 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>YDB Monitoring</title>
-    <script>
-      window.systemSettings = {};
-      window.web_version = !'%REACT_APP_BACKEND%';
-      window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%';
-      window.meta_backend = '%REACT_APP_META_BACKEND%'
-      window.react_app_disable_checks = '%REACT_APP_DISABLE_CHECKS%'
-    </script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+        <title>YDB Monitoring</title>
+        <script>
+            window.systemSettings = {};
+            window.web_version = !'%REACT_APP_BACKEND%';
+            window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%';
+            window.meta_backend = '%REACT_APP_META_BACKEND%';
+            window.react_app_disable_checks = '%REACT_APP_DISABLE_CHECKS%';
+        </script>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,6 +50,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+    --></body>
 </html>

From 71570045845229bd7765abf1671e027b7b23bfe3 Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Thu, 26 Jun 2025 11:11:30 +0300
Subject: [PATCH 2/3] fix: do not hardcode color

---
 public/index.html | 43 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3b8145989..42177905a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,15 +3,40 @@
     <head>
         <script>
             (function () {
-                const savedTheme = localStorage.getItem('theme') || 'light';
-                if (
-                    savedTheme.includes('dark') ||
-                    (savedTheme === 'system' &&
-                        window.matchMedia &&
-                        window.matchMedia('(prefers-color-scheme: dark)').matches)
-                ) {
-                    document.documentElement.style.backgroundColor = '#2d2c33';
-                }
+                try {
+                    const savedTheme = localStorage.getItem('theme') || 'light';
+                    const isDarkThemePreferred = window?.matchMedia?.(
+                        '(prefers-color-scheme:dark)',
+                    )?.matches;
+
+                    let theme;
+                    if (!savedTheme || savedTheme === 'system') {
+                        theme = isDarkThemePreferred ? 'dark' : 'light';
+                    } else {
+                        theme = savedTheme;
+                    }
+
+                    const observer = new MutationObserver((mutations, obs) => {
+                        if (document.body) {
+                            try {
+                                const themeClass = [...document.body.classList].find((cl) =>
+                                    cl.startsWith('g-root_theme'),
+                                );
+                                if (themeClass) {
+                                    document.body.classList.remove(themeClass);
+                                }
+                                document.body.classList.add(`g-root_theme_${theme}`);
+                            } catch (e) {
+                            } finally {
+                                obs.disconnect();
+                            }
+                        }
+                    });
+
+                    observer.observe(document.documentElement, {
+                        childList: true,
+                    });
+                } catch (e) {}
             })();
         </script>
         <meta charset="utf-8" />

From 8dcc26edede564c5ca721c376a89e7121a0ce801 Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Thu, 26 Jun 2025 11:17:45 +0300
Subject: [PATCH 3/3] Revert "fix: do not hardcode color"

This reverts commit 71570045845229bd7765abf1671e027b7b23bfe3.
---
 public/index.html | 43 +++++++++----------------------------------
 1 file changed, 9 insertions(+), 34 deletions(-)

diff --git a/public/index.html b/public/index.html
index 42177905a..3b8145989 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,40 +3,15 @@
     <head>
         <script>
             (function () {
-                try {
-                    const savedTheme = localStorage.getItem('theme') || 'light';
-                    const isDarkThemePreferred = window?.matchMedia?.(
-                        '(prefers-color-scheme:dark)',
-                    )?.matches;
-
-                    let theme;
-                    if (!savedTheme || savedTheme === 'system') {
-                        theme = isDarkThemePreferred ? 'dark' : 'light';
-                    } else {
-                        theme = savedTheme;
-                    }
-
-                    const observer = new MutationObserver((mutations, obs) => {
-                        if (document.body) {
-                            try {
-                                const themeClass = [...document.body.classList].find((cl) =>
-                                    cl.startsWith('g-root_theme'),
-                                );
-                                if (themeClass) {
-                                    document.body.classList.remove(themeClass);
-                                }
-                                document.body.classList.add(`g-root_theme_${theme}`);
-                            } catch (e) {
-                            } finally {
-                                obs.disconnect();
-                            }
-                        }
-                    });
-
-                    observer.observe(document.documentElement, {
-                        childList: true,
-                    });
-                } catch (e) {}
+                const savedTheme = localStorage.getItem('theme') || 'light';
+                if (
+                    savedTheme.includes('dark') ||
+                    (savedTheme === 'system' &&
+                        window.matchMedia &&
+                        window.matchMedia('(prefers-color-scheme: dark)').matches)
+                ) {
+                    document.documentElement.style.backgroundColor = '#2d2c33';
+                }
             })();
         </script>
         <meta charset="utf-8" />
