docs: add custom theme with dark mode default

Add blue accent colors and set dark mode as the default theme.
The theme preference is stored in localStorage and can be toggled
by users. Custom CSS provides blue accent colors matching React
Native branding for both light and dark modes.

Author: mgcrea

docs/astro.config.mjs

@@ -15,6 +15,22 @@ export default defineConfig({
         src: "./src/assets/logo.svg",
       },
       plugins: [starlightThemeRapide()],
+      customCss: ["./src/styles/custom.css"],
+      head: [
+        {
+          tag: "script",
+          attrs: {},
+          content: `
+            (function() {
+              const storedTheme = typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+              if (!storedTheme) {
+                localStorage.setItem('starlight-theme', 'dark');
+                document.documentElement.setAttribute('data-theme', 'dark');
+              }
+            })();
+          `,
+        },
+      ],
       social: [{ icon: "github", label: "GitHub", href: "https://github.com/mgcrea/react-native-tailwind" }],
       sidebar: [
         {

docs/src/styles/custom.css

@@ -0,0 +1,14 @@
+/* Custom theme colors - Blue accent */
+:root {
+  /* Light mode accent colors */
+  --sl-color-accent-low: #1e3a5f;
+  --sl-color-accent: #3b82f6;
+  --sl-color-accent-high: #60a5fa;
+}
+
+/* Dark mode accent colors */
+:root[data-theme="dark"] {
+  --sl-color-accent-low: #1e40af;
+  --sl-color-accent: #3b82f6;
+  --sl-color-accent-high: #93c5fd;
+}