Source icon color inverted in dark mode

[larsl-net]

Describe the bug
When using an OAuth Source for login, the Icon of the provider gets inverted when using the dark mode.
In the screenshot, the GitLab icon is shown in blue instead of orange.

To Reproduce
Steps to reproduce the behavior:

1. Create a OAuth source under Federation and Social login
2. Add a icon ex. GitLab Logo
3. Add source to Identification Stage
4. See broken icon color on login page

Expected behavior
Icons are shown with original colors

Screenshots
Dark mode

Light mode

Logs
Output of docker-compose logs or kubectl logs respectively

Version and Deployment (please complete the following information):

• authentik version: 2024.8.1
• Deployment: docker-compose
• Browser: Firefox and Brave

Additional context
Add any other context about the problem here.

[larsl-net]

I was able to build simple a workaround with the following custom CSS, which works for the source icons in the authentication flow and the user settings. Maybe there are more points where the colors are inverted, and this is only tested with version 2024.8.2.

/* User customisable */
@media (prefers-color-scheme: dark){
  body > ak-flow-executor > ak-locale-context > div.pf-c-page__drawer.style-scope.ak-flow-executor > div > div > div > div > div > div > div > ak-stage-identification > footer > ul > li > button > span > img,
  li.pf-c-data-list__item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > img:nth-child(1) {
      filter: invert(0);
  }
}

[wegylexy]

@media (prefers-color-scheme: dark) {
  .pf-c-login__main-footer-links-item img, .pf-c-login__main-footer-links-item .fas {
      filter: none;
  }
}

for 2025.6.1

[functionaldude]

this fix stopped working with 2025.12.1 and the problem is back

[larsl-net]

Custom CSS is broken in 2025.12 based on #19556

This CSS should theoretically work.

@media (prefers-color-scheme: dark) {
  .pf-c-login__main-footer-links-item img,
  .pf-c-login__main-footer-links-item .fas,
  img.ak-stage-identification,
  .pf-c-button__icon.ak-stage-identification .fas.ak-stage-identification,
  .pf-c-data-list__cell img
  {
      filter: invert(0) !important;
  }
}

[functionaldude]

@larsl-net thank you for the suggestion! I just tried it out and it does not seem to work. My assumption is that the problem is shadow-dom related

[MaxValue]

The solution would be somewhat like

ak-flow-executor::part(source-icon) {
  filter: unset !important;
}

though I am not sure how the exportparts feature works exactly.

In any case this solution cannot work currently because the source-icon part is currently not exported.

[Mmx233]

It seems there have been some changes to adopted-style-sheet injection in 2025.12; brand CSS is no longer being injected into deep Shadow DOM elements.