Broken styles when Authentik theme is set to Light but OS theme is Dark #7754
Description
Describe the bug
When user has dark theme preference of a Operation system value AND authentik is configured to use Light theme (e.g. via tenant setting) the dark theme will be partially applied together with light theme.
To Reproduce
Steps to reproduce the behavior:
-
Make sure you have dark theme configured in your OS.
-
In Authentik tenant settings (Admin UI -> System -> Tenants) set theme to Light. See config example below:
-
Navigate to the admin panel or user interface. You will see the mixture of the light and dark themes, so it is mostly light but icons and headers are white on a light background.
Expected behavior
Expected to see proper light theme.
Screenshots
Version and Deployment (please complete the following information):
- authentik version: 2023.10.4
- Deployment: docker-compose, helm
Additional context
I believe the problem is that it loads theme-dark.css with media="(prefers-color-scheme: dark)" regardless of the theme selected in authentik. So if user prefers dark theme on OS level the file will be loaded no matter want. An file itself doesn't have any selectors checking actual theme attribute. Possible solution might be to add theme attribute on the <html> tag level and then wrap all selector in theme-dark.css into [theme=dark].