fix(ui-components): guard ThemeToggle against invalid stored theme

[shivxmsharma]

Description

This PR fixes a runtime crash in ThemeToggle when currentTheme contains an unexpected value.

Previously, the component assumed currentTheme was always one of system | light | dark. If a stale or invalid value was persisted in localStorage (for example, invalid-theme), themeIcons[currentTheme] resolved to undefined, causing React to throw:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

The fix normalizes currentTheme to system when the value is not a known key, and uses the normalized value for both icon lookup and active item highlighting.

Validation

I validated the fix with the following steps:

1. Run the site locally.
2. In browser console, execute:

localStorage.setItem('theme', 'invalid-theme'); location.reload();

3. Before fix: app crashes in ThemeToggle with "Element type is invalid".
4. After fix: no crash; theme toggle renders and safely falls back to system behavior.

Related Issues

Fixes #8729

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nodejs-org	Ready	Preview	Mar 17, 2026 5:45pm

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

[Copilot]

Pull request overview

Fixes a runtime crash in ThemeToggle by normalizing an unexpected/invalid currentTheme value (e.g., from stale localStorage) to a safe fallback before rendering the trigger icon and determining the active dropdown item.

Changes:

• Normalize currentTheme to 'system' when it’s not a known theme key.
• Use the normalized theme for icon lookup and active item highlighting.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[avivkeller]

I don't think we need a type guard here, we know that it's set by us

[shivxmsharma]

Thanks for the review, that makes sense. If invalid localStorage theme values are considered out of scope and the project prefers relying on the controlled write path, I’m happy to close this out.