web: toggle dark/light theme manually (#4876)

authentik/core/templates/base/skeleton.html

@@ -16,6 +16,7 @@
         {% block head_before %}
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/theme-dark.css' %}" media="(prefers-color-scheme: dark)">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/custom.css' %}" data-inject>
         <script src="{% static 'dist/poly.js' %}" type="module"></script>
         {% block head %}

authentik/tenants/api.py

@@ -1,10 +1,11 @@
 """Serializer for tenant models"""
 from typing import Any
 
+from django.db import models
 from drf_spectacular.utils import extend_schema
 from rest_framework.decorators import action
 from rest_framework.exceptions import ValidationError
-from rest_framework.fields import CharField, ListField
+from rest_framework.fields import CharField, ChoiceField, ListField
 from rest_framework.filters import OrderingFilter, SearchFilter
 from rest_framework.permissions import AllowAny
 from rest_framework.request import Request
@@ -59,6 +60,14 @@ class TenantSerializer(ModelSerializer):
         ]
 
 
+class Themes(models.TextChoices):
+    """Themes"""
+
+    AUTOMATIC = "automatic"
+    LIGHT = "light"
+    DARK = "dark"
+
+
 class CurrentTenantSerializer(PassiveSerializer):
     """Partial tenant information for styling"""
 
@@ -71,6 +80,12 @@ class CurrentTenantSerializer(PassiveSerializer):
         read_only=True,
         default=CONFIG.y("footer_links", []),
     )
+    ui_theme = ChoiceField(
+        choices=Themes.choices,
+        source="attributes.settings.theme.base",
+        default=Themes.AUTOMATIC,
+        read_only=True,
+    )
 
     flow_authentication = CharField(source="flow_authentication.slug", required=False)
     flow_invalidation = CharField(source="flow_invalidation.slug", required=False)

authentik/tenants/tests.py

@@ -7,6 +7,7 @@ from authentik.core.tests.utils import create_test_admin_user, create_test_tenan
 from authentik.events.models import Event, EventAction
 from authentik.lib.config import CONFIG
 from authentik.lib.utils.time import timedelta_from_string
+from authentik.tenants.api import Themes
 from authentik.tenants.models import Tenant
 
 
@@ -24,6 +25,7 @@ class TestTenants(APITestCase):
                 "branding_title": "authentik",
                 "matched_domain": tenant.domain,
                 "ui_footer_links": CONFIG.y("footer_links"),
+                "ui_theme": Themes.AUTOMATIC,
                 "default_locale": "",
             },
         )
@@ -42,6 +44,7 @@ class TestTenants(APITestCase):
                 "branding_title": "custom",
                 "matched_domain": "bar.baz",
                 "ui_footer_links": CONFIG.y("footer_links"),
+                "ui_theme": Themes.AUTOMATIC,
                 "default_locale": "",
             },
         )
@@ -57,6 +60,7 @@ class TestTenants(APITestCase):
                 "branding_title": "authentik",
                 "matched_domain": "fallback",
                 "ui_footer_links": CONFIG.y("footer_links"),
+                "ui_theme": Themes.AUTOMATIC,
                 "default_locale": "",
             },
         )

schema.yml

@@ -27746,6 +27746,11 @@ components:
             $ref: '#/components/schemas/FooterLink'
           readOnly: true
           default: []
+        ui_theme:
+          allOf:
+          - $ref: '#/components/schemas/UiThemeEnum'
+          readOnly: true
+          default: automatic
         flow_authentication:
           type: string
         flow_invalidation:
@@ -27768,6 +27773,7 @@ components:
       - default_locale
       - matched_domain
       - ui_footer_links
+      - ui_theme
     DeniedActionEnum:
       enum:
       - message_continue
@@ -39910,6 +39916,16 @@ components:
       - description
       - model_name
       - name
+    UiThemeEnum:
+      enum:
+      - automatic
+      - light
+      - dark
+      type: string
+      description: |-
+        * `automatic` - Automatic
+        * `light` - Light
+        * `dark` - Dark
     UsedBy:
       type: object
       description: A list of all objects referencing the queried object

web/rollup.config.js

@@ -36,7 +36,7 @@ export const resources = [
         src: "node_modules/@patternfly/patternfly/components/Spinner/spinner.css",
         dest: "dist/",
     },
