docs: fix meta tag theme color (#3214)

* fix: meta theme color * set `content` value for `<meta name="theme-color">` based on background value for light and dark themes --------- Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
shuding · Jan 10, 2025 · e11dbe0 · e11dbe0
1 parent 855c06d
commit e11dbe0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/.changeset/tricky-donuts-roll.md b/.changeset/tricky-donuts-roll.md
@@ -0,0 +1,7 @@
+---
+"nextra": minor
+"nextra-theme-blog": minor
+"nextra-theme-docs": minor
+---
+
+set `content` value for `<meta name="theme-color">` based on background value for light and dark themes
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,14 +1,12 @@
 import { NextraLogo, VercelLogo } from '@components/icons'
 import cn from 'clsx'
-import type { Metadata, Viewport } from 'next'
+import type { Metadata } from 'next'
 import { Footer, Layout, Navbar } from 'nextra-theme-docs'
 import { Banner, Head } from 'nextra/components'
 import { getPageMap } from 'nextra/page-map'
 import type { FC, ReactNode } from 'react'
 import './globals.css'
 
-export const viewport: Viewport = Head.viewport
-
 export const metadata: Metadata = {
   description: 'Make beautiful websites with Next.js & MDX.',
   metadataBase: new URL('https://nextra.site'),

diff --git a/packages/nextra/src/client/components/head.tsx b/packages/nextra/src/client/components/head.tsx
@@ -73,7 +73,7 @@ type HeadProps = Partial<z.input<typeof headSchema>> & {
   children?: ReactNode
 }
 
-const Head_: FC<HeadProps> = ({ children, ...props }) => {
+export const Head: FC<HeadProps> = ({ children, ...props }) => {
   const { data, error } = headSchema.safeParse(props)
   if (error) {
     throw fromZodError(error)
@@ -111,6 +111,16 @@ html {
     <head>
       {children}
       <style>{style}</style>
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: light)"
+        content={`rgb(${backgroundColor.light})`}
+      />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: dark)"
+        content={`rgb(${backgroundColor.dark})`}
+      />
       {faviconGlyph && (
         <link
           rel="icon"
@@ -127,12 +137,3 @@ function makePrimaryColor(val: string): string {
   const l = `calc(var(--nextra-primary-lightness) ${val})`
   return `hsl(${h + s + l})`
 }
-
-export const Head = Object.assign(Head_, {
-  viewport: {
-    themeColor: [
-      { media: '(prefers-color-scheme: light)', color: '#fff' },
-      { media: '(prefers-color-scheme: dark)', color: '#111' }
-    ]
-  }
-})