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);
  }
}