-    { src: "src/common/styles/authentik.css", dest: "dist/" },
+    { src: "src/common/styles/*", dest: "dist/" },
     { src: "src/custom.css", dest: "dist/" },
 
     {

web/src/admin/AdminInterface.ts

@@ -9,7 +9,7 @@ import {
 import { autoDetectLanguage } from "@goauthentik/common/ui/locale";
 import { me } from "@goauthentik/common/users";
 import { WebsocketClient } from "@goauthentik/common/ws";
-import { AKElement } from "@goauthentik/elements/Base";
+import { Interface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/messages/MessageContainer";
 import "@goauthentik/elements/messages/MessageContainer";
 import "@goauthentik/elements/notifications/APIDrawer";
@@ -25,7 +25,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -36,7 +35,7 @@ import { AdminApi, SessionUser, Version } from "@goauthentik/api";
 autoDetectLanguage();
 
 @customElement("ak-interface-admin")
-export class AdminInterface extends AKElement {
+export class AdminInterface extends Interface {
     @property({ type: Boolean })
     sidebarOpen = true;
 
@@ -60,7 +59,6 @@ export class AdminInterface extends AKElement {
             PFPage,
             PFButton,
             PFDrawer,
-            AKGlobal,
             css`
                 .pf-c-page__main,
                 .pf-c-drawer__content,
@@ -72,13 +70,7 @@ export class AdminInterface extends AKElement {
                     display: none;
                 }
                 .pf-c-page {
-                    background-color: var(--pf-c-page--BackgroundColor) !important;
+                    background-color: transparent !important;
-                }
-                @media (prefers-color-scheme: dark) {
-                    /* Global page background colour */
-                    .pf-c-page {
-                        --pf-c-page--BackgroundColor: var(--ak-dark-background);
-                    }
                 }
             `,
         ];

web/src/admin/DebugPage.ts

@@ -8,7 +8,6 @@ import * as Sentry from "@sentry/browser";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -20,7 +19,7 @@ import { AdminApi } from "@goauthentik/api";
 @customElement("ak-admin-debug-page")
 export class DebugPage extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFCard, PFPage, PFGrid, PFButton, AKGlobal];
+        return [PFBase, PFCard, PFPage, PFGrid, PFButton];
     }
 
     render(): TemplateResult {

web/src/admin/admin-overview/AdminOverviewPage.ts

@@ -19,7 +19,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -41,7 +40,6 @@ export class AdminOverviewPage extends AKElement {
             PFPage,
             PFContent,
             PFList,
-            AKGlobal,
             css`
                 .row-divider {
                     margin-top: -4px;

web/src/admin/admin-overview/DashboardUserPage.ts

@@ -8,7 +8,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -24,7 +23,6 @@ export class DashboardUserPage extends AKElement {
             PFPage,
             PFContent,
             PFList,
-            AKGlobal,
             css`
                 .row-divider {
                     margin-top: -4px;

web/src/admin/admin-overview/TopApplicationsTable.ts

@@ -7,7 +7,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTable from "@patternfly/patternfly/components/Table/table.css";
 
 import { EventTopPerUser, EventsApi } from "@goauthentik/api";
@@ -18,7 +17,7 @@ export class TopApplicationsTable extends AKElement {
     topN?: EventTopPerUser[];
 
     static get styles(): CSSResult[] {
-        return [PFTable, AKGlobal];
+        return [PFTable];
     }
 
     firstUpdated(): void {

web/src/admin/applications/ApplicationListPage.ts

@@ -18,7 +18,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 
@@ -58,7 +57,6 @@ export class ApplicationListPage extends TablePage<Application> {
         return super.styles.concat(
             PFAvatar,
             PFCard,
-            AKGlobal,
             css`
                 /* Fix alignment issues with images in tables */
                 .pf-c-table tbody > tr > * {

web/src/admin/applications/ApplicationViewPage.ts

@@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -66,17 +65,7 @@ export class ApplicationViewPage extends AKElement {
     missingOutpost = false;
 
     static get styles(): CSSResult[] {
-        return [
+        return [PFBase, PFBanner, PFPage, PFContent, PFButton, PFDescriptionList, PFGrid, PFCard];
-            PFBase,
-            PFBanner,
-            PFPage,
-            PFContent,
-            PFButton,
-            PFDescriptionList,
-            PFGrid,
-            PFCard,
-            AKGlobal,
-        ];
     }
 
     render(): TemplateResult {

web/src/admin/applications/wizard/ApplicationWizard.ts

@@ -19,7 +19,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -27,7 +26,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 @customElement("ak-application-wizard")
 export class ApplicationWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property({ type: Boolean })

web/src/admin/applications/wizard/TypeApplicationWizardPage.ts

@@ -5,7 +5,6 @@ import { t } from "@lingui/macro";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
 import { CSSResult, TemplateResult, html } from "lit";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -51,7 +50,7 @@ export class TypeApplicationWizardPage extends WizardPage {
     sidebarLabel = () => t`Authentication method`;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFForm, PFRadio, AKGlobal];
+        return [PFBase, PFButton, PFForm, PFRadio];
     }
 
     render(): TemplateResult {

web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts

@@ -6,7 +6,6 @@ import { t } from "@lingui/macro";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
 import { CSSResult, TemplateResult, html } from "lit";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -15,7 +14,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 @customElement("ak-application-wizard-type-oauth-api")
 export class TypeOAuthAPIApplicationWizardPage extends WizardPage {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFForm, PFRadio, AKGlobal];
+        return [PFBase, PFButton, PFForm, PFRadio];
     }
 
     sidebarLabel = () => t`Method details`;

web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts

@@ -6,7 +6,6 @@ import { t } from "@lingui/macro";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
 import { CSSResult, TemplateResult, html } from "lit";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -44,7 +43,7 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
     ];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFForm, PFRadio, AKGlobal];
+        return [PFBase, PFButton, PFForm, PFRadio];
     }
 
     sidebarLabel = () => t`Application type`;

web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts

@@ -6,7 +6,6 @@ import { t } from "@lingui/macro";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
 import { CSSResult, TemplateResult, html } from "lit";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -32,7 +31,7 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
     ];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFForm, PFRadio, AKGlobal];
+        return [PFBase, PFButton, PFForm, PFRadio];
     }
 
     sidebarLabel = () => t`Application type`;

web/src/admin/events/EventViewPage.ts

@@ -10,7 +10,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
@@ -37,7 +36,7 @@ export class EventViewPage extends AKElement {
     event!: EventWithContext;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFGrid, PFDescriptionList, PFPage, PFContent, PFCard, AKGlobal];
+        return [PFBase, PFGrid, PFDescriptionList, PFPage, PFContent, PFCard];
     }
 
     render(): TemplateResult {

web/src/admin/flows/FlowViewPage.ts

@@ -14,7 +14,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -42,16 +41,7 @@ export class FlowViewPage extends AKElement {
     flow!: Flow;
 
     static get styles(): CSSResult[] {
-        return [
+        return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid].concat(
-            PFBase,
-            PFPage,
-            PFDescriptionList,
-            PFButton,
-            PFCard,
-            PFContent,
-            PFGrid,
-            AKGlobal,
-        ].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;

web/src/admin/groups/GroupViewPage.ts

@@ -17,7 +17,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -59,7 +58,6 @@ export class GroupViewPage extends AKElement {
             PFCard,
             PFDescriptionList,
             PFSizing,
-            AKGlobal,
         ];
     }
 

web/src/admin/outposts/OutpostHealth.ts

@@ -7,7 +7,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -22,7 +21,6 @@ export class OutpostHealthElement extends AKElement {
         return [
             PFBase,
             PFDescriptionList,
-            AKGlobal,
             css`
                 li {
                     margin: 5px 0;

web/src/admin/outposts/OutpostHealthSimple.ts

@@ -9,7 +9,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { OutpostHealth, OutpostsApi } from "@goauthentik/api";
@@ -29,7 +28,7 @@ export class OutpostHealthSimpleElement extends AKElement {
     showVersion = true;
 
     static get styles(): CSSResult[] {
-        return [PFBase, AKGlobal];
+        return [PFBase];
     }
 
     constructor() {

web/src/admin/outposts/ServiceConnectionWizard.ts

@@ -13,7 +13,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -27,7 +26,7 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
     connectionTypes: TypeCreate[] = [];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFForm, PFButton, PFRadio];
     }
     sidebarLabel = () => t`Select type`;
 
@@ -72,7 +71,7 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
 @customElement("ak-service-connection-wizard")
 export class ServiceConnectionWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property()

web/src/admin/policies/PolicyWizard.ts

@@ -19,7 +19,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -33,7 +32,7 @@ export class InitialPolicyWizardPage extends WizardPage {
     policyTypes: TypeCreate[] = [];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFForm, PFButton, PFRadio];
     }
     sidebarLabel = () => t`Select type`;
 
@@ -85,7 +84,7 @@ export class InitialPolicyWizardPage extends WizardPage {
 @customElement("ak-policy-wizard")
 export class PolicyWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property()

web/src/admin/property-mappings/PropertyMappingWizard.ts

@@ -16,7 +16,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -30,7 +29,7 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
     mappingTypes: TypeCreate[] = [];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFForm, PFButton, PFRadio];
     }
     sidebarLabel = () => t`Select type`;
 
@@ -75,7 +74,7 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
 @customElement("ak-property-mapping-wizard")
 export class PropertyMappingWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property({ attribute: false })

web/src/admin/providers/ProviderViewPage.ts

@@ -13,7 +13,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 
 import { Provider, ProvidersApi } from "@goauthentik/api";
@@ -33,7 +32,7 @@ export class ProviderViewPage extends AKElement {
     provider?: Provider;
 
     static get styles(): CSSResult[] {
-        return [PFPage, AKGlobal];
+        return [PFPage];
     }
 
     renderProvider(): TemplateResult {

web/src/admin/providers/ProviderWizard.ts

@@ -17,7 +17,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFHint from "@patternfly/patternfly/components/Hint/hint.css";
@@ -32,7 +31,7 @@ export class InitialProviderWizardPage extends WizardPage {
     providerTypes: TypeCreate[] = [];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFHint, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFForm, PFHint, PFButton, PFRadio];
     }
     sidebarLabel = () => t`Select type`;
 
@@ -91,7 +90,7 @@ export class InitialProviderWizardPage extends WizardPage {
 @customElement("ak-provider-wizard")
 export class ProviderWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property()

web/src/admin/providers/ldap/LDAPProviderViewPage.ts

@@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -66,7 +65,6 @@ export class LDAPProviderViewPage extends AKElement {
             PFContent,
             PFCard,
             PFDescriptionList,
-            AKGlobal,
         ];
     }
 

web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts

@@ -18,7 +18,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -67,7 +66,6 @@ export class OAuth2ProviderViewPage extends AKElement {
             PFForm,
             PFFormControl,
             PFBanner,
-            AKGlobal,
         ];
     }
 

web/src/admin/providers/proxy/ProxyProviderViewPage.ts

@@ -26,7 +26,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -99,7 +98,6 @@ export class ProxyProviderViewPage extends AKElement {
             PFCard,
             PFDescriptionList,
             PFBanner,
-            AKGlobal,
         ];
     }
 

web/src/admin/providers/saml/SAMLProviderViewPage.ts

@@ -17,7 +17,6 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -72,7 +71,6 @@ export class SAMLProviderViewPage extends AKElement {
             PFForm,
             PFFormControl,
             PFBanner,
-            AKGlobal,
         ];
     }
 

web/src/admin/providers/scim/SCIMProviderViewPage.ts

@@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -66,7 +65,6 @@ export class SCIMProviderViewPage extends AKElement {
             PFContent,
             PFCard,
             PFDescriptionList,
-            AKGlobal,
         ];
     }
 

web/src/admin/sources/SourceWizard.ts

@@ -15,7 +15,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -29,7 +28,7 @@ export class InitialSourceWizardPage extends WizardPage {
     sourceTypes: TypeCreate[] = [];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFForm, PFButton, PFRadio];
     }
     sidebarLabel = () => t`Select type`;
 
@@ -74,7 +73,7 @@ export class InitialSourceWizardPage extends WizardPage {
 @customElement("ak-source-wizard")
 export class SourceWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property({ attribute: false })

web/src/admin/sources/ldap/LDAPSourceViewPage.ts

@@ -15,7 +15,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -44,17 +43,7 @@ export class LDAPSourceViewPage extends AKElement {
     source!: LDAPSource;
 
     static get styles(): CSSResult[] {
-        return [
+        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, PFList];
-            PFBase,
-            PFPage,
-            PFButton,
-            PFGrid,
-            PFContent,
-            PFCard,
-            PFDescriptionList,
-            PFList,
-            AKGlobal,
-        ];
     }
 
     constructor() {

web/src/admin/sources/oauth/OAuthSourceViewPage.ts

@@ -15,7 +15,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -76,7 +75,7 @@ export class OAuthSourceViewPage extends AKElement {
     source?: OAuthSource;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
+        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList];
     }
 
     constructor() {

web/src/admin/sources/plex/PlexSourceViewPage.ts

@@ -14,7 +14,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -42,7 +41,7 @@ export class PlexSourceViewPage extends AKElement {
     source?: PlexSource;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal];
+        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList];
     }
 
     constructor() {

web/src/admin/sources/saml/SAMLSourceViewPage.ts

@@ -16,7 +16,6 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -44,7 +43,7 @@ export class SAMLSourceViewPage extends AKElement {
     source?: SAMLSource;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList, AKGlobal];
+        return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList];
     }
 
     constructor() {

web/src/admin/stages/StageWizard.ts

@@ -32,7 +32,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j
 import { CSSResult, TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -47,7 +46,7 @@ export class InitialStageWizardPage extends WizardPage {
     sidebarLabel = () => t`Select type`;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFForm, PFButton, PFRadio];
     }
 
     activeCallback: () => Promise<void> = async () => {
@@ -98,7 +97,7 @@ export class InitialStageWizardPage extends WizardPage {
 @customElement("ak-stage-wizard")
 export class StageWizard extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, AKGlobal, PFRadio];
+        return [PFBase, PFButton, PFRadio];
     }
 
     @property()

web/src/admin/stages/invitation/InvitationListLink.ts

@@ -7,7 +7,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -25,7 +24,7 @@ export class InvitationListLink extends AKElement {
     selectedFlow?: string;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFFormControl, PFFlex, PFDescriptionList, AKGlobal];
+        return [PFBase, PFForm, PFFormControl, PFFlex, PFDescriptionList];
     }
 
     renderLink(): string {

web/src/admin/users/UserListPage.ts

@@ -26,7 +26,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
@@ -58,7 +57,7 @@ export class UserListPage extends TablePage<User> {
     activePath = getURLParam<string>("path", "/");
 
     static get styles(): CSSResult[] {
-        return super.styles.concat(PFDescriptionList, PFCard, PFAlert, AKGlobal);
+        return super.styles.concat(PFDescriptionList, PFCard, PFAlert);
     }
 
     async apiEndpoint(page: number): Promise<PaginatedResponse<User>> {

web/src/admin/users/UserViewPage.ts

@@ -29,7 +29,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -71,7 +70,6 @@ export class UserViewPage extends AKElement {
             PFCard,
             PFDescriptionList,
             PFSizing,
-            AKGlobal,
         ];
     }
 

web/src/common/styles/authentik.css

@@ -124,333 +124,6 @@ html > form > input {
     margin-bottom: 6px;
 }
 
-@media (prefers-color-scheme: dark) {
-    .ak-static-page h1 {
-        color: var(--ak-dark-foreground);
-    }
-    body {
-        background-color: var(--ak-dark-background) !important;
-    }
-    :root {
-        --pf-global--Color--100: var(--ak-dark-foreground);
-        --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
-        --pf-global--link--Color: var(--ak-dark-foreground-link);
-    }
-    .pf-c-radio {
-        --pf-c-radio__label--Color: var(--ak-dark-foreground);
-    }
-    /* Global page background colour */
-    .pf-c-page {
-        --pf-c-page--BackgroundColor: var(--ak-dark-background);
-    }
-    .pf-c-drawer__content {
-        --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
-    }
-    .pf-c-title {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-u-mb-xl {
-        color: var(--ak-dark-foreground);
-    }
-    /* Header sections */
-    .pf-c-page__main-section {
-        --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
-    }
-    .sidebar-trigger,
-    .notification-trigger {
-        background-color: transparent !important;
-    }
-    .pf-c-page__main-section.pf-m-light {
-        background-color: transparent;
-    }
-    .pf-c-content {
-        color: var(--ak-dark-foreground);
-    }
-    /* Card */
-    .pf-c-card {
-        --pf-c-card--BackgroundColor: var(--ak-dark-background-light);
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-card__title,
-    .pf-c-card__body {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-toolbar {
-        --pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
-    }
-    .pf-c-pagination.pf-m-bottom {
-        background-color: var(--ak-dark-background-light);
-    }
-    /* table */
-    .pf-c-table {
-        --pf-c-table--BackgroundColor: var(--ak-dark-background-light);
-        --pf-c-table--BorderColor: var(--ak-dark-background-lighter);
-        --pf-c-table--cell--Color: var(--ak-dark-foreground);
-        --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish);
-        --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter);
-    }
-    .pf-c-table__text {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
-        color: var(--ak-dark-foreground) !important;
-    }
-    .pf-c-table__sort-indicator i {
-        color: var(--ak-dark-foreground) !important;
-    }
-    .pf-c-table__expandable-row.pf-m-expanded {
-        --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(
-            --ak-dark-background-lighter
-        );
-    }
-    /* tabs */
-    .pf-c-tabs {
-        background-color: transparent;
-    }
-    .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
-        border-color: transparent;
-    }
-    .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
-        border-color: transparent;
-    }
-    .pf-c-tabs__link::before {
-        border-color: transparent;
-    }
-    .pf-c-tabs__item.pf-m-current {
-        --pf-c-tabs__link--after--BorderColor: #fd4b2d;
-    }
-    .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
-        background-color: transparent;
-    }
-    /* table, on mobile */
-    @media screen and (max-width: 1200px) {
-        .pf-m-grid-xl.pf-c-table tbody:first-of-type {
-            border-top-color: var(--ak-dark-background);
-        }
-        .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
-            border-bottom-color: var(--ak-dark-background);
-        }
-    }
-    /* class for pagination text */
-    .pf-c-options-menu__toggle {
-        color: var(--ak-dark-foreground);
-    }
-    /* table icon used for expanding rows */
-    .pf-c-table__toggle-icon {
-        color: var(--ak-dark-foreground);
-    }
-    /* expandable elements */
-    .pf-c-expandable-section__toggle-text {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-expandable-section__toggle-icon {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-expandable-section.pf-m-display-lg {
-        background-color: var(--ak-dark-background-light-ish);
-    }
-    /* header for form group */
-    .pf-c-form__field-group-header-title-text {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-form__field-group {
-        border-bottom: 0;
-    }
-    /* inputs */
-    optgroup,
-    option {
-        color: var(--ak-dark-foreground);
-    }
-    select[multiple] optgroup:checked,
-    select[multiple] option:checked {
-        color: var(--ak-dark-background);
-    }
-    .pf-c-input-group {
-        --pf-c-input-group--BackgroundColor: transparent;
-    }
-    .pf-c-form-control {
-        --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
-        --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
-        --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
-        --pf-global--BackgroundColor--100: transparent;
-        --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-form-control:disabled {
-        background-color: var(--ak-dark-background-light);
-    }
-    .pf-c-form-control[readonly] {
-        background-color: var(--ak-dark-background-light);
-    }
-    .pf-c-switch__input:checked ~ .pf-c-switch__label {
-        --pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground);
-    }
-    /* select toggle */
-    .pf-c-select__toggle::before {
-        --pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);
-        --pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter);
-        --pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter);
-    }
-    .pf-c-select__toggle.pf-m-typeahead {
-        --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
-    }
-    .pf-c-select__menu {
-        --pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish);
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-select__menu-item {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-select__menu-wrapper:hover,
-    .pf-c-select__menu-item:hover {
-        --pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter);
-    }
-    .pf-c-select__menu-wrapper:focus-within,
-    .pf-c-select__menu-wrapper.pf-m-focus,
-    .pf-c-select__menu-item:focus,
-    .pf-c-select__menu-item.pf-m-focus {
-        --pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish);
-    }
-    .pf-c-button.pf-m-plain:hover {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-button.pf-m-control {
-        --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter)
-            var(--ak-dark-background-lighter)
-            var(--pf-c-button--m-control--after--BorderBottomColor)
-            var(--ak-dark-background-lighter);
-        background-color: var(--ak-dark-background-light);
-        color: var(--ak-dark-foreground);
-    }
-    .pf-m-tertiary,
-    .pf-c-button.pf-m-tertiary {
-        --pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
-        color: var(--ak-dark-foreground-darker);
-    }
-    .pf-m-tertiary:hover,
-    .pf-c-button.pf-m-tertiary:hover {
-        --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
-    }
-    .pf-c-form__label-text {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-check__label {
-        color: var(--ak-dark-foreground);
-    }
-    .form-help-text {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-dropdown__toggle::before {
-        border-color: transparent;
-    }
-    .pf-c-dropdown__menu {
-        --pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
-    }
-    .pf-c-dropdown__menu-item {
-        --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
-        --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
-    }
-    .pf-c-dropdown__menu-item:hover,
-    .pf-c-dropdown__menu-item:focus {
-        --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
-        --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
-    }
-    .pf-c-toggle-group__button {
-        color: var(--ak-dark-foreground) !important;
-    }
-    .pf-c-toggle-group__button:not(.pf-m-selected) {
-        background-color: var(--ak-dark-background-light) !important;
-    }
-    .pf-c-toggle-group__button.pf-m-selected {
-        color: var(--ak-dark-foreground) !important;
-        background-color: var(--pf-global--primary-color--100) !important;
-    }
-    /* inputs help text */
-    .pf-c-form__helper-text:not(.pf-m-error) {
-        color: var(--ak-dark-foreground);
-    }
-    /* modal */
-    .pf-c-modal-box,
-    .pf-c-modal-box__header,
-    .pf-c-modal-box__footer,
-    .pf-c-modal-box__body {
-        background-color: var(--ak-dark-background);
-    }
-    /* sidebar */
-    .pf-c-nav {
-        background-color: var(--ak-dark-background-light);
-    }
-    /* flows */
-    .pf-c-login__main {
-        background-color: var(--ak-dark-background);
-    }
-    .pf-c-login__main-body,
-    .pf-c-login__main-header,
-    .pf-c-login__main-header-desc {
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-login__main-footer-links-item img {
-        filter: invert(1);
-    }
-    .pf-c-login__main-footer-band {
-        background-color: var(--ak-dark-background-lighter);
-        color: var(--ak-dark-foreground);
-    }
-    .form-control-static {
-        color: var(--ak-dark-foreground);
-    }
-    /* notifications */
-    .pf-c-drawer__panel {
-        background-color: var(--ak-dark-background);
-    }
-    .pf-c-notification-drawer {
-        --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
-    }
-    .pf-c-notification-drawer__header {
-        background-color: var(--ak-dark-background-lighter);
-        color: var(--ak-dark-foreground);
-    }
-    .pf-c-notification-drawer__list-item {
-        background-color: var(--ak-dark-background-light-ish);
-        color: var(--ak-dark-foreground);
-        --pf-c-notification-drawer__list-item--BorderBottomColor: var(
-            --ak-dark-background-lighter
-        ) !important;
-    }
-    /* data list */
-    .pf-c-data-list {
-        border-top-color: var(--ak-dark-background-lighter);
-    }
-    .pf-c-data-list__item {
-        --pf-c-data-list__item--BackgroundColor: transparent;
-        --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
-        color: var(--ak-dark-foreground);
-    }
-    /* wizards */
-    .pf-c-wizard__nav {
-        --pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter);
-        --pf-c-wizard__nav--lg--BorderRightColor: transparent;
-    }
-    .pf-c-wizard__main {
-        background-color: var(--ak-dark-background-light-ish);
-    }
-    .pf-c-wizard__footer {
-        --pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish);
-    }
-    .pf-c-wizard__toggle-num,
-    .pf-c-wizard__nav-link::before {
-        --pf-c-wizard__nav-link--before--BackgroundColor: transparent;
-    }
-    /* tree view */
-    .pf-c-tree-view__node:focus {
-        --pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
-    }
-    .pf-c-tree-view__content:hover,
-    .pf-c-tree-view__content:focus-within {
-        --pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish);
-    }
-}
-
 .pf-c-data-list__item {
     background-color: transparent;
 }

web/src/common/styles/theme-dark.css

@@ -0,0 +1,321 @@
+.ak-static-page h1 {
+    color: var(--ak-dark-foreground);
+}
+body {
+    background-color: var(--ak-dark-background) !important;
+}
+:root {
+    --pf-global--Color--100: var(--ak-dark-foreground);
+    --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
+    --pf-global--link--Color: var(--ak-dark-foreground-link);
+}
+.pf-c-radio {
+    --pf-c-radio__label--Color: var(--ak-dark-foreground);
+}
+/* Global page background colour */
+.pf-c-page {
+    --pf-c-page--BackgroundColor: var(--ak-dark-background);
+}
+.pf-c-drawer__content {
+    --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
+}
+.pf-c-title {
+    color: var(--ak-dark-foreground);
+}
+.pf-u-mb-xl {
+    color: var(--ak-dark-foreground);
+}
+/* Header sections */
+.pf-c-page__main-section {
+    --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
+}
+.sidebar-trigger,
+.notification-trigger {
+    background-color: transparent !important;
+}
+.pf-c-page__main-section.pf-m-light {
+    background-color: transparent;
+}
+.pf-c-content {
+    color: var(--ak-dark-foreground);
+}
+/* Card */
+.pf-c-card {
+    --pf-c-card--BackgroundColor: var(--ak-dark-background-light);
+    color: var(--ak-dark-foreground);
+}
+.pf-c-card__title,
+.pf-c-card__body {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-toolbar {
+    --pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
+}
+.pf-c-pagination.pf-m-bottom {
+    background-color: var(--ak-dark-background-light);
+}
+/* table */
+.pf-c-table {
+    --pf-c-table--BackgroundColor: var(--ak-dark-background-light);
+    --pf-c-table--BorderColor: var(--ak-dark-background-lighter);
+    --pf-c-table--cell--Color: var(--ak-dark-foreground);
+    --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish);
+    --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter);
+}
+.pf-c-table__text {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
+    color: var(--ak-dark-foreground) !important;
+}
+.pf-c-table__sort-indicator i {
+    color: var(--ak-dark-foreground) !important;
+}
+.pf-c-table__expandable-row.pf-m-expanded {
+    --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--ak-dark-background-lighter);
+}
+/* tabs */
+.pf-c-tabs {
+    background-color: transparent;
+}
+.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
+    border-color: transparent;
+}
+.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
+    border-color: transparent;
+}
+.pf-c-tabs__link::before {
+    border-color: transparent;
+}
+.pf-c-tabs__item.pf-m-current {
+    --pf-c-tabs__link--after--BorderColor: #fd4b2d;
+}
+.pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
+    background-color: transparent;
+}
+/* table, on mobile */
+@media screen and (max-width: 1200px) {
+    .pf-m-grid-xl.pf-c-table tbody:first-of-type {
+        border-top-color: var(--ak-dark-background);
+    }
+    .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
+        border-bottom-color: var(--ak-dark-background);
+    }
+}
+/* class for pagination text */
+.pf-c-options-menu__toggle {
+    color: var(--ak-dark-foreground);
+}
+/* table icon used for expanding rows */
+.pf-c-table__toggle-icon {
+    color: var(--ak-dark-foreground);
+}
+/* expandable elements */
+.pf-c-expandable-section__toggle-text {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-expandable-section__toggle-icon {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-expandable-section.pf-m-display-lg {
+    background-color: var(--ak-dark-background-light-ish);
+}
+/* header for form group */
+.pf-c-form__field-group-header-title-text {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-form__field-group {
+    border-bottom: 0;
+}
+/* inputs */
+optgroup,
+option {
+    color: var(--ak-dark-foreground);
+}
+select[multiple] optgroup:checked,
+select[multiple] option:checked {
+    color: var(--ak-dark-background);
+}
+.pf-c-input-group {
+    --pf-c-input-group--BackgroundColor: transparent;
+}
+.pf-c-form-control {
+    --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
+    --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
+    --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
+    --pf-global--BackgroundColor--100: transparent;
+    --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
+    color: var(--ak-dark-foreground);
+}
+.pf-c-form-control:disabled {
+    background-color: var(--ak-dark-background-light);
+}
+.pf-c-form-control[readonly] {
+    background-color: var(--ak-dark-background-light);
+}
+.pf-c-switch__input:checked ~ .pf-c-switch__label {
+    --pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground);
+}
+/* select toggle */
+.pf-c-select__toggle::before {
+    --pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);
+    --pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter);
+    --pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter);
+}
+.pf-c-select__toggle.pf-m-typeahead {
+    --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
+}
+.pf-c-select__menu {
+    --pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish);
+    color: var(--ak-dark-foreground);
+}
+.pf-c-select__menu-item {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-select__menu-wrapper:hover,
+.pf-c-select__menu-item:hover {
+    --pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter);
+}
+.pf-c-select__menu-wrapper:focus-within,
+.pf-c-select__menu-wrapper.pf-m-focus,
+.pf-c-select__menu-item:focus,
+.pf-c-select__menu-item.pf-m-focus {
+    --pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish);
+}
+.pf-c-button.pf-m-plain:hover {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-button.pf-m-control {
+    --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter)
+        var(--ak-dark-background-lighter) var(--pf-c-button--m-control--after--BorderBottomColor)
+        var(--ak-dark-background-lighter);
+    background-color: var(--ak-dark-background-light);
+    color: var(--ak-dark-foreground);
+}
+.pf-m-tertiary,
+.pf-c-button.pf-m-tertiary {
+    --pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
+    color: var(--ak-dark-foreground-darker);
+}
+.pf-m-tertiary:hover,
+.pf-c-button.pf-m-tertiary:hover {
+    --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
+}
+.pf-c-form__label-text {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-check__label {
+    color: var(--ak-dark-foreground);
+}
+.form-help-text {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-dropdown__toggle::before {
+    border-color: transparent;
+}
+.pf-c-dropdown__menu {
+    --pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
+}
+.pf-c-dropdown__menu-item {
+    --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
+    --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
+}
+.pf-c-dropdown__menu-item:hover,
+.pf-c-dropdown__menu-item:focus {
+    --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
+    --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
+}
+.pf-c-toggle-group__button {
+    color: var(--ak-dark-foreground) !important;
+}
+.pf-c-toggle-group__button:not(.pf-m-selected) {
+    background-color: var(--ak-dark-background-light) !important;
+}
+.pf-c-toggle-group__button.pf-m-selected {
+    color: var(--ak-dark-foreground) !important;
+    background-color: var(--pf-global--primary-color--100) !important;
+}
+/* inputs help text */
+.pf-c-form__helper-text:not(.pf-m-error) {
+    color: var(--ak-dark-foreground);
+}
+/* modal */
+.pf-c-modal-box,
+.pf-c-modal-box__header,
+.pf-c-modal-box__footer,
+.pf-c-modal-box__body {
+    background-color: var(--ak-dark-background);
+}
+/* sidebar */
+.pf-c-nav {
+    background-color: var(--ak-dark-background-light);
+}
+/* flows */
+.pf-c-login__main {
+    background-color: var(--ak-dark-background);
+}
+.pf-c-login__main-body,
+.pf-c-login__main-header,
+.pf-c-login__main-header-desc {
+    color: var(--ak-dark-foreground);
+}
+.pf-c-login__main-footer-links-item img {
+    filter: invert(1);
+}
+.pf-c-login__main-footer-band {
+    background-color: var(--ak-dark-background-lighter);
+    color: var(--ak-dark-foreground);
+}
+.form-control-static {
+    color: var(--ak-dark-foreground);
+}
+/* notifications */
+.pf-c-drawer__panel {
+    background-color: var(--ak-dark-background);
+}
+.pf-c-notification-drawer {
+    --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
+}
+.pf-c-notification-drawer__header {
+    background-color: var(--ak-dark-background-lighter);
+    color: var(--ak-dark-foreground);
+}
+.pf-c-notification-drawer__list-item {
+    background-color: var(--ak-dark-background-light-ish);
+    color: var(--ak-dark-foreground);
+    --pf-c-notification-drawer__list-item--BorderBottomColor: var(
+        --ak-dark-background-lighter
+    ) !important;
+}
+/* data list */
+.pf-c-data-list {
+    border-top-color: var(--ak-dark-background-lighter);
+}
+.pf-c-data-list__item {
+    --pf-c-data-list__item--BackgroundColor: transparent;
+    --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
+    color: var(--ak-dark-foreground);
+}
+/* wizards */
+.pf-c-wizard__nav {
+    --pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter);
+    --pf-c-wizard__nav--lg--BorderRightColor: transparent;
+}
+.pf-c-wizard__main {
+    background-color: var(--ak-dark-background-light-ish);
+}
+.pf-c-wizard__footer {
+    --pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish);
+}
+.pf-c-wizard__toggle-num,
+.pf-c-wizard__nav-link::before {
+    --pf-c-wizard__nav-link--before--BackgroundColor: transparent;
+}
+/* tree view */
+.pf-c-tree-view__node:focus {
+    --pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
+}
+.pf-c-tree-view__content:hover,
+.pf-c-tree-view__content:focus-within {
+    --pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish);
+}

