This post is an ongoing log of my contributions to open source projects, including issues and pull requests I've made. Since many contributors in some of these repositories are Chinese speakers, I usually submit issues and PRs in Chinese. In this post, I'll briefly describe these contributions in English, grouped by repository and listed in chronological order.

Ant-design (Github ★96.7k)

An enterprise-class UI design language and React UI library.

• [Pull Request] [Merged] docs: Replace old theme logic and fix iframe code previewer inconsistency

  This PR addresses issue #55763 and #55670.

  • Introduce isDark in SiteContext to decouple the actual theme and use it as the single source for other components, ensuring the nominal theme stays in sync with the actual theme.

  • Make the demo URL depend on isDark to force demo blocks to refresh when the theme changes.

• [Pull Request] [Merged] docs: Fix custom storage sync event

  This PR addresses issue #55750. The LocalStorage utility listens to two implementations: NativeStorage and CustomStorage. Both share the same shouldSync event:

  const shouldSync = (ev: StorageEvent) => {
    return ev && ev.key === key && ev.storageArea === storage
  }
  

  However, the CustomEvent structure looks like this:

  CustomEvent(ANT_SYNC_STORAGE_EVENT_KEY, {
    detail: { key, newValue, oldValue, storageArea: storage }
  })
  

  Because the data is wrapped inside detail, the CustomEvent listener cannot receive updates in the expected StorageEvent, which breaks theme synchronization.

  • This change adds support for synchronization events for the CustomStorage structure.

• [Issue] [Closed] docs: Theme display inconsistency between dark mode and auto mode

  • After introducing the logic for the site theme to follow the browser theme, there are still many legacy theme rules like the ones below, which can cause inconsistencies in how the theme is displayed.

    // theme : 'light' | 'dark' | 'auto'
    const isDark = theme.includes('dark');
    theme={isDark ? 'dark' : 'light'}
    

• [Issue] [Open] docs: Code demo displays incorrectly when switching themes

  • The code demo section that uses iframe is completely isolated from the rest of the page, so it does not update when the theme is switched.

• [Pull Request] [Merged] docs: fix auto theme mode

  This PR addresses issue #55339.

  • An auto mode was introduced but never actually used.
  • The site theme is controlled by two parts: styles generated from ./theme/themes/dark and the data-prefers-color attribute. However, in the previous code, switching to the auto theme did not update data-prefers-color.

  Solution:

  • This change adds support for tracking the system theme, updates the existing theme logic, adjusts how the data-prefers-color attribute is set, and updates how the background color is determined on the Index page.

Dumi (Github ★3.8k)

A static site generator for component library development.

• [Pull Request] [Open] fix: fix Previewer component under color scheme change with iframe key

  Relevant issue: #55670

  The antd site is built on the dumi frame and although it overrides the code Previewer, both still suffers from theme inconsistencies. Earlier we fixed the issue on the antd side; here we address them in the underlying dumi lib.

  Solution:

  • This changes listens to the theme preference and uses a key to force-refresh the iframe when switching themes, ensuing the colors stay in sync.

Textarea (Github ★30)

A pretty textarea react component used in ant design.

• [Issue] [Open] Input onChange trigger twice when input Chinese

  When input Chinese, onChange will trigger twice even input the single char.

• [Pull Request] [Open] fix: trigger onChange twice when using IME input

  In src/TextArea.tsx, a ChangeEventInfo parameter was added to the triggerChange method to distinguish the event source and suppress redundant onChange triggers.

React (Github ★241k)

• [Issue] [Open] [DevTools Bug]: CSS Animation Errors When Using Devtools

  The animation becomes abnormal when using DevTools 7.0.0, causing some existing React projects to display abnormally.