Dynamically update theme color meta tag based on theme

bobsingor · bobsingor · commit 15fb317918ac · 2025-12-11T22:27:15.000+02:00
Added logic in ThemeProvider to update the &lt;meta name="theme-color"&gt; tag according to the user's selected or system theme. Also set a default themeColor in layout metadata as a fallback. Additionally, introduced an 'active' method to the left-action-menu command in the snippet config.
diff --git a/snippet/src/config/commands.ts b/snippet/src/config/commands.ts
@@ -337,6 +337,10 @@ export const commands: Record<string, Command<State>> = {
         documentId,
       );
     },
+    active: ({ state, documentId }) => {
+      const uiState = state.plugins['ui']?.documents[documentId];
+      return uiState?.openMenus['left-action-menu'] !== undefined;
+    },
   },
 
   // ─────────────────────────────────────────────────────────
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -12,6 +12,9 @@ export const metadata = {
     apple: '/apple-touch-icon.png',
   },
   manifest: `/site.webmanifest`,
+  // Initial theme color - will be dynamically updated by ThemeProvider
+  // based on user's theme preference (system or manual)
+  themeColor: '#ffffff',
 }
 
 export default async function RootLayout({
diff --git a/website/src/components/theme-provider.tsx b/website/src/components/theme-provider.tsx
@@ -1,11 +1,39 @@
 'use client'
 
 import * as React from 'react'
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes'
+
+const THEME_COLORS = {
+  light: '#ffffff',
+  dark: '#030712', // gray-950
+}
+
+function ThemeColorMeta() {
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Render nothing on server, fallback handled by layout.tsx metadata
+  if (!mounted) return null
+
+  const color =
+    resolvedTheme === 'dark' ? THEME_COLORS.dark : THEME_COLORS.light
+
+  // Next.js App Router automatically hoists <meta> tags to <head>
+  return <meta name="theme-color" content={color} />
+}
 
 export function ThemeProvider({
   children,
   ...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return (
+    <NextThemesProvider {...props}>
+      <ThemeColorMeta />
+      {children}
+    </NextThemesProvider>
+  )
 }

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,9 @@ export const metadata = {`
`12`	`12`	`apple: '/apple-touch-icon.png',`
`13`	`13`	`},`
`14`	`14`	manifest: `/site.webmanifest`,
	`15`	`+ // Initial theme color - will be dynamically updated by ThemeProvider`
	`16`	`+ // based on user's theme preference (system or manual)`
	`17`	`+ themeColor: '#ffffff',`
`15`	`18`	`}`
`16`	`19`
`17`	`20`	`export default async function RootLayout({`