fix: interface blinks on reload with dark theme (#2480)

Raubzeug · web-flow · commit d6f23a31380f · 2025-06-30T09:38:26.000Z
diff --git 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>
