Skip to content

feat(react): add keyboard shortcuts for theme switching - #1250

Open
btea wants to merge 2 commits into
nodejs:mainfrom
btea:feat/theme-toggle-keyboard-shortcuts
Open

btea wants to merge 2 commits into
nodejs:mainfrom
btea:feat/theme-toggle-keyboard-shortcuts

Conversation

@btea

@btea btea commented Nov 7, 2026 •

Copy link
Copy Markdown
Contributor

Description

close #1167

Validation

image

Related Issues

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run node --run test and all tests passed.
  • I have check code formatting with node --run format:check & node --run lint.
  • I've covered new added functionality with unit tests if necessary.

@btea
btea requested a review from a team as a code owner November 7, 2026 13:58
@vercel

vercel Bot commented Nov 7, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
api-docs-tooling Ready Ready Preview Nov 7, 2026 2:07pm UTC

Request Review

@codecov

codecov Bot commented Nov 7, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.13%. Comparing base (9d02e94) to head (87dcdbf).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1250      +/-   ##
==========================================
- Coverage   94.14%   94.13%   -0.01%     
==========================================
  Files         291      291              
  Lines       28908    28900       -8     
  Branches     2936     2932       -4     
==========================================
- Hits        27214    27206       -8     
  Misses       1672     1672              
  Partials       22       22              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

github-actions Bot commented Nov 7, 2026 •

Copy link
Copy Markdown
Contributor

api-links Generator

Performance estimate (single CI run)

  • Generation time: 25.6% slower (820.00 ms → 1.03 s)
  • Peak memory: 2.7% lower (283.63 MB → 276.03 MB)

json Generator

Performance estimate (single CI run)

  • Generation time: 39.0% slower (5.98 s → 8.31 s)
  • Peak memory: 5.4% lower (1.00 GB → 968.85 MB)

legacy-html Generator

Performance estimate (single CI run)

  • Generation time: 8.9% faster (11.52 s → 10.50 s)
  • Peak memory: 2.5% higher (1.43 GB → 1.47 GB)

legacy-json Generator

Performance estimate (single CI run)

  • Generation time: 21.9% faster (8.23 s → 6.43 s)
  • Peak memory: 13.7% lower (1015.46 MB → 876.24 MB)

llms-txt Generator

Performance estimate (single CI run)

  • Generation time: 23.6% slower (6.10 s → 7.54 s)
  • Peak memory: 3.5% higher (866.38 MB → 896.38 MB)

orama-db Generator

Performance estimate (single CI run)

  • Generation time: 2.5% faster (8.52 s → 8.31 s)
  • Peak memory: 6.1% higher (945.88 MB → 1003.18 MB)

web Generator

Output size: 62 files changed · net +325.00 B

