feat: prevent ugly overscroll bounce on all browsers and sync mobile status bar w/ theme (#527)

feat: prevent overscroll bounce on all browsers and sync mobile status bar with theme

- Add overscroll-behavior: none to prevent bounce effect across all browsers
- Implement dynamic theme-color meta tag that syncs with site theme toggle
- Add THEME_COLORS constant to utils for consistent color references
- Update ThemeProvider to set status bar color on theme change

Co-authored-by: Tanner Linsley <tannerlinsley@gmail.com>

Author: muzzlol

src/components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { createClientOnlyFn, createIsomorphicFn } from '@tanstack/react-start'
 import * as React from 'react'
 import { createContext, ReactNode, useEffect, useState } from 'react'
 import { z } from 'zod'
+import { THEME_COLORS } from '~/utils/utils'
 
 const themeModeSchema = z.enum(['light', 'dark', 'auto'])
 const resolvedThemeSchema = z.enum(['light', 'dark'])
@@ -46,6 +47,14 @@ const updateThemeClass = createClientOnlyFn((themeMode: ThemeMode) => {
   if (themeMode === 'auto') {
     root.classList.add('auto')
   }
+
+  const metaThemeColor = document.querySelector('meta[name="theme-color"]')
+  if (metaThemeColor) {
+    metaThemeColor.setAttribute(
+      'content',
+      newTheme === 'dark' ? THEME_COLORS.dark : THEME_COLORS.light
+    )
+  }
 })
 
 const setupPreferredListener = createClientOnlyFn(() => {

src/routes/__root.tsx

@@ -33,6 +33,7 @@ import { authClient } from '../utils/auth.client'
 
 import { LibrariesLayout } from './_libraries/route'
 import { TanStackUser } from 'convex/auth'
+import { THEME_COLORS } from '~/utils/utils'
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
@@ -49,6 +50,16 @@ export const Route = createRootRouteWithContext<{
         name: 'viewport',
         content: 'width=device-width, initial-scale=1',
       },
+      {
+        name: 'theme-color',
+        content: THEME_COLORS.light,
+        media: '(prefers-color-scheme: light)',
+      },
+      {
+        name: 'theme-color',
+        content: THEME_COLORS.dark,
+        media: '(prefers-color-scheme: dark)',
+      },
       ...seo({
         title:
           'TanStack | High Quality Open-Source Software for Web Developers',

src/styles/app.css

@@ -68,6 +68,7 @@ button {
   html,
   body {
     @apply text-gray-900 bg-gray-50 dark:bg-gray-900 dark:text-gray-200;
+    overscroll-behavior: none;
   }
 
   .using-mouse * {

src/utils/utils.ts

@@ -175,3 +175,10 @@ export async function logTime<T>(
   console.log(`${lable}: ${(end - start).toLocaleString()} ms`)
   return result as any
 }
+
+export const THEME_COLORS = {
+  light: '#f9fafb', // Tailwind gray-50
+  dark: '#101828', // Tailwind gray-900
+} as const
+
+export type ThemeColor = keyof typeof THEME_COLORS