Skip to content

core: add theme-aware source icons#20176

Open
dominic-r wants to merge 15 commits intomainfrom
sdko/source-icon-invert-fix
Open

core: add theme-aware source icons#20176
dominic-r wants to merge 15 commits intomainfrom
sdko/source-icon-invert-fix

Conversation

@dominic-r
Copy link
Copy Markdown
Member

@dominic-r dominic-r commented Feb 11, 2026

This PR makes source icons theme-aware across the UI.

Built-in sources can now expose light and dark icon variants through icon_themed_urls, and the source consumers that render icons now choose the correct variant for the active theme. The PR also keeps icon_url populated for compatibility, so existing clients do not lose default source icons.

Why: Before this change, source icons were effectively single-variant in many places. Dark mode either used the same asset everywhere or relied on inversion, which is fragile and breaks for icons that need distinct artwork per theme.

Some notes: https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1770339223464779?thread_ts=1770338237.366879&cid=C08C0SCU2JV

Closes: #11387

Some screenshots on Light / Dark mode:

image image

@dominic-r dominic-r self-assigned this Feb 11, 2026
@dominic-r dominic-r added area:frontend Features or issues related to the browser, TypeScript, Node.js, etc area:backend area:docs Features or issues related to Docusaurus labels Feb 11, 2026
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 11, 2026

Deploy Preview for authentik-docs ready!

Name Link
🔨 Latest commit 0d3a638
🔍 Latest deploy log https://app.netlify.com/projects/authentik-docs/deploys/69d80938c26ff900080563b6
😎 Deploy Preview https://deploy-preview-20176--authentik-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 11, 2026

Deploy Preview for authentik-storybook ready!

Name Link
🔨 Latest commit 91411ee
🔍 Latest deploy log https://app.netlify.com/projects/authentik-storybook/deploys/69d92b30a8742700083e176b
😎 Deploy Preview https://deploy-preview-20176--authentik-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 11, 2026

Deploy Preview for authentik-integrations ready!

Name Link
🔨 Latest commit 0d3a638
🔍 Latest deploy log https://app.netlify.com/projects/authentik-integrations/deploys/69d8093883552d000855f4c1
😎 Deploy Preview https://deploy-preview-20176--authentik-integrations.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dominic-r dominic-r force-pushed the sdko/source-icon-invert-fix branch from 5e5194f to df97324 Compare April 8, 2026 17:04
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 8, 2026

Codecov Report

❌ Patch coverage is 88.62275% with 19 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.25%. Comparing base (76a5e62) to head (91411ee).
⚠️ Report is 12 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
authentik/core/models.py 86.20% 8 Missing ⚠️
authentik/sources/oauth/models.py 84.21% 6 Missing ⚠️
authentik/core/api/utils.py 89.47% 4 Missing ⚠️
authentik/admin/files/backends/static.py 90.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #20176      +/-   ##
==========================================
- Coverage   92.26%   92.25%   -0.02%     
==========================================
  Files        1032     1032              
  Lines       59654    59755     +101     
  Branches     2537     2537              
==========================================
+ Hits        55042    55128      +86     
- Misses       4547     4564      +17     
+ Partials       65       63       -2     
Flag Coverage Δ
conformance 37.02% <38.32%> (-0.02%) ⬇️
e2e 43.01% <71.85%> (+0.05%) ⬆️
integration 33.95% <38.32%> (-0.01%) ⬇️
rust 60.58% <ø> (+0.07%) ⬆️
unit 91.85% <85.62%> (-0.04%) ⬇️
unit-migrate 91.95% <85.62%> (-0.04%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@dominic-r dominic-r marked this pull request as ready for review April 8, 2026 18:41
@dominic-r dominic-r requested review from a team as code owners April 8, 2026 18:41
@dominic-r dominic-r changed the title sources: Refactor icon handling core: add theme-aware source icons Apr 8, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 8, 2026

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-91411ee5efb6a76d53aa55859a259e761d756266
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
    image:
        repository: ghcr.io/goauthentik/dev-server
        tag: gh-91411ee5efb6a76d53aa55859a259e761d756266

Afterwards, run the upgrade commands from the latest release notes.

Copy link
Copy Markdown
Contributor

@kensternberg-authentik kensternberg-authentik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It isn't broken, but there are two places where there's either cut-and-paste or code re-implementation. I request but do not require that you consider updating those.

@dominic-r dominic-r force-pushed the sdko/source-icon-invert-fix branch from b437d80 to 0d3a638 Compare April 9, 2026 20:16
Copy link
Copy Markdown
Member

@BeryJu BeryJu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

backend looks mostly good, some thoughts though:

I'd prefer if we could implement this in a less-theme focused manner, for example ThemedUrlSerializer -> DynamicURLSerializer to also allow things like different variants for high contrast, reduced motion, and maybe even locale

@dominic-r dominic-r requested a review from a team as a code owner April 10, 2026 16:42
@dominic-r dominic-r requested review from BeryJu and removed request for a team April 10, 2026 16:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:backend area:docs Features or issues related to Docusaurus area:frontend Features or issues related to the browser, TypeScript, Node.js, etc

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

Source icon color inverted in dark mode

3 participants