web/src/common/ui/config.ts

@@ -1,7 +1,7 @@
 import { currentInterface } from "@goauthentik/common/sentry";
 import { me } from "@goauthentik/common/users";
 
-import { UserSelf } from "@goauthentik/api";
+import { UiThemeEnum, UserSelf } from "@goauthentik/api";
 
 export enum UserDisplay {
     username = "username",
@@ -32,6 +32,7 @@ export interface UIConfig {
         userDisplay: UserDisplay;
     };
     theme: {
+        base: UiThemeEnum;
         background: string;
         cardBackground: string;
     };
@@ -59,6 +60,7 @@ export class DefaultUIConfig implements UIConfig {
         userDisplay: UserDisplay.username,
     };
     theme = {
+        base: UiThemeEnum.Automatic,
         background: "",
         cardBackground: "",
     };

web/src/elements/Alert.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -23,7 +22,7 @@ export class Alert extends AKElement {
     level: Level = Level.Warning;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFAlert, AKGlobal];
+        return [PFBase, PFAlert];
     }
 
     render(): TemplateResult {

web/src/elements/Base.ts

@@ -1,7 +1,21 @@
 import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants";
+import { globalAK } from "@goauthentik/common/global";
+import { uiConfig } from "@goauthentik/common/ui/config";
 
 import { LitElement } from "lit";
 
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import ThemeDark from "@goauthentik/common/styles/theme-dark.css";
+
+import { UiThemeEnum } from "@goauthentik/api";
+
+export function rootInterface(): Interface | undefined {
+    const el = Array.from(document.body.querySelectorAll("*")).filter(
+        (el) => el instanceof Interface,
+    );
+    return el[0] as Interface;
+}
+
 let css: Promise<string[]> | undefined;
 function fetchCustomCSS(): Promise<string[]> {
     if (!css) {
@@ -22,26 +36,113 @@ function fetchCustomCSS(): Promise<string[]> {
     return css;
 }
 
+export interface AdoptedStyleSheetsElement {
+    adoptedStyleSheets: readonly CSSStyleSheet[];
+}
+
+const QUERY_MEDIA_COLOR_LIGHT = "(prefers-color-scheme: light)";
+
 export class AKElement extends LitElement {
+    _mediaMatcher?: MediaQueryList;
+    _mediaMatcherHandler?: (ev?: MediaQueryListEvent) => void;
+    _activeTheme?: UiThemeEnum;
+
+    get activeTheme(): UiThemeEnum | undefined {
+        return this._activeTheme;
+    }
+
     constructor() {
         super();
         this.addEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange);
-        fetchCustomCSS().then((sheets) => {
+    }
+
+    protected createRenderRoot(): ShadowRoot | Element {
+        const root = super.createRenderRoot() as ShadowRoot;
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, AKGlobal];
+        this._initTheme(root);
+        this._initCustomCSS(root);
+        return root;
+    }
+
+    async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
+        // Early activate theme based on media query to prevent light flash
+        // when dark is preferred
+        this._activateTheme(
+            root,
+            window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches
+                ? UiThemeEnum.Light
+                : UiThemeEnum.Dark,
+        );
+        rootInterface()?._initTheme(root);
+    }
+
+    private async _initCustomCSS(root: ShadowRoot): Promise<void> {
+        const sheets = await fetchCustomCSS();
         sheets.map((css) => {
             if (css === "") {
                 return;
             }
             new CSSStyleSheet().replace(css).then((sheet) => {
-                    if (!this.shadowRoot) {
+                root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+            });
+        });
+    }
+
+    _applyTheme(root: AdoptedStyleSheetsElement, theme?: UiThemeEnum): void {
+        if (!theme) {
+            theme = UiThemeEnum.Automatic;
+        }
+        if (theme === UiThemeEnum.Automatic) {
+            // Create a media matcher to automatically switch the theme depending on
+            // prefers-color-scheme
+            if (!this._mediaMatcher) {
+                this._mediaMatcher = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT);
+                this._mediaMatcherHandler = (ev?: MediaQueryListEvent) => {
+                    const theme =
+                        ev?.matches || this._mediaMatcher?.matches
+                            ? UiThemeEnum.Light
+                            : UiThemeEnum.Dark;
+                    this._activateTheme(root, theme);
+                };
+                this._mediaMatcher.addEventListener("change", this._mediaMatcherHandler);
+            }
+            return;
+        } else if (this._mediaMatcher && this._mediaMatcherHandler) {
+            // Theme isn't automatic and we have a matcher configured, remove the matcher
+            // to prevent changes
+            this._mediaMatcher.removeEventListener("change", this._mediaMatcherHandler);
+            this._mediaMatcher = undefined;
+        }
+        this._activateTheme(root, theme);
+    }
+
+    _activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum) {
+        if (this._activeTheme === theme) {
             return;
         }
-                    this.shadowRoot.adoptedStyleSheets = [
+        // Make sure we only get to this callback once we've picked a concise theme choice
-                        ...this.shadowRoot.adoptedStyleSheets,
+        this.dispatchEvent(
-                        sheet,
+            new CustomEvent("themeChange", {
-                    ];
+                bubbles: true,
-                });
+                composed: true,
-            });
+                detail: theme,
-        });
+            }),
+        );
+        this._activeTheme = theme;
+        this.setAttribute("theme", theme);
+        let stylesheet: CSSStyleSheet | undefined;
+        if (theme === UiThemeEnum.Dark) {
+            stylesheet = ThemeDark;
+        }
+        if (!stylesheet) {
+            return;
+        }
+        if (root.adoptedStyleSheets.indexOf(stylesheet) === -1) {
+            root.adoptedStyleSheets = [...root.adoptedStyleSheets, stylesheet];
+        } else {
+            root.adoptedStyleSheets = root.adoptedStyleSheets.filter((v) => v !== stylesheet);
+        }
+        this.requestUpdate();
     }
 
     disconnectedCallback() {
@@ -53,3 +154,20 @@ export class AKElement extends LitElement {
         this.requestUpdate();
     }
 }