File size details
File Main PR Change
assets/SearchBox-9n1mnHaB.js 84.55 KB — -84.55 KB (-100.0%)
assets/SearchBox-BnuUiH9L.js — 84.55 KB +84.55 KB
assets/dist-CnIJ8XGP.js 30.37 KB — -30.37 KB (-100.0%)
assets/dist-5G-mHxvb.js — 30.37 KB +30.37 KB
assets/SideBar-DHTYk6TC.js 25.53 KB — -25.53 KB (-100.0%)
assets/SideBar-BLSailVg.js — 25.53 KB +25.53 KB
assets/client-CqREPnK9.js 25.44 KB — -25.44 KB (-100.0%)
assets/client-BRRZVxaz.js — 25.44 KB +25.44 KB
assets/Combination-BqcNYhpf.js 16.07 KB — -16.07 KB (-100.0%)
assets/Combination-qxRvMJvD.js — 16.07 KB +16.07 KB
assets/ThemeToggle-3KIeJJUN.js — 13.92 KB +13.92 KB
assets/ThemeToggle-CwTAxrWI.js 13.61 KB — -13.61 KB (-100.0%)
assets/compat-DkeB9U1h.js 13.53 KB — -13.53 KB (-100.0%)
assets/compat-DmrStAXr.js — 13.53 KB +13.53 KB
assets/dist-BLH_Rr38.js 10.16 KB — -10.16 KB (-100.0%)
assets/dist-DEH20ZwF.js — 10.16 KB +10.16 KB
assets/Layout-BfF00dNX.js 10.04 KB — -10.04 KB (-100.0%)
assets/Layout-DYPKSepr.js — 10.04 KB +10.04 KB
assets/Tooltip-CnMYlYFs.js 7.84 KB — -7.84 KB (-100.0%)
assets/Tooltip-CiRy4EZE.js — 7.84 KB +7.84 KB
assets/dist-CLGhXHiW.js 6.95 KB — -6.95 KB (-100.0%)
assets/dist-Cc002Pxm.js — 6.95 KB +6.95 KB
assets/dist-Bv2VMEdQ.js 3.89 KB — -3.89 KB (-100.0%)
assets/dist-CsAIVqx6.js — 3.89 KB +3.89 KB
assets/CodeTabs-wEu7sdiy.js 3.81 KB — -3.81 KB (-100.0%)
assets/CodeTabs-BzkvMDIx.js — 3.81 KB +3.81 KB
assets/CodeBox-YXLF9NRO.js 3.36 KB — -3.36 KB (-100.0%)
assets/CodeBox-BV_w8yBZ.js — 3.36 KB +3.36 KB
assets/FunctionSignature-D8zqozIh.js 2.20 KB — -2.20 KB (-100.0%)
assets/FunctionSignature-By-T_4Ll.js — 2.20 KB +2.20 KB
assets/Banner-4fGaX6F9.js 2.04 KB — -2.04 KB (-100.0%)
assets/Banner-C7EAY7JK.js — 2.04 KB +2.04 KB
assets/ChangeHistory-D0IPdHvy.js 1.73 KB — -1.73 KB (-100.0%)
assets/ChangeHistory-D3s_5pVP.js — 1.73 KB +1.73 KB
assets/DataTag-CwRk7EUJ.js 834.00 B — -834.00 B (-100.0%)
assets/DataTag-Bq6HoT6X.js — 834.00 B +834.00 B
assets/DocumentationIndex-DJHHnKq0.js 833.00 B — -833.00 B (-100.0%)
assets/DocumentationIndex-C8SzVjat.js — 833.00 B +833.00 B
assets/classnames-B4RBm4Lf.js 745.00 B — -745.00 B (-100.0%)
assets/classnames-CcILl7TH.js — 745.00 B +745.00 B
assets/Badge-BbGRrcF2.js 597.00 B — -597.00 B (-100.0%)
assets/Badge-F9jwp3rb.js — 597.00 B +597.00 B
assets/AlertBox-CRH0CiNU.js 581.00 B — -581.00 B (-100.0%)
assets/AlertBox-IwJsojDi.js — 581.00 B +581.00 B
assets/ArrowUpRightIcon-GB8x2WWs.js 579.00 B — -579.00 B (-100.0%)
assets/ArrowUpRightIcon-Dpk32R2w.js — 579.00 B +579.00 B
assets/CodeBracketIcon-CDCxizh2.js 512.00 B — -512.00 B (-100.0%)
assets/CodeBracketIcon-CZSoI7Ka.js — 512.00 B +512.00 B
assets/dist-sScOyttL.js 477.00 B — -477.00 B (-100.0%)
assets/dist-DkVw7OMS.js — 477.00 B +477.00 B
assets/ChevronDownIcon-BmLGedWk.js 468.00 B — -468.00 B (-100.0%)
assets/ChevronDownIcon-BdMdNKSx.js — 468.00 B +468.00 B
assets/renderLabel-CchXvpBp.js 447.00 B — -447.00 B (-100.0%)
assets/renderLabel-CPvQFrL7.js — 447.00 B +447.00 B
assets/jsx-runtime-DGWrY2l7.js 405.00 B — -405.00 B (-100.0%)
assets/jsx-runtime-CX65Co_F.js — 405.00 B +405.00 B
assets/Blockquote-_Mfd8Z3h.js 167.00 B — -167.00 B (-100.0%)
assets/Blockquote-DJlvlL3N.js — 167.00 B +167.00 B
assets/useRemoteConfig-BX7tuC1U.js 116.00 B — -116.00 B (-100.0%)
assets/useRemoteConfig-C3Av6ySh.js — 116.00 B +116.00 B
assets/withIsland-wjSwvMAn.js 105.00 B — -105.00 B (-100.0%)
assets/withIsland-Cv5gS_Ed.js — 105.00 B +105.00 B

Performance estimate (single CI run)

  • Generation time: 53.6% slower (14.70 s → 22.58 s)
  • Peak memory: 2.9% lower (1.52 GB → 1.48 GB)

@bmuenzenmeyer

Copy link
Copy Markdown
Contributor

I'm -1 on this - both of those shortcuts have well-known uses and we should not interrupt user behavioral norms.
Do we need this?

@btea

btea commented Nov 11, 2026

Copy link
Copy Markdown
Contributor Author

The initial issue was that our top navigation bar disappeared as the page content scrolled down. As a result, we couldn't switch the theme color directly, like pressing ⌘+K to open a search pop-up.

Also, we lacked a button for quickly returning to the top of the page. Some modules have a lot of content, and when the viewed content is far from the top of the page, returning requires a lengthy scrolling operation, which is cumbersome. I personally prefer providing a quick and convenient button operation.

both of those shortcuts have well-known uses and we should not interrupt user behavioral norms. Do we need this?

Regarding this, my current implementation only provides an initial practical approach. If you approve of adding this feature, we can further consider more reasonable methods to avoid the problems you mentioned.

@mikeesto

Copy link
Copy Markdown
Member

I also can't really see the need for keyboard shortcuts for changing themes. But I can understand a scroll to top on longer pages

@btea

btea commented Nov 12, 2026

Copy link
Copy Markdown
Contributor Author

I also can't really see the need for keyboard shortcuts for changing themes. But I can understand a scroll to top on longer pages

This is more geared towards personal use cases. In the scrolling scenario mentioned earlier, when I am reading some content and leave for a long time in the middle, and then come back to continue reading later, if I want to switch themes, I have to scroll to the top to switch themes, and then scroll down to continue reading, which is quite cumbersome.

Of course, this is an optimization I see for my personal user experience. If you don't think it's necessary, I can turn it off.

This branch was successfully deployed

1 active deployment
Preview – api-docs-tooling — 87dcdbfa Deployed Nov 7, 2026 by vercel[bot]
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.

Can we add a keyboard shortcut to switch themes?

3 participants