Skip to content

fix(react): reflect system theme in toggle icon - #1013

Closed
mgalore wants to merge 3 commits into
nodejs:mainfrom
mgalore:fix/903-theme-toggle-icon
Closed

fix(react): reflect system theme in toggle icon#1013
mgalore wants to merge 3 commits into
nodejs:mainfrom
mgalore:fix/903-theme-toggle-icon

Conversation

@mgalore

@mgalore mgalore commented Aug 8, 2026

Copy link
Copy Markdown

Summary

  • render the light or dark icon when the saved preference is system
  • keep the icon synchronized with operating-system theme changes
  • add focused resolution coverage and a patch changeset

Fixes #903

Validation

  • npm test
  • node --run test:ci
  • node --run lint
  • node --run format:check

Signed-off-by: Jonathan Amponsah 82057176+mgalore@users.noreply.github.com

Signed-off-by: Jonathan Amponsah <82057176+mgalore@users.noreply.github.com>
@mgalore
mgalore requested a review from a team as a code owner August 8, 2026 06:17
@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
api-docs-tooling Ready Ready Preview Aug 10, 2026 6:06pm

Request Review

* Theme switcher.
*/
const Toggle = () => {
const [themePreference, setThemePreference] = useTheme();

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems like an unrelate rename.

* @param {boolean} systemSupportsDarkMode - Whether the OS currently prefers dark mode.
* @returns {'light'|'dark'} The theme currently displayed by the page.
*/
export const getDisplayedTheme = (preference, systemSupportsDarkMode) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a react hook.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@avivkeller I'm fairly sure this can be done on ui-components side? I thought this was done over there already, wondering if a change here is really needed. TRhe solution also doesn feel elegant...

@AugustinMauroy

Copy link
Copy Markdown
Member

also it's not seem fixing the issue

@AugustinMauroy

Copy link
Copy Markdown
Member

you didn't solve the issue. the goal is not to put what "sytem" preference resolve. the issue is when systems is selected the icon of the button should be the computer.

@mgalore

mgalore commented Aug 10, 2026

Copy link
Copy Markdown
Author

Thanks for the clarification. I removed the system-theme light/dark overlay; with system selected, the shared ThemeToggle now receives the system preference and therefore retains its computer icon after hydration. Verified with node --test packages/react/src/html/__tests__/generate.test.mjs, npm run format:check, npm run lint, and npm test (541 passing tests; lint has only the repository’s existing 3 warnings).

@ovflowd

ovflowd commented Aug 10, 2026

Copy link
Copy Markdown
Member

This PR accomplishes nothing and will be closed as low effort. For the author, please for the future actually validate what the PR is doing, don't overly rely on AI. It is genuinely a waste of maintainer time when all your replies are AI-generated. Please avoid such contributions in the future.

@ovflowd ovflowd closed this Aug 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

theme switcher initial state for icon is wrong

3 participants