+
+export class Interface extends AKElement {
+    _activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void {
+        super._activateTheme(root, theme);
+        super._activateTheme(document, theme);
+    }
+
+    async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
+        const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
+        this._applyTheme(root, bootstrapTheme);
+        uiConfig().then((config) => {
+            if (config.theme.base) {
+                this._applyTheme(root, config.theme.base);
+            }
+        });
+    }
+}

web/src/elements/CodeMirror.ts

@@ -18,6 +18,8 @@ import YAML from "yaml";
 
 import { customElement, property } from "lit/decorators.js";
 
+import { UiThemeEnum } from "@goauthentik/api";
+
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea<T> extends AKElement {
     @property({ type: Boolean })
@@ -126,18 +128,17 @@ export class CodeMirrorTextarea<T> extends AKElement {
     }
 
     firstUpdated(): void {
-        const matcher = window.matchMedia("(prefers-color-scheme: light)");
+        this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
-        const handler = (ev?: MediaQueryListEvent) => {
+            if (ev.detail === UiThemeEnum.Dark) {
-            let theme;
-            if (ev?.matches || matcher.matches) {
-                theme = this.themeLight;
-            } else {
-                theme = this.themeDark;
-            }
                 this.editor?.dispatch({
-                effects: this.theme.reconfigure(theme),
+                    effects: this.theme.reconfigure(this.themeDark),
                 });
-        };
+            } else {
+                this.editor?.dispatch({
+                    effects: this.theme.reconfigure(this.themeLight),
+                });
+            }
+        }) as EventListener);
         const extensions = [
             history(),
             keymap.of([...defaultKeymap, ...historyKeymap]),
@@ -148,7 +149,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
             EditorView.lineWrapping,
             EditorState.readOnly.of(this.readOnly),
             EditorState.tabSize.of(2),
-            this.theme.of(this.themeLight),
+            this.theme.of(this.activeTheme === UiThemeEnum.Dark ? this.themeLight : this.themeDark),
         ];
         this.editor = new EditorView({
             extensions: extensions.filter((p) => p) as Extension[],
@@ -156,7 +157,5 @@ export class CodeMirrorTextarea<T> extends AKElement {
             doc: this._value,
         });
         this.shadowRoot?.appendChild(this.editor.dom);
-        matcher.addEventListener("change", handler);
-        handler();
     }
 }

