Skip to content

[migrate] upgrade to TypeScript 6, Node.js 24, PNPM 11, Next.js 16, Koa 3, MobX-React-helper 0.5, MobX-GitHub 0.7, Undici 8, Globals 17, Lint-Staged 17, ESLint 10, Sentry 10 & other latest Upstream packages/actions - #59

Merged
TechQuery merged 8 commits into
mainfrom
copilot/fix-dark-theme-issue
Aug 6, 2026

Conversation

Copilot AI commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

PR-59 PR-59 PR-59 Powered by Pull Request Badge

Dark theme failed to activate on first load when the user's OS preference was dark — requiring a manual toggle to trigger it. Additionally, the production build was broken on Node.js 24 due to a removed Dirent API.

Dark theme (models/System.ts)

MobX reaction only fires on changes, not on initial value. If colorScheme was already 'dark' (from matchMedia at init time), no change ever occurred, so document.documentElement.dataset.bsTheme was never set.

Fix: Replace reaction with autorun, which runs immediately on registration and on every subsequent change:

// Before — never fires if colorScheme doesn't change from its initial value
disposer = reaction(
  () => this.colorScheme,
  scheme => { document.documentElement.dataset.bsTheme = scheme; ... },
);

// After — fires immediately on init AND on changes
disposer =
  !isServer() &&
  autorun(() => {
    document.documentElement.dataset.bsTheme = this.colorScheme;
    setCookie('colorScheme', this.colorScheme);
  });

Also adds !isServer() guard (prevents document access during SSR) and optional chaining on matchColorScheme() calls.

Article page build (pages/api/core.ts)

Dirent.path returns undefined in Node.js ≥ 24 — it was replaced by Dirent.parentPath. This caused readdir to be called with 'pagesundefined/...', crashing static generation for /article.

Fix: Use node.parentPath with a fallback to the legacy node.path for backward compatibility:

const parentPath = node.parentPath ?? (node as unknown as { path: string }).path;

Human changes

  1. [migrate] upgrade to TypeScript 6, Node.js 24, PNPM 11, Next.js 16, Koa 3, MobX-React-helper 0.5, MobX-GitHub 0.7, Undici 8, Globals 17, Lint-Staged 17, ESLint 10, Sentry 10 & other latest Upstream packages/actions
  2. [migrate] replace Babel with SWC to compile ES decorator (resolve 升级 Next-Bootstrap-ts 脚手架基础设施,并修复细节 bug #60)
  3. [migrate] staticify Example page with SSG wrappers (resolve 页面静态化改造 #27)
  4. [optimize] Folder structure & Library modules
  5. [fix] some detail bugs

Copilot AI linked an issue Aug 3, 2026 that may be closed by this pull request
Copilot AI added 2 commits August 3, 2026 12:23
…action

Dark theme failed to apply on first page load when the user's system
preference was dark. This happened because MobX `reaction` only fires
when the observed value *changes* — if `colorScheme` was already `'dark'`
from the `matchMedia` initialiser, no change event ever fired, so
`document.documentElement.dataset.bsTheme` was never set.

Replacing `reaction` with `autorun` ensures the theme attribute is
applied immediately when the store is first instantiated on the client,
and re-applied on every subsequent change.

Also added optional chaining (`?.`) on `matchColorScheme()` calls to
guard against `undefined` when `matchMedia` is unavailable (e.g. SSR),
and wrapped the disposer in an `!isServer()` guard to prevent
referencing `document` during server-side rendering.
1. models/System.ts — Dark theme not applied on first load (closes #54):
   - Replace MobX `reaction` with `autorun` so the Bootstrap `data-bs-theme`
     attribute is set immediately on client-side init, not only on changes.
   - Add `!isServer()` guard so `document` is never accessed during SSR.
   - Add optional chaining `?.` on `matchColorScheme()` calls to prevent
     a TypeError when `matchMedia` is unavailable (e.g. SSR environment).

2. pages/api/core.ts — Build failure on Node.js 24:
   - `Dirent.path` is `undefined` in Node.js ≥ 24; use `Dirent.parentPath`
     with a backward-compat fallback so the article page pre-renders correctly.
Copilot AI changed the title [WIP] Fix dark theme not applying on article page fix: dark theme not applied on initial page load; fix Node.js 24 build failure in article page Aug 3, 2026
Copilot AI requested a review from TechQuery August 3, 2026 12:32
MobX-React-helper 0.5, MobX-GitHub 0.7, Undici 8, Globals 17, Lint-Staged 17, ESLint 10, Sentry 10 & other latest Upstream packages/actions
[optimize] Folder structure & Library modules
@TechQuery TechQuery added the feature New feature or request label Aug 3, 2026
@TechQuery TechQuery changed the title fix: dark theme not applied on initial page load; fix Node.js 24 build failure in article page [migrate] upgrade to Node.js 24, PNPM 11, Next.js 16, Koa 3, MobX-React-helper 0.5, MobX-GitHub 0.7, Undici 8, Globals 17, Lint-Staged 17, ESLint 10, Sentry 10 & other latest Upstream packages/actions Aug 3, 2026
@TechQuery
TechQuery marked this pull request as ready for review August 3, 2026 23:13
@TechQuery TechQuery changed the title [migrate] upgrade to Node.js 24, PNPM 11, Next.js 16, Koa 3, MobX-React-helper 0.5, MobX-GitHub 0.7, Undici 8, Globals 17, Lint-Staged 17, ESLint 10, Sentry 10 & other latest Upstream packages/actions [migrate] upgrade to TypeScript 6, Node.js 24, PNPM 11, Next.js 16, Koa 3, MobX-React-helper 0.5, MobX-GitHub 0.7, Undici 8, Globals 17, Lint-Staged 17, ESLint 10, Sentry 10 & other latest Upstream packages/actions Aug 6, 2026
@TechQuery
TechQuery merged commit 90c0fbb into main Aug 6, 2026
1 check passed
@TechQuery
TechQuery deleted the copilot/fix-dark-theme-issue branch August 6, 2026 06:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

升级 Next-Bootstrap-ts 脚手架基础设施,并修复细节 bug article 页面暗色主题响应失败 页面静态化改造

2 participants