Skip to content

fix(ui): update favicon dynamically based on app theme#4225

Open
GuillaumeLecomte1 wants to merge 3 commits intoDokploy:canaryfrom
GuillaumeLecomte1:fix/favicon-theme-toggle
Open

fix(ui): update favicon dynamically based on app theme#4225
GuillaumeLecomte1 wants to merge 3 commits intoDokploy:canaryfrom
GuillaumeLecomte1:fix/favicon-theme-toggle

Conversation

@GuillaumeLecomte1
Copy link
Copy Markdown

@GuillaumeLecomte1 GuillaumeLecomte1 commented Apr 14, 2026

Summary

The favicon did not switch between light and dark variants when toggling the app theme because it relied on OS prefers-color-scheme media query instead of the app-level theme state.

Changes

New files:

  • icon-light.svg - favicon with fill=black
  • icon-dark.svg - favicon with fill=white

Modified:

  • WhitelabelingProvider.tsx - Added useTheme from next-themes and logic to select icon based on resolvedTheme. Custom faviconUrl still takes precedence.

Closes #4100

Greptile Summary

This PR fixes favicon theming by adding icon-dark.svg and icon-light.svg variants and using resolvedTheme from next-themes to select the correct one at the app level, rather than relying on the OS prefers-color-scheme media query. The early-return guard was also removed so the theme-aware <link rel="icon"> renders immediately on page load.

Confidence Score: 5/5

Safe to merge — the implementation is correct and all edge cases are handled.

The changes are well-implemented. The ternary correctly handles the undefined pre-hydration state by falling back to the existing icon. Custom faviconUrl takes precedence. The key prop prevents duplicate link elements. SVG fills are correct for each theme variant.

No files require special attention.

Reviews (2): Last reviewed commit: "[autofix.ci] apply automated fixes" | Re-trigger Greptile

Add icon-light.svg and icon-dark.svg with fixed fills (black/white)
instead of relying on CSS prefers-color-scheme media query.

Update WhitelabelingProvider to use useTheme() and switch favicon
based on resolvedTheme (dark/light/unknown).

When custom faviconUrl is set, it takes precedence.

Closes Dokploy#4100.
@dosubot dosubot Bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Apr 14, 2026
Comment thread apps/dokploy/components/proprietary/whitelabeling/whitelabeling-provider.tsx Outdated
The previous implementation returned null when config was not yet loaded,
preventing the theme-aware favicon from rendering during initial page load.

Now uses optional chaining (config?.metaTitle, config?.customCss) throughout
so the <link rel="icon"> always renders with the correct theme-aware favicon
regardless of config loading state.

Fixes P1 issue from code review.
@dosubot dosubot Bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Apr 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Favicon does not update on theme toggle without page reload

1 participant