upgrade Docusaurus, fix layout shifts, apply theme to GH button

Author: Simek

website/package.json

@@ -47,20 +47,20 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "3.9.0",
-    "@docusaurus/faster": "3.9.0",
-    "@docusaurus/plugin-google-gtag": "3.9.0",
-    "@docusaurus/plugin-pwa": "3.9.0",
-    "@docusaurus/preset-classic": "3.9.0",
+    "@docusaurus/core": "3.9.1",
+    "@docusaurus/faster": "3.9.1",
+    "@docusaurus/plugin-google-gtag": "3.9.1",
+    "@docusaurus/plugin-pwa": "3.9.1",
+    "@docusaurus/preset-classic": "3.9.1",
     "docusaurus-plugin-sass": "^0.2.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-github-btn": "^1.4.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.9.0",
-    "@docusaurus/tsconfig": "3.9.0",
-    "@docusaurus/types": "3.9.0",
+    "@docusaurus/module-type-aliases": "3.9.1",
+    "@docusaurus/tsconfig": "3.9.1",
+    "@docusaurus/types": "3.9.1",
     "@react-native-website/lint-examples": "*",
     "@types/google.analytics": "^0.0.46",
     "@types/react": "^19.1.13",

website/src/components/Home/Hero/index.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import GitHubButton from 'react-github-btn';
+import {useColorMode} from '@docusaurus/theme-common';
 
 import Logo from '../Logo';
 import GridBackground from './GridBackground';
@@ -16,6 +17,7 @@ import Devices from './Devices';
 import styles from './styles.module.css';
 
 function Hero() {
+  const {colorMode} = useColorMode();
   return (
     <div className={styles.container}>
       <div className={styles.socialLinks}>
@@ -30,6 +32,7 @@ function Hero() {
           href="https://github.com/facebook/react-native"
           data-icon="octicon-star"
           data-size="large"
+          data-color-scheme={colorMode}
           aria-label="Star facebook/react-native on GitHub">
           Star
         </GitHubButton>

website/src/components/Home/Hero/styles.module.css

@@ -22,6 +22,8 @@
   gap: 1rem;
   margin-top: 1rem;
   margin-right: 1rem;
+  min-height: 36px;
+  font-size: 14px;
 }
 
 .gridBackground {

website/src/css/customTheme.scss

@@ -1075,7 +1075,7 @@ So we need to "revert" some CSS vars to not enforce dark mode
 }
 
 .DocSearch-Button-Keys {
-  min-width: auto;
+  min-width: 42px;
   margin-right: 4px;
   margin-top: 1px;
   gap: 2px;
@@ -1085,7 +1085,7 @@ So we need to "revert" some CSS vars to not enforce dark mode
     font-weight: 600;
     background: color-mix(
       in srgb,
-      var(--docsearch-subtle-color) 30%,
+      var(--docsearch-subtle-color) 40%,
       transparent
     );
     color: var(--docsearch-muted-color);
@@ -1099,9 +1099,10 @@ So we need to "revert" some CSS vars to not enforce dark mode
 .DocSearch-Commands-Key {
   background: color-mix(
     in srgb,
-    var(--docsearch-subtle-color) 30%,
+    var(--docsearch-subtle-color) 40%,
     transparent
   );
+  border-radius: var(--ifm-code-border-radius);
   color: var(--docsearch-muted-color);
 }
 
@@ -1180,6 +1181,7 @@ html[data-theme="dark"] {
       transparent
     );
   }
+
   .DocSearch-Commands-Key {
     background: color-mix(
       in srgb,