web/src/elements/Diagram.ts

@@ -1,13 +1,15 @@
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
-import mermaid from "mermaid";
+import mermaid, { MermaidConfig } from "mermaid";
 
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { until } from "lit/directives/until.js";
 
+import { UiThemeEnum } from "@goauthentik/api";
+
 @customElement("ak-diagram")
 export class Diagram extends AKElement {
     @property({ attribute: false })
@@ -31,30 +33,34 @@ export class Diagram extends AKElement {
         ];
     }
 
+    config: MermaidConfig;
+
     constructor() {
         super();
-        const matcher = window.matchMedia("(prefers-color-scheme: light)");
+        this.config = {
-        const handler = (ev?: MediaQueryListEvent) => {
-            mermaid.initialize({
             // The type definition for this says number
             // but the example use strings
             // and numbers don't work
             logLevel: "fatal" as unknown as number,
             startOnLoad: false,
-                theme: ev?.matches || matcher.matches ? "default" : "dark",
             flowchart: {
                 curve: "linear",
             },
-            });
-            this.requestUpdate();
         };
-        matcher.addEventListener("change", handler);
+        mermaid.initialize(this.config);
-        handler();
     }
 
     firstUpdated(): void {
         if (this.handlerBound) return;
         window.addEventListener(EVENT_REFRESH, this.refreshHandler);
+        this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
+            if (ev.detail === UiThemeEnum.Dark) {
+                this.config.theme = "dark";
+            } else {
+                this.config.theme = "default";
+            }
+            mermaid.initialize(this.config);
+        }) as EventListener);
         this.handlerBound = true;
         this.refreshHandler();
     }

