Skip to content

fix(admin): navbar theme not applied on page load — defer to DOMContentLoaded#158

Merged
marpisco merged 2 commits into
mainfrom
dev
May 23, 2026
Merged

fix(admin): navbar theme not applied on page load — defer to DOMContentLoaded#158
marpisco merged 2 commits into
mainfrom
dev

Conversation

@marpisco
Copy link
Copy Markdown
Owner

@marpisco marpisco commented May 23, 2026

theme-switcher.js was loaded in <head>, before #admin-navbar existed in the DOM. The initial applyTheme() call silently failed to switch navbar classes (navbar-dark/bg-darknavbar-light/bg-light).

Only the MatchMedia change listener worked — the navbar only got correct theme classes after a live OS theme toggle, never on initial page load or after navigating to another admin page.

What changed

  • data-bs-theme is still set immediately in <head> (avoids flash of wrong theme)
  • window.__applyNavbarTheme exposed by theme-switcher.js
  • Inline <script> placed immediately after the navbar HTML calls it synchronously — runs before paint, no flash
  • DOMContentLoaded listener retained as fallback
  • MatchMedia change listener handles live OS theme toggles

Closes #157

theme-switcher.js ran in <head> before #admin-navbar existed in the DOM,
so the initial navbar class switch (navbar-dark/bg-dark ↔ navbar-light/bg-light)
silently failed. Only the MatchMedia change listener worked — meaning the
navbar only got correct classes after a live OS theme toggle, never on
initial page load.

Split into: set data-bs-theme immediately (avoids flash), apply navbar
classes deferred via DOMContentLoaded, and the change listener now calls
the unified applyTheme() for both.
Copilot AI review requested due to automatic review settings May 23, 2026 22:41
@github-actions
Copy link
Copy Markdown

📝 Manual Update Required? It looks like you've modified core logic. Please check if the user manual needs a refresh! @marpisco

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Expose window.__applyNavbarTheme from theme-switcher.js and call it via an
inline <script> placed immediately after the navbar HTML. This runs
synchronously before paint, eliminating the visible flash of the wrong
navbar theme on initial load.

DOMContentLoaded listener retained as a fallback; MatchMedia change
listener still handles live OS theme toggles.
@github-actions
Copy link
Copy Markdown

📝 Manual Update Required? It looks like you've modified core logic. Please check if the user manual needs a refresh! @marpisco

@marpisco marpisco merged commit 413264e into main May 23, 2026
6 checks passed
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.

Header Painel Administrativo muda de cores

2 participants