feat: hide theme toggle when colorScheme is statically set

Amp-Thread-ID: https://ampcode.com/threads/T-019c30b1-cab4-75ae-9638-ebd1d8f0c1ae
Co-authored-by: Amp <amp@ampcode.com>

Author: jxom

src/react/Head.tsx

@@ -9,7 +9,9 @@ export function Head() {
   const { path: pathname } = useRouter()
   const { frontmatter } = MdxPageContext.use()
 
-  const { basePath, baseUrl, iconUrl, logoUrl, ogImageUrl, renderStrategy } = config
+  const { basePath, baseUrl, colorScheme, iconUrl, logoUrl, ogImageUrl, renderStrategy } = config
+
+  const staticScheme = colorScheme !== 'light dark'
 
   const title = frontmatter?.title ?? config.title
   const titleTemplate = title.includes(config.title) ? undefined : config.titleTemplate
@@ -40,12 +42,14 @@ export function Head() {
   return (
     <>
       {/* Theme initialization (prevents FOUC) */}
-      <script
-        // biome-ignore lint/security/noDangerouslySetInnerHtml: blocking script to prevent FOUC
-        dangerouslySetInnerHTML={{
-          __html: `(function(){try{var t=localStorage.getItem('vocs-theme');if(t==='light'||t==='dark'){document.documentElement.style.colorScheme=t}else if(window.matchMedia('(prefers-color-scheme:dark)').matches){document.documentElement.style.colorScheme='dark'}else if(window.matchMedia('(prefers-color-scheme:light)').matches){document.documentElement.style.colorScheme='light'}else{document.documentElement.style.colorScheme='dark'}}catch(e){}})()`,
-        }}
-      />
+      {!staticScheme && (
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: blocking script to prevent FOUC
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('vocs-theme');if(t==='light'||t==='dark'){document.documentElement.style.colorScheme=t}else if(window.matchMedia('(prefers-color-scheme:dark)').matches){document.documentElement.style.colorScheme='dark'}else if(window.matchMedia('(prefers-color-scheme:light)').matches){document.documentElement.style.colorScheme='light'}else{document.documentElement.style.colorScheme='dark'}}catch(e){}})()`,
+          }}
+        />
+      )}
 
       {/* Robots  */}
       <meta

src/react/Layout.client.tsx

@@ -26,8 +26,11 @@ export function Main(props: Main.Props) {
 
   const { layout, showAskAi, showSearch, showSidebar, showTopNav, showLogo, showOutline } =
     useLayout()
+  const { colorScheme } = useConfig()
   const { Footer, OutlineFooter, SidebarHeader } = useSlots()
 
+  const showThemeToggle = colorScheme === 'light dark'
+
   const sidebarScrollRef = React.useRef<HTMLDivElement>(null)
   const topGutterRef = useTopGutterRef()
 
@@ -90,7 +93,7 @@ export function Main(props: Main.Props) {
                 data-v-sidebar-footer-content
               >
                 <Socials.Socials />
-                <ThemeToggle.ThemeToggle />
+                {showThemeToggle && <ThemeToggle.ThemeToggle />}
               </div>
             </div>
           </aside>

src/react/Root.client.tsx

@@ -42,7 +42,9 @@ function applyTheme(theme: 'light' | 'dark' | 'system') {
 }
 
 export function Root_client({ children }: { children: React.ReactNode }) {
-  const { accentColor } = useConfig()
+  const { accentColor, colorScheme } = useConfig()
+
+  const staticScheme = colorScheme !== 'light dark'
 
   // react to theme config changes.
   useEffect(() => {
@@ -55,14 +57,15 @@ export function Root_client({ children }: { children: React.ReactNode }) {
 
   // Listen for system theme changes (needed for pages without ThemeToggle)
   useEffect(() => {
+    if (staticScheme) return
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
     const handler = () => {
       const storedTheme = getStoredTheme()
       if (storedTheme === 'system') applyTheme('system')
     }
     mediaQuery.addEventListener('change', handler)
     return () => mediaQuery.removeEventListener('change', handler)
-  }, [])
+  }, [staticScheme])
 
   return (
     <NuqsAdapter>

src/react/internal/MobileNav.tsx

@@ -19,6 +19,9 @@ import * as ThemeToggle from './ThemeToggle.client.js'
 
 export function MobileNav(props: MobileNav.Props) {
   const { className } = props
+  const { colorScheme } = useConfig()
+
+  const showThemeToggle = colorScheme === 'light dark'
 
   const sidebarScrollRef = React.useRef<HTMLDivElement>(null)
 
@@ -65,7 +68,7 @@ export function MobileNav(props: MobileNav.Props) {
               data-v-mobile-nav-footer
             >
               <Socials.Socials />
-              <ThemeToggle.ThemeToggle />
+              {showThemeToggle && <ThemeToggle.ThemeToggle />}
             </div>
           </div>
         </Dialog.Popup>