Task: Add noscript to theme, style, and font toggle buttons #487

New issue

Open

opened 2026-04-16 07:11:53 +00:00 by jjalangtry · 0 comments

jjalangtry commented

2026-04-16 07:11:53 +00:00

(Migrated from github.com)

Problem

All three toggles (dark mode, style mode, font mode) use custom hooks (`useTheme`, `useStyleMode`, `useFontMode`) and render a default/empty state before hydration. Without JS, the toggles are non-functional buttons that do nothing when clicked.

Affected Files

`next/components/common/DarkModeToggle.tsx`
`next/components/common/StyleModeToggle.tsx`
`next/components/common/FontModeToggle.tsx`

Fix

Low severity — the site is perfectly usable in its default theme. Two options:

Add a ` \`\`\`

## Problem All three toggles (dark mode, style mode, font mode) use custom hooks (\`useTheme\`, \`useStyleMode\`, \`useFontMode\`) and render a default/empty state before hydration. Without JS, the toggles are non-functional buttons that do nothing when clicked. ## Affected Files - \`next/components/common/DarkModeToggle.tsx\` - \`next/components/common/StyleModeToggle.tsx\` - \`next/components/common/FontModeToggle.tsx\` ## Fix Low severity — the site is perfectly usable in its default theme. Two options: 1. Add a \`<noscript>\` style rule to hide the toggle buttons entirely (no point showing non-functional controls) 2. Add a \`title\` attribute explaining JS is needed \`\`\`html <noscript> <style> .theme-toggle, .style-toggle, .font-toggle { display: none; } </style> </noscript> \`\`\`