diff --git a/beta/src/components/Seo.tsx b/beta/src/components/Seo.tsx
index e7f253fe3d7..106896e09d9 100644
--- a/beta/src/components/Seo.tsx
+++ b/beta/src/components/Seo.tsx
@@ -31,6 +31,7 @@ export const Seo = withRouter(
       {description != null && (
         <meta name="description" key="description" content={description} />
       )}
+      <meta name="theme-color" key="theme-color" content="#23272F" />
       {/* <link rel="icon" type="image/x-icon" href={favicon} />
       <link rel="apple-touch-icon" href={favicon} />  @todo favicon */}
       <meta property="fb:app_id" content="623268441017527" />
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index 0c46ff5f208..f71c6bd9035 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -14,43 +14,50 @@ const MyDocument = () => {
         <script
           dangerouslySetInnerHTML={{
             __html: `
-                (function () {
-                  function setTheme(newTheme) {
-                    window.__theme = newTheme;
-                    if (newTheme === 'dark') {
-                      document.documentElement.classList.add('dark');
-                    } else if (newTheme === 'light') {
-                      document.documentElement.classList.remove('dark');
-                    }
-                  }
-
-                  var preferredTheme;
-                  try {
-                    preferredTheme = localStorage.getItem('theme');
-                  } catch (err) { }
-
-                  window.__setPreferredTheme = function(newTheme) {
-                    preferredTheme = newTheme;
-                    setTheme(newTheme);
-                    try {
-                      localStorage.setItem('theme', newTheme);
-                    } catch (err) { }
-                  };
-
-                  var initialTheme = preferredTheme;
-                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-                  if (!initialTheme) {
-                    initialTheme = darkQuery.matches ? 'dark' : 'light';
-                  }
-                  setTheme(initialTheme);
-
-                  darkQuery.addEventListener('change', function (e) {
-                    if (!preferredTheme) {
-                      setTheme(e.matches ? 'dark' : 'light');
-                    }
-                  });
-                })();
+(function () {
+    var reacjsThemeColorMeta = document.querySelector('meta[name="theme-color"]');
+    function setTheme(newTheme) {
+        window.__theme = newTheme;
+        if (newTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+            reacjsThemeColorMeta === null || reacjsThemeColorMeta === void 0 ? void 0 : reacjsThemeColorMeta.setAttribute('content', '#23272F');
+        }
+        else if (newTheme === 'light') {
+            document.documentElement.classList.remove('dark');
+            reacjsThemeColorMeta === null || reacjsThemeColorMeta === void 0 ? void 0 : reacjsThemeColorMeta.setAttribute('content', '#F5F5F5');
+        }
+    }
+    var preferredTheme;
+    try {
+        preferredTheme = localStorage.getItem('theme');
+    }
+    catch (err) { }
+    window.__setPreferredTheme = function (newTheme) {
+        preferredTheme = newTheme;
+        setTheme(newTheme);
+        try {
+            localStorage.setItem('theme', newTheme);
+        }
+        catch (err) { }
+    };
+    var initialTheme = preferredTheme;
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    if (!initialTheme) {
+        initialTheme = darkQuery.matches ? 'dark' : 'light';
+    }
+    setTheme(initialTheme);
+    if (initialTheme === 'dark') {
+        reacjsThemeColorMeta === null || reacjsThemeColorMeta === void 0 ? void 0 : reacjsThemeColorMeta.setAttribute('content', '#23272F');
+    }
+    else {
+        reacjsThemeColorMeta === null || reacjsThemeColorMeta === void 0 ? void 0 : reacjsThemeColorMeta.setAttribute('content', '#F5F5F5');
+    }
+    darkQuery.addEventListener('change', function (e) {
+        if (!preferredTheme) {
+            setTheme(e.matches ? 'dark' : 'light');
+        }
+    });
+})();       
               `,
           }}
         />