web/src/elements/Divider.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-divider")
@@ -11,7 +10,6 @@ export class Divider extends AKElement {
     static get styles(): CSSResult[] {
         return [
             PFBase,
-            AKGlobal,
             css`
                 .separator {
                     display: flex;

web/src/elements/EmptyState.ts

@@ -4,7 +4,6 @@ import { PFSize } from "@goauthentik/elements/Spinner";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -24,7 +23,7 @@ export class EmptyState extends AKElement {
     header = "";
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFEmptyState, PFTitle, AKGlobal];
+        return [PFBase, PFEmptyState, PFTitle];
     }
 
     render(): TemplateResult {

web/src/elements/Expand.ts

@@ -5,7 +5,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -21,7 +20,7 @@ export class Expand extends AKElement {
     textClosed = t`Show more`;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFExpandableSection, AKGlobal];
+        return [PFBase, PFExpandableSection];
     }
 
     render(): TemplateResult {

web/src/elements/Label.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFLabel from "@patternfly/patternfly/components/Label/label.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -26,7 +25,7 @@ export class Label extends AKElement {
     compact = false;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLabel, AKGlobal];
+        return [PFBase, PFLabel];
     }
 
     getDefaultIcon(): string {

web/src/elements/Markdown.ts

@@ -7,7 +7,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 
@@ -38,7 +37,6 @@ export class Markdown extends AKElement {
         return [
             PFList,
             PFContent,
-            AKGlobal,
             css`
                 h2:first-of-type {
                     margin-top: 0;

web/src/elements/PageHeader.ts

@@ -15,7 +15,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -65,7 +64,6 @@ export class PageHeader extends AKElement {
             PFButton,
             PFPage,
             PFContent,
-            AKGlobal,
             css`
                 :host {
                     display: flex;

web/src/elements/Tabs.ts

@@ -8,7 +8,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
 
@@ -27,7 +26,6 @@ export class Tabs extends AKElement {
         return [
             PFGlobal,
             PFTabs,
-            AKGlobal,
             css`
                 ::slotted(*) {
                     flex-grow: 2;

web/src/elements/Tooltip.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTooltip from "@patternfly/patternfly/components/Tooltip/tooltip.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -16,7 +15,6 @@ export class Tooltip extends AKElement {
         return [
             PFBase,
             PFTooltip,
-            AKGlobal,
             css`
                 .pf-c-tooltip__content {
                     text-align: inherit;

web/src/elements/TreeView.ts

@@ -7,7 +7,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -139,7 +138,7 @@ export class TreeViewNode extends AKElement {
 @customElement("ak-treeview")
 export class TreeView extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, PFTreeView, AKGlobal];
+        return [PFBase, PFTreeView];
     }
 
     @property({ type: Array })

web/src/elements/buttons/ModalButton.ts

@@ -4,7 +4,6 @@ import { PFSize } from "@goauthentik/elements/Spinner";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -57,7 +56,6 @@ export class ModalButton extends AKElement {
             PFPage,
             PFCard,
             PFContent,
-            AKGlobal,
             MODAL_BUTTON_STYLES,
             css`
                 .locked {

web/src/elements/buttons/SpinnerButton.ts

@@ -5,7 +5,6 @@ import { PFSize } from "@goauthentik/elements/Spinner";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -23,7 +22,6 @@ export class SpinnerButton extends AKElement {
             PFBase,
             PFButton,
             PFSpinner,
-            AKGlobal,
             css`
                 button {
                     /* Have to use !important here, as buttons with pf-m-progress have transition already */

web/src/elements/cards/AggregateCard.ts

@@ -4,7 +4,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -24,7 +23,7 @@ export class AggregateCard extends AKElement {
     isCenter = true;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFCard, PFFlex, AKGlobal].concat([
+        return [PFBase, PFCard, PFFlex].concat([
             css`
                 .pf-c-card.pf-c-card-aggregate {
                     height: 100%;

web/src/elements/charts/Chart.ts

@@ -23,6 +23,8 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
+import { UiThemeEnum } from "@goauthentik/api";
+
 Chart.register(Legend, Tooltip);
 Chart.register(LineController, BarController, DoughnutController);
 Chart.register(ArcElement, BarElement, PointElement, LineElement);
@@ -87,25 +89,18 @@ export abstract class AKChart<T> extends AKElement {
         ];
     }
 
-    constructor() {
+    connectedCallback(): void {
-        super();
+        super.connectedCallback();
-        const matcher = window.matchMedia("(prefers-color-scheme: light)");
+        window.addEventListener("resize", this.resizeHandler);
-        const handler = (ev?: MediaQueryListEvent) => {
+        this.addEventListener(EVENT_REFRESH, this.refreshHandler);
-            if (ev?.matches || matcher.matches) {
+        this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
+            if (ev.detail === UiThemeEnum.Light) {
                 this.fontColour = FONT_COLOUR_LIGHT_MODE;
             } else {
                 this.fontColour = FONT_COLOUR_DARK_MODE;
             }
             this.chart?.update();
-        };
+        }) as EventListener);
-        matcher.addEventListener("change", handler);
-        handler();
-    }
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        window.addEventListener("resize", this.resizeHandler);
-        this.addEventListener(EVENT_REFRESH, this.refreshHandler);
     }
 
     disconnectedCallback(): void {

web/src/elements/chips/Chip.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -17,7 +16,7 @@ export class Chip extends AKElement {
     removable = false;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFChip, AKGlobal];
+        return [PFBase, PFButton, PFChip];
     }
 
     render(): TemplateResult {

web/src/elements/chips/ChipGroup.ts

@@ -4,7 +4,6 @@ import { Chip } from "@goauthentik/elements/chips/Chip";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";
@@ -18,7 +17,6 @@ export class ChipGroup extends AKElement {
             PFChip,
             PFChipGroup,
             PFButton,
-            AKGlobal,
             css`
                 ::slotted(*) {
                     margin: 0 2px;

web/src/elements/forms/Form.ts

@@ -12,7 +12,6 @@ import "@polymer/paper-input/paper-input";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -62,7 +61,6 @@ export class Form<T> extends AKElement {
             PFInputGroup,
             PFFormControl,
             PFSwitch,
-            AKGlobal,
             css`
                 select[multiple] {
                     height: 15em;

web/src/elements/forms/FormGroup.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -20,7 +19,6 @@ export class FormGroup extends AKElement {
             PFForm,
             PFButton,
             PFFormControl,
-            AKGlobal,
             css`
                 slot[name="body"][hidden] {
                     display: none !important;

web/src/elements/forms/HorizontalFormElement.ts

@@ -8,7 +8,6 @@ import { CSSResult, css } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -20,7 +19,6 @@ export class HorizontalFormElement extends AKElement {
             PFBase,
             PFForm,
             PFFormControl,
-            AKGlobal,
             css`
                 .pf-c-form__group {
                     display: grid;

web/src/elements/forms/Radio.ts

@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -36,7 +35,6 @@ export class Radio<T> extends AKElement {
             PFBase,
             PFRadio,
             PFForm,
-            AKGlobal,
             css`
                 .pf-c-form__group-control {
                     padding-top: calc(

web/src/elements/forms/SearchSelect.ts

@@ -8,7 +8,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html, render } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -39,7 +38,7 @@ export class SearchSelect<T> extends AKElement {
     placeholder: string = t`Select an object.`;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFFormControl, PFSelect, AKGlobal];
+        return [PFBase, PFForm, PFFormControl, PFSelect];
     }
 
     @property({ attribute: false })

web/src/elements/notifications/APIDrawer.ts

@@ -7,7 +7,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@@ -26,7 +25,6 @@ export class APIDrawer extends AKElement {
             PFButton,
             PFContent,
             PFDropdown,
-            AKGlobal,
             css`
                 .pf-c-notification-drawer__header {
                     height: 114px;

web/src/elements/notifications/NotificationDrawer.ts

@@ -12,7 +12,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@@ -30,7 +29,7 @@ export class NotificationDrawer extends AKElement {
     unread = 0;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
+        return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown].concat(
             css`
                 .pf-c-drawer__body {
                     height: 100%;

web/src/elements/router/RouterOutlet.ts

@@ -7,8 +7,6 @@ import "@goauthentik/elements/router/Router404";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
-
 // Poliyfill for hashchange.newURL,
 // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
 window.addEventListener("load", () => {
@@ -57,7 +55,6 @@ export class RouterOutlet extends AKElement {
 
     static get styles(): CSSResult[] {
         return [
-            AKGlobal,
             css`
                 :host {
                     background-color: transparent !important;

web/src/elements/sidebar/Sidebar.ts

@@ -5,7 +5,6 @@ import "@goauthentik/elements/sidebar/SidebarUser";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -17,7 +16,6 @@ export class Sidebar extends AKElement {
             PFBase,
             PFPage,
             PFNav,
-            AKGlobal,
             css`
                 :host {
                     z-index: 100;

web/src/elements/sidebar/SidebarBrand.ts

@@ -7,13 +7,12 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { CurrentTenant } from "@goauthentik/api";
+import { CurrentTenant, UiThemeEnum } from "@goauthentik/api";
 
 // If the viewport is wider than MIN_WIDTH, the sidebar
 // is shown besides the content, and not overlaid.
@@ -24,6 +23,7 @@ export const DefaultTenant: CurrentTenant = {
     brandingFavicon: "/static/dist/assets/icons/icon.png",
     brandingTitle: "authentik",
     uiFooterLinks: [],
+    uiTheme: UiThemeEnum.Automatic,
     matchedDomain: "",
     defaultLocale: "",
 };
@@ -39,7 +39,6 @@ export class SidebarBrand extends AKElement {
             PFGlobal,
             PFPage,
             PFButton,
-            AKGlobal,
             css`
                 :host {
                     display: flex;

web/src/elements/sidebar/SidebarItem.ts

@@ -6,7 +6,6 @@ import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -18,7 +17,6 @@ export class SidebarItem extends AKElement {
             PFBase,
             PFPage,
             PFNav,
-            AKGlobal,
             css`
                 :host {
                     z-index: 100;

web/src/elements/table/Table.ts

@@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
@@ -161,7 +160,6 @@ export abstract class Table<T> extends AKElement {
             PFToolbar,
             PFDropdown,
             PFPagination,
-            AKGlobal,
             css`
                 .pf-c-table thead .pf-c-table__check {
                     min-width: 3rem;

web/src/elements/table/TableModal.ts

@@ -7,7 +7,6 @@ import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
@@ -30,7 +29,6 @@ export abstract class TableModal<T> extends Table<T> {
             PFBackdrop,
             PFPage,
             PFStack,
-            AKGlobal,
             MODAL_BUTTON_STYLES,
         );
     }

web/src/elements/table/TablePagination.ts

@@ -5,7 +5,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -37,17 +36,14 @@ export class TablePagination extends AKElement {
             PFBase,
             PFButton,
             PFPagination,
-            AKGlobal,
             css`
-                @media (prefers-color-scheme: dark) {
+                :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button {
-                    .pf-c-pagination__nav-control .pf-c-button {
                     color: var(--pf-c-button--m-plain--disabled--Color);
                     --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--Color);
                 }
-                    .pf-c-pagination__nav-control .pf-c-button:disabled {
+                :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button:disabled {
                     color: var(--pf-c-button--disabled--Color);
                 }
-                }
             `,
         ];
     }

web/src/elements/table/TableSearch.ts

@@ -6,7 +6,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
@@ -28,7 +27,6 @@ export class TableSearch extends AKElement {
             PFToolbar,
             PFInputGroup,
             PFFormControl,
-            AKGlobal,
             css`
                 ::-webkit-search-cancel-button {
                     display: none;

web/src/elements/utils/TimeDeltaHelp.ts

@@ -6,7 +6,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@@ -17,7 +16,7 @@ export class TimeDeltaHelp extends AKElement {
     negative = false;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFForm, PFList, AKGlobal];
+        return [PFBase, PFForm, PFList];
     }
 
     render(): TemplateResult {

web/src/elements/wizard/ActionWizardPage.ts

@@ -7,7 +7,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
@@ -32,7 +31,7 @@ export interface ActionStateBundle {
 @customElement("ak-wizard-page-action")
 export class ActionWizardPage extends WizardPage {
     static get styles(): CSSResult[] {
-        return [PFBase, PFBullseye, PFEmptyState, PFTitle, PFProgressStepper, AKGlobal];
+        return [PFBase, PFBullseye, PFEmptyState, PFTitle, PFProgressStepper];
     }
 
     @property({ attribute: false })

web/src/elements/wizard/WizardFormPage.ts

@@ -4,7 +4,6 @@ import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -33,7 +32,7 @@ export class WizardForm extends Form<KeyUnknown> {
 
 export class WizardFormPage extends WizardPage {
     static get styles(): CSSResult[] {
-        return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFInputGroup, PFFormControl, AKGlobal];
+        return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFInputGroup, PFFormControl];
     }
 
     inputCallback(): void {

web/src/elements/wizard/WizardPage.ts

@@ -4,13 +4,12 @@ import { Wizard } from "@goauthentik/elements/wizard/Wizard";
 import { CSSResult, PropertyDeclaration, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-wizard-page")
 export class WizardPage extends AKElement {
     static get styles(): CSSResult[] {
-        return [PFBase, AKGlobal];
+        return [PFBase];
     }
 
     @property()

web/src/flow/FlowExecutor.ts

@@ -8,7 +8,7 @@ import { globalAK } from "@goauthentik/common/global";
 import { configureSentry } from "@goauthentik/common/sentry";
 import { first } from "@goauthentik/common/utils";
 import { WebsocketClient } from "@goauthentik/common/ws";
-import { AKElement } from "@goauthentik/elements/Base";
+import { AdoptedStyleSheetsElement, Interface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/LoadingOverlay";
 import "@goauthentik/flow/stages/FlowErrorStage";
 import "@goauthentik/flow/stages/RedirectStage";
@@ -31,7 +31,6 @@ import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
@@ -52,10 +51,11 @@ import {
     RedirectChallenge,
     ResponseError,
     ShellChallenge,
+    UiThemeEnum,
 } from "@goauthentik/api";
 
 @customElement("ak-flow-executor")
-export class FlowExecutor extends AKElement implements StageHost {
+export class FlowExecutor extends Interface implements StageHost {
     flowSlug?: string;
 
     private _challenge?: ChallengeTypes;
@@ -120,8 +120,7 @@ export class FlowExecutor extends AKElement implements StageHost {
     ws: WebsocketClient;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage, AKGlobal]
+        return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage].concat(css`
-            .concat(css`
             .ak-hidden {
                 display: none;
             }
@@ -154,21 +153,19 @@ export class FlowExecutor extends AKElement implements StageHost {
             .pf-c-login.sidebar_right .pf-c-list {
                 color: #000;
             }
-            @media (prefers-color-scheme: dark) {
-                .pf-c-login.sidebar_left .ak-login-container,
-                .pf-c-login.sidebar_right .ak-login-container {
-                    background-color: var(--ak-dark-background);
-                }
-                .pf-c-login.sidebar_left .pf-c-list,
-                .pf-c-login.sidebar_right .pf-c-list {
-                    color: var(--ak-dark-foreground);
-                }
-            }
             .pf-c-login.sidebar_right {
                 justify-content: flex-end;
                 padding-top: 0;
                 padding-bottom: 0;
             }
+            :host([theme="dark"]) .pf-c-login.sidebar_left .ak-login-container,
+            :host([theme="dark"]) .pf-c-login.sidebar_right .ak-login-container {
+                background-color: var(--ak-dark-background);
+            }
+            :host([theme="dark"]) .pf-c-login.sidebar_left .pf-c-list,
+            :host([theme="dark"]) .pf-c-login.sidebar_right .pf-c-list {
+                color: var(--ak-dark-foreground);
+            }
         `);
     }
 
@@ -185,6 +182,11 @@ export class FlowExecutor extends AKElement implements StageHost {
         tenant().then((tenant) => (this.tenant = tenant));
     }
 
+    async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
+        const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
+        this._applyTheme(root, bootstrapTheme);
+    }
+
     submit(payload?: FlowChallengeResponseRequest): Promise<boolean> {
         if (!payload) return Promise.reject();
         if (!this.challenge) return Promise.reject();

web/src/flow/FlowInspector.ts

@@ -8,7 +8,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
@@ -38,7 +37,6 @@ export class FlowInspector extends AKElement {
             PFNotificationDrawer,
             PFDescriptionList,
             PFProgressStepper,
-            AKGlobal,
             css`
                 code.break {
                     word-break: break-all;

web/src/flow/providers/oauth2/DeviceCode.ts

@@ -8,7 +8,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -27,7 +26,7 @@ export class OAuth2DeviceCode extends BaseStage<
     OAuthDeviceCodeChallengeResponseRequest
 > {
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     render(): TemplateResult {

web/src/flow/sources/apple/AppleLoginInit.ts

@@ -6,7 +6,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -22,7 +21,7 @@ export class AppleLoginInit extends BaseStage<AppleLoginChallenge, AppleChalleng
     isModalShown = false;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     firstUpdated(): void {

web/src/flow/sources/plex/PlexLoginInit.ts

@@ -10,7 +10,6 @@ import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -34,7 +33,7 @@ export class PlexLoginInit extends BaseStage<
     authUrl?: string;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     async firstUpdated(): Promise<void> {

web/src/flow/stages/FlowErrorStage.ts

@@ -7,7 +7,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFLogin from "@patternfly/patternfly/components/Login/login.css";
@@ -25,7 +24,6 @@ export class FlowErrorStage extends BaseStage<FlowErrorChallenge, FlowChallengeR
             PFForm,
             PFFormControl,
             PFTitle,
-            AKGlobal,
             css`
                 pre {
                     overflow-x: scroll;

web/src/flow/stages/RedirectStage.ts

@@ -5,7 +5,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -25,7 +24,6 @@ export class RedirectStage extends BaseStage<RedirectChallenge, FlowChallengeRes
             PFButton,
             PFFormControl,
             PFTitle,
-            AKGlobal,
             css`
                 code {
                     word-break: break-all;

web/src/flow/stages/access_denied/AccessDeniedStage.ts

@@ -9,7 +9,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
@@ -28,7 +27,6 @@ export class AccessDeniedIcon extends AKElement {
         return [
             PFBase,
             PFTitle,
-            AKGlobal,
             css`
                 .big-icon {
                     display: flex;
@@ -67,7 +65,7 @@ export class AccessDeniedStage extends BaseStage<
     FlowChallengeResponseRequest
 > {
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle];
     }
 
     render(): TemplateResult {

web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts

@@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -31,7 +30,7 @@ export class AuthenticatorDuoStage extends BaseStage<
     AuthenticatorDuoChallengeResponseRequest
 > {
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     firstUpdated(): void {

web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts

@@ -9,7 +9,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
@@ -29,7 +28,7 @@ export class AuthenticatorSMSStage extends BaseStage<
     AuthenticatorSMSChallengeResponseRequest
 > {
     static get styles(): CSSResult[] {
-        return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+        return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     renderPhoneNumber(): TemplateResult {

web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts

@@ -9,7 +9,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -35,7 +34,6 @@ export class AuthenticatorStaticStage extends BaseStage<
             PFFormControl,
             PFTitle,
             PFButton,
-            AKGlobal,
             css`
                 /* Static OTP Tokens */
                 ul {

web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts

@@ -12,7 +12,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -38,7 +37,6 @@ export class AuthenticatorTOTPStage extends BaseStage<
             PFFormControl,
             PFTitle,
             PFButton,
-            AKGlobal,
             css`
                 .qr-container {
                     display: flex;

web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts

@@ -11,7 +11,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -78,7 +77,7 @@ export class AuthenticatorValidateStage
     }
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
             ul {
                 padding-top: 1rem;
             }

web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts

@@ -11,7 +11,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -38,7 +37,7 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
     showBackButton = false;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     render(): TemplateResult {

web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts

@@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -36,7 +35,7 @@ export class AuthenticatorValidateStageWebDuo extends BaseStage<
     showBackButton = false;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
     }
 
     firstUpdated(): void {

web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts

@@ -10,7 +10,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
@@ -52,7 +51,6 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
             PFFormControl,
             PFTitle,
             PFButton,
-            AKGlobal,
         ];
     }
 

web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts

@@ -11,7 +11,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -42,7 +41,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage<
     publicKeyCredentialCreateOptions?: PublicKeyCredentialCreationOptions;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFFormControl, PFForm, PFTitle, PFButton, AKGlobal];
+        return [PFBase, PFLogin, PFFormControl, PFForm, PFTitle, PFButton];
     }
 
     async register(): Promise<void> {

web/src/flow/stages/autosubmit/AutosubmitStage.ts

@@ -6,7 +6,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -22,7 +21,7 @@ export class AutosubmitStage extends BaseStage<
     AutoSubmitChallengeResponseRequest
 > {
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
     }
 
     updated(): void {