Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Source icon color inverted in dark mode #11387

Open
larsl-net opened this issue Sep 15, 2024 · 1 comment
Open

Source icon color inverted in dark mode #11387

larsl-net opened this issue Sep 15, 2024 · 1 comment
Labels
bug/confirmed Confirmed bugs bug Something isn't working

Comments

@larsl-net
Copy link
Contributor

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
image

Light mode
image

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 larsl-net added the bug Something isn't working label Sep 15, 2024
@larsl-net
Copy link
Contributor Author

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

@BeryJu BeryJu added the bug/confirmed Confirmed bugs label Nov 7, 2024
@BeryJu BeryJu added this to the Future release milestone Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug/confirmed Confirmed bugs bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants