[BUG]: Electron logo icon briefly disappears and reappears during theme change

[CezarDrumea]

Problem Description

Brief Summary

When users click the theme change icon, the Electron logo icon momentarily disappears and then quickly reappears. This flickering effect occurs every time a theme change is initiated.

Steps to Reproduce

1. Launch the application.
2. Locate the theme change icon.
3. Click on the theme change icon to initiate a switch between dark mode and light mode.
4. Carefully observe the area where the Electron logo is displayed during the theme transition.

Expected Behavior

Transitioning between themes should only alter theme-specific attributes (colors, fonts, etc.) without causing the logo to flicker.

Actual Behavior

Upon initiating a theme change via the theme switcher icon, the Electron logo icon quickly disappears and then reappears, creating a noticeable flicker.

Screenshots

[JasonFengGit]

Hi @erickzhao, I compared Electron website with Docusaurus.io, the logo on Docusaurus.io also has a blinking effect when changing dark/light themes, but the position of its title does not move. The key difference I found is that Electron website does not specify the height and width of the logo.

We should be able to achieve the same result by adding height and width specification in docusaurus.config.ts

[JasonFengGit]

Tested on my local environment and the results are not as expected, digging deeper into this.

[JasonFengGit]

There are some previous discussions here: facebook/docusaurus#8188

[JasonFengGit]

Hi @erickzhao, may I get some inputs from you about this issue?

[JasonFengGit]

Hi @erickzhao, found a workaround and drafted a PR #543.

Built and tested on my local environment (windows, chrome) with different window sizes.

[JasonFengGit]

PR #543 ready