diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html
index f02746ab2..fb2b1195c 100644
--- a/authentik/core/templates/base/skeleton.html
+++ b/authentik/core/templates/base/skeleton.html
@@ -16,6 +16,7 @@
{% block head_before %}
{% endblock %}
+
{% block head %}
diff --git a/authentik/tenants/api.py b/authentik/tenants/api.py
index d7a281371..42b2985c0 100644
--- a/authentik/tenants/api.py
+++ b/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)
diff --git a/authentik/tenants/tests.py b/authentik/tenants/tests.py
index 95e43e8d6..73bd8f7d3 100644
--- a/authentik/tenants/tests.py
+++ b/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": "",
},
)
diff --git a/schema.yml b/schema.yml
index b2ae7439e..f1848e670 100644
--- a/schema.yml
+++ b/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
diff --git a/web/rollup.config.js b/web/rollup.config.js
index 18ae58cb0..67c3ff104 100644
--- a/web/rollup.config.js
+++ b/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/" },
{
diff --git a/web/src/admin/AdminInterface.ts b/web/src/admin/AdminInterface.ts
index 28502a9b6..3c167a04c 100644
--- a/web/src/admin/AdminInterface.ts
+++ b/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;
- }
- @media (prefers-color-scheme: dark) {
- /* Global page background colour */
- .pf-c-page {
- --pf-c-page--BackgroundColor: var(--ak-dark-background);
- }
+ background-color: transparent !important;
}
`,
];
diff --git a/web/src/admin/DebugPage.ts b/web/src/admin/DebugPage.ts
index 76a28112a..68db6ae27 100644
--- a/web/src/admin/DebugPage.ts
+++ b/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 {
diff --git a/web/src/admin/admin-overview/AdminOverviewPage.ts b/web/src/admin/admin-overview/AdminOverviewPage.ts
index f6267897c..41b19a4e1 100644
--- a/web/src/admin/admin-overview/AdminOverviewPage.ts
+++ b/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;
diff --git a/web/src/admin/admin-overview/DashboardUserPage.ts b/web/src/admin/admin-overview/DashboardUserPage.ts
index c189c42c9..1ca918d0b 100644
--- a/web/src/admin/admin-overview/DashboardUserPage.ts
+++ b/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;
diff --git a/web/src/admin/admin-overview/TopApplicationsTable.ts b/web/src/admin/admin-overview/TopApplicationsTable.ts
index dcd56e606..1638cc1d3 100644
--- a/web/src/admin/admin-overview/TopApplicationsTable.ts
+++ b/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 {
diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts
index add0fb340..8f61692bd 100644
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/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 {
return super.styles.concat(
PFAvatar,
PFCard,
- AKGlobal,
css`
/* Fix alignment issues with images in tables */
.pf-c-table tbody > tr > * {
diff --git a/web/src/admin/applications/ApplicationViewPage.ts b/web/src/admin/applications/ApplicationViewPage.ts
index a6bad43ed..723c19d8b 100644
--- a/web/src/admin/applications/ApplicationViewPage.ts
+++ b/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 [
- PFBase,
- PFBanner,
- PFPage,
- PFContent,
- PFButton,
- PFDescriptionList,
- PFGrid,
- PFCard,
- AKGlobal,
- ];
+ return [PFBase, PFBanner, PFPage, PFContent, PFButton, PFDescriptionList, PFGrid, PFCard];
}
render(): TemplateResult {
diff --git a/web/src/admin/applications/wizard/ApplicationWizard.ts b/web/src/admin/applications/wizard/ApplicationWizard.ts
index 04a3fc078..6bff94ff0 100644
--- a/web/src/admin/applications/wizard/ApplicationWizard.ts
+++ b/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 })
diff --git a/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts b/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts
index 2f0c05188..0771d9ac5 100644
--- a/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts
+++ b/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 {
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts
index 3c618e038..89af99fd1 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts
+++ b/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`;
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts
index 331d23781..005843c6d 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts
+++ b/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`;
diff --git a/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts b/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts
index 2b9a9ba75..17e5f9f2c 100644
--- a/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts
+++ b/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`;
diff --git a/web/src/admin/events/EventViewPage.ts b/web/src/admin/events/EventViewPage.ts
index 117ae2273..f21e61c7a 100644
--- a/web/src/admin/events/EventViewPage.ts
+++ b/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 {
diff --git a/web/src/admin/flows/FlowViewPage.ts b/web/src/admin/flows/FlowViewPage.ts
index 78c60a7df..ca90898c0 100644
--- a/web/src/admin/flows/FlowViewPage.ts
+++ b/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 [
- PFBase,
- PFPage,
- PFDescriptionList,
- PFButton,
- PFCard,
- PFContent,
- PFGrid,
- AKGlobal,
- ].concat(
+ return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid].concat(
css`
img.pf-icon {
max-height: 24px;
diff --git a/web/src/admin/groups/GroupViewPage.ts b/web/src/admin/groups/GroupViewPage.ts
index ae9142985..5c6e6b896 100644
--- a/web/src/admin/groups/GroupViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/admin/outposts/OutpostHealth.ts b/web/src/admin/outposts/OutpostHealth.ts
index f78c4813f..eb83613ce 100644
--- a/web/src/admin/outposts/OutpostHealth.ts
+++ b/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;
diff --git a/web/src/admin/outposts/OutpostHealthSimple.ts b/web/src/admin/outposts/OutpostHealthSimple.ts
index 96a101b3b..9b82f0d90 100644
--- a/web/src/admin/outposts/OutpostHealthSimple.ts
+++ b/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() {
diff --git a/web/src/admin/outposts/ServiceConnectionWizard.ts b/web/src/admin/outposts/ServiceConnectionWizard.ts
index 84ee1e5c3..2e1067ff0 100644
--- a/web/src/admin/outposts/ServiceConnectionWizard.ts
+++ b/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()
diff --git a/web/src/admin/policies/PolicyWizard.ts b/web/src/admin/policies/PolicyWizard.ts
index e79fe8fb3..274d5a7d4 100644
--- a/web/src/admin/policies/PolicyWizard.ts
+++ b/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()
diff --git a/web/src/admin/property-mappings/PropertyMappingWizard.ts b/web/src/admin/property-mappings/PropertyMappingWizard.ts
index 32c75be51..7b6d0c579 100644
--- a/web/src/admin/property-mappings/PropertyMappingWizard.ts
+++ b/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 })
diff --git a/web/src/admin/providers/ProviderViewPage.ts b/web/src/admin/providers/ProviderViewPage.ts
index 14e4690b1..b8dcb7da1 100644
--- a/web/src/admin/providers/ProviderViewPage.ts
+++ b/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 {
diff --git a/web/src/admin/providers/ProviderWizard.ts b/web/src/admin/providers/ProviderWizard.ts
index 82a7f7836..16c70266d 100644
--- a/web/src/admin/providers/ProviderWizard.ts
+++ b/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()
diff --git a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts b/web/src/admin/providers/ldap/LDAPProviderViewPage.ts
index 61447f184..354554a7d 100644
--- a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
index 009efcd19..19a92a3b3 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts b/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
index eed6cfc3c..76ef79026 100644
--- a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/admin/providers/saml/SAMLProviderViewPage.ts b/web/src/admin/providers/saml/SAMLProviderViewPage.ts
index 88a98fa21..62a77f7ac 100644
--- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/admin/providers/scim/SCIMProviderViewPage.ts b/web/src/admin/providers/scim/SCIMProviderViewPage.ts
index e97e231d5..047b04a9b 100644
--- a/web/src/admin/providers/scim/SCIMProviderViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/admin/sources/SourceWizard.ts b/web/src/admin/sources/SourceWizard.ts
index ef4bef89a..a60f205db 100644
--- a/web/src/admin/sources/SourceWizard.ts
+++ b/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 })
diff --git a/web/src/admin/sources/ldap/LDAPSourceViewPage.ts b/web/src/admin/sources/ldap/LDAPSourceViewPage.ts
index 84f67cab6..2f42fc2f2 100644
--- a/web/src/admin/sources/ldap/LDAPSourceViewPage.ts
+++ b/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 [
- PFBase,
- PFPage,
- PFButton,
- PFGrid,
- PFContent,
- PFCard,
- PFDescriptionList,
- PFList,
- AKGlobal,
- ];
+ return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, PFList];
}
constructor() {
diff --git a/web/src/admin/sources/oauth/OAuthSourceViewPage.ts b/web/src/admin/sources/oauth/OAuthSourceViewPage.ts
index 6f1993284..abf6224fe 100644
--- a/web/src/admin/sources/oauth/OAuthSourceViewPage.ts
+++ b/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() {
diff --git a/web/src/admin/sources/plex/PlexSourceViewPage.ts b/web/src/admin/sources/plex/PlexSourceViewPage.ts
index b95cf0222..404237647 100644
--- a/web/src/admin/sources/plex/PlexSourceViewPage.ts
+++ b/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() {
diff --git a/web/src/admin/sources/saml/SAMLSourceViewPage.ts b/web/src/admin/sources/saml/SAMLSourceViewPage.ts
index c3a651f0a..cd0efd15c 100644
--- a/web/src/admin/sources/saml/SAMLSourceViewPage.ts
+++ b/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() {
diff --git a/web/src/admin/stages/StageWizard.ts b/web/src/admin/stages/StageWizard.ts
index 2ab588aa3..728411150 100644
--- a/web/src/admin/stages/StageWizard.ts
+++ b/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 = 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()
diff --git a/web/src/admin/stages/invitation/InvitationListLink.ts b/web/src/admin/stages/invitation/InvitationListLink.ts
index b38d6adc6..c8c0e6f28 100644
--- a/web/src/admin/stages/invitation/InvitationListLink.ts
+++ b/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 {
diff --git a/web/src/admin/users/UserListPage.ts b/web/src/admin/users/UserListPage.ts
index 48af04ed4..4185291db 100644
--- a/web/src/admin/users/UserListPage.ts
+++ b/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 {
activePath = getURLParam("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> {
diff --git a/web/src/admin/users/UserViewPage.ts b/web/src/admin/users/UserViewPage.ts
index cfa535c22..c73dfb858 100644
--- a/web/src/admin/users/UserViewPage.ts
+++ b/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,
];
}
diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css
index f455087f3..d2b7a073e 100644
--- a/web/src/common/styles/authentik.css
+++ b/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;
}
diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css
new file mode 100644
index 000000000..b72931d2b
--- /dev/null
+++ b/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);
+}
diff --git a/web/src/common/ui/config.ts b/web/src/common/ui/config.ts
index ae27d31eb..e1108f70f 100644
--- a/web/src/common/ui/config.ts
+++ b/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: "",
};
diff --git a/web/src/elements/Alert.ts b/web/src/elements/Alert.ts
index d5c3dcfbe..e75d2c393 100644
--- a/web/src/elements/Alert.ts
+++ b/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 {
diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index b0ef1483a..95c1cc4a4 100644
--- a/web/src/elements/Base.ts
+++ b/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 | undefined;
function fetchCustomCSS(): Promise {
if (!css) {
@@ -22,28 +36,115 @@ function fetchCustomCSS(): Promise {
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) => {
- sheets.map((css) => {
- if (css === "") {
- return;
- }
- new CSSStyleSheet().replace(css).then((sheet) => {
- if (!this.shadowRoot) {
- return;
- }
- this.shadowRoot.adoptedStyleSheets = [
- ...this.shadowRoot.adoptedStyleSheets,
- sheet,
- ];
- });
+ }
+
+ 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 {
+ // 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 {
+ const sheets = await fetchCustomCSS();
+ sheets.map((css) => {
+ if (css === "") {
+ return;
+ }
+ new CSSStyleSheet().replace(css).then((sheet) => {
+ 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;
+ }
+ // Make sure we only get to this callback once we've picked a concise theme choice
+ this.dispatchEvent(
+ 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() {
super.disconnectedCallback();
this.removeEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange);
@@ -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 {
+ const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
+ this._applyTheme(root, bootstrapTheme);
+ uiConfig().then((config) => {
+ if (config.theme.base) {
+ this._applyTheme(root, config.theme.base);
+ }
+ });
+ }
+}
diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts
index 3e9ab4cdc..5f0a6f2dd 100644
--- a/web/src/elements/CodeMirror.ts
+++ b/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 extends AKElement {
@property({ type: Boolean })
@@ -126,18 +128,17 @@ export class CodeMirrorTextarea extends AKElement {
}
firstUpdated(): void {
- const matcher = window.matchMedia("(prefers-color-scheme: light)");
- const handler = (ev?: MediaQueryListEvent) => {
- let theme;
- if (ev?.matches || matcher.matches) {
- theme = this.themeLight;
+ this.addEventListener("themeChange", ((ev: CustomEvent) => {
+ if (ev.detail === UiThemeEnum.Dark) {
+ this.editor?.dispatch({
+ effects: this.theme.reconfigure(this.themeDark),
+ });
} else {
- theme = this.themeDark;
+ this.editor?.dispatch({
+ effects: this.theme.reconfigure(this.themeLight),
+ });
}
- this.editor?.dispatch({
- effects: this.theme.reconfigure(theme),
- });
- };
+ }) as EventListener);
const extensions = [
history(),
keymap.of([...defaultKeymap, ...historyKeymap]),
@@ -148,7 +149,7 @@ export class CodeMirrorTextarea 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 extends AKElement {
doc: this._value,
});
this.shadowRoot?.appendChild(this.editor.dom);
- matcher.addEventListener("change", handler);
- handler();
}
}
diff --git a/web/src/elements/Diagram.ts b/web/src/elements/Diagram.ts
index 82818c5fe..5d8656daa 100644
--- a/web/src/elements/Diagram.ts
+++ b/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)");
- 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();
+ this.config = {
+ // 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,
+ flowchart: {
+ curve: "linear",
+ },
};
- matcher.addEventListener("change", handler);
- handler();
+ mermaid.initialize(this.config);
}
firstUpdated(): void {
if (this.handlerBound) return;
window.addEventListener(EVENT_REFRESH, this.refreshHandler);
+ this.addEventListener("themeChange", ((ev: CustomEvent) => {
+ 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();
}
diff --git a/web/src/elements/Divider.ts b/web/src/elements/Divider.ts
index 7e184bf22..3f90bb1c7 100644
--- a/web/src/elements/Divider.ts
+++ b/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;
diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts
index c6cf6efdc..f419d4e2f 100644
--- a/web/src/elements/EmptyState.ts
+++ b/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 {
diff --git a/web/src/elements/Expand.ts b/web/src/elements/Expand.ts
index 151e28699..cdf59f558 100644
--- a/web/src/elements/Expand.ts
+++ b/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 {
diff --git a/web/src/elements/Label.ts b/web/src/elements/Label.ts
index 62562647e..51438c740 100644
--- a/web/src/elements/Label.ts
+++ b/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 {
diff --git a/web/src/elements/Markdown.ts b/web/src/elements/Markdown.ts
index d34831b6d..4ee60b9c4 100644
--- a/web/src/elements/Markdown.ts
+++ b/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;
diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts
index 79f6fe418..073277021 100644
--- a/web/src/elements/PageHeader.ts
+++ b/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;
diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index bb035569a..e567b5281 100644
--- a/web/src/elements/Tabs.ts
+++ b/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;
diff --git a/web/src/elements/Tooltip.ts b/web/src/elements/Tooltip.ts
index 6fa13137b..2f0d1fae5 100644
--- a/web/src/elements/Tooltip.ts
+++ b/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;
diff --git a/web/src/elements/TreeView.ts b/web/src/elements/TreeView.ts
index 29456d981..23530c07b 100644
--- a/web/src/elements/TreeView.ts
+++ b/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 })
diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 9dedc4263..9a2b4fd0d 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/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 {
diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts
index 556a6d516..e2f22f024 100644
--- a/web/src/elements/buttons/SpinnerButton.ts
+++ b/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 */
diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts
index 4a9e81071..8eec5f0c4 100644
--- a/web/src/elements/cards/AggregateCard.ts
+++ b/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%;
diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts
index 6cfe2283f..208e7df28 100644
--- a/web/src/elements/charts/Chart.ts
+++ b/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 extends AKElement {
];
}
- constructor() {
- super();
- const matcher = window.matchMedia("(prefers-color-scheme: light)");
- const handler = (ev?: MediaQueryListEvent) => {
- if (ev?.matches || matcher.matches) {
+ connectedCallback(): void {
+ super.connectedCallback();
+ window.addEventListener("resize", this.resizeHandler);
+ this.addEventListener(EVENT_REFRESH, this.refreshHandler);
+ this.addEventListener("themeChange", ((ev: CustomEvent) => {
+ if (ev.detail === UiThemeEnum.Light) {
this.fontColour = FONT_COLOUR_LIGHT_MODE;
} else {
this.fontColour = FONT_COLOUR_DARK_MODE;
}
this.chart?.update();
- };
- matcher.addEventListener("change", handler);
- handler();
- }
-
- connectedCallback(): void {
- super.connectedCallback();
- window.addEventListener("resize", this.resizeHandler);
- this.addEventListener(EVENT_REFRESH, this.refreshHandler);
+ }) as EventListener);
}
disconnectedCallback(): void {
diff --git a/web/src/elements/chips/Chip.ts b/web/src/elements/chips/Chip.ts
index 4aa786f72..8ca77ba5a 100644
--- a/web/src/elements/chips/Chip.ts
+++ b/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 {
diff --git a/web/src/elements/chips/ChipGroup.ts b/web/src/elements/chips/ChipGroup.ts
index 4222d61d6..71ea481d4 100644
--- a/web/src/elements/chips/ChipGroup.ts
+++ b/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;
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 8f2841563..85930009e 100644
--- a/web/src/elements/forms/Form.ts
+++ b/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 extends AKElement {
PFInputGroup,
PFFormControl,
PFSwitch,
- AKGlobal,
css`
select[multiple] {
height: 15em;
diff --git a/web/src/elements/forms/FormGroup.ts b/web/src/elements/forms/FormGroup.ts
index e08aaf6dc..347a06a40 100644
--- a/web/src/elements/forms/FormGroup.ts
+++ b/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;
diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts
index ea12bf826..95b035630 100644
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/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;
diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts
index 0f028cf40..b25a3b256 100644
--- a/web/src/elements/forms/Radio.ts
+++ b/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 extends AKElement {
PFBase,
PFRadio,
PFForm,
- AKGlobal,
css`
.pf-c-form__group-control {
padding-top: calc(
diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
index bd5f8d136..56cca716e 100644
--- a/web/src/elements/forms/SearchSelect.ts
+++ b/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 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 })
diff --git a/web/src/elements/notifications/APIDrawer.ts b/web/src/elements/notifications/APIDrawer.ts
index 884e63026..fca57669a 100644
--- a/web/src/elements/notifications/APIDrawer.ts
+++ b/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;
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index ac811769e..49e285a4f 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/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%;
diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts
index 3d738168f..8aa54e013 100644
--- a/web/src/elements/router/RouterOutlet.ts
+++ b/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;
diff --git a/web/src/elements/sidebar/Sidebar.ts b/web/src/elements/sidebar/Sidebar.ts
index ecc3e7351..4ffd84cf9 100644
--- a/web/src/elements/sidebar/Sidebar.ts
+++ b/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;
diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts
index 91fc6dff7..efa83cee2 100644
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/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;
diff --git a/web/src/elements/sidebar/SidebarItem.ts b/web/src/elements/sidebar/SidebarItem.ts
index a8df29cef..d7e3346c8 100644
--- a/web/src/elements/sidebar/SidebarItem.ts
+++ b/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;
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 682329cba..24f54b748 100644
--- a/web/src/elements/table/Table.ts
+++ b/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 extends AKElement {
PFToolbar,
PFDropdown,
PFPagination,
- AKGlobal,
css`
.pf-c-table thead .pf-c-table__check {
min-width: 3rem;
diff --git a/web/src/elements/table/TableModal.ts b/web/src/elements/table/TableModal.ts
index 7ea6ee9eb..328f5ffdf 100644
--- a/web/src/elements/table/TableModal.ts
+++ b/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 extends Table {
PFBackdrop,
PFPage,
PFStack,
- AKGlobal,
MODAL_BUTTON_STYLES,
);
}
diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts
index ca8fc4b5d..169e2d510 100644
--- a/web/src/elements/table/TablePagination.ts
+++ b/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,16 +36,13 @@ export class TablePagination extends AKElement {
PFBase,
PFButton,
PFPagination,
- AKGlobal,
css`
- @media (prefers-color-scheme: dark) {
- .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 {
- color: var(--pf-c-button--disabled--Color);
- }
+ :host([theme="dark"]) .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);
+ }
+ :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button:disabled {
+ color: var(--pf-c-button--disabled--Color);
}
`,
];
diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts
index 56eba28f7..c7f68ec5e 100644
--- a/web/src/elements/table/TableSearch.ts
+++ b/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;
diff --git a/web/src/elements/utils/TimeDeltaHelp.ts b/web/src/elements/utils/TimeDeltaHelp.ts
index aa50d0c18..c92a37cd9 100644
--- a/web/src/elements/utils/TimeDeltaHelp.ts
+++ b/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 {
diff --git a/web/src/elements/wizard/ActionWizardPage.ts b/web/src/elements/wizard/ActionWizardPage.ts
index b88f28328..a35445029 100644
--- a/web/src/elements/wizard/ActionWizardPage.ts
+++ b/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 })
diff --git a/web/src/elements/wizard/WizardFormPage.ts b/web/src/elements/wizard/WizardFormPage.ts
index 5c42349c1..08a815c71 100644
--- a/web/src/elements/wizard/WizardFormPage.ts
+++ b/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 {
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 {
diff --git a/web/src/elements/wizard/WizardPage.ts b/web/src/elements/wizard/WizardPage.ts
index 7eefdb7bf..6fdee111f 100644
--- a/web/src/elements/wizard/WizardPage.ts
+++ b/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()
diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index ef5682240..5d493796f 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/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]
- .concat(css`
+ return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage].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 {
+ const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
+ this._applyTheme(root, bootstrapTheme);
+ }
+
submit(payload?: FlowChallengeResponseRequest): Promise {
if (!payload) return Promise.reject();
if (!this.challenge) return Promise.reject();
diff --git a/web/src/flow/FlowInspector.ts b/web/src/flow/FlowInspector.ts
index 2513c9b54..4c5d94ce5 100644
--- a/web/src/flow/FlowInspector.ts
+++ b/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;
diff --git a/web/src/flow/providers/oauth2/DeviceCode.ts b/web/src/flow/providers/oauth2/DeviceCode.ts
index 8eb976759..40ffee48f 100644
--- a/web/src/flow/providers/oauth2/DeviceCode.ts
+++ b/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 {
diff --git a/web/src/flow/sources/apple/AppleLoginInit.ts b/web/src/flow/sources/apple/AppleLoginInit.ts
index 1dd84cf2d..516565d29 100644
--- a/web/src/flow/sources/apple/AppleLoginInit.ts
+++ b/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 {
diff --git a/web/src/flow/stages/FlowErrorStage.ts b/web/src/flow/stages/FlowErrorStage.ts
index 48a534667..9cce31ab8 100644
--- a/web/src/flow/stages/FlowErrorStage.ts
+++ b/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 {
static get styles(): CSSResult[] {
- return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
+ return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle];
}
render(): TemplateResult {
diff --git a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
index b07b010f7..1bd96d8ec 100644
--- a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
+++ b/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 {
diff --git a/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts b/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts
index edcd0b7fe..0a75518fa 100644
--- a/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts
+++ b/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 {
diff --git a/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts
index ff1c6cb0c..fe319f06b 100644
--- a/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts
+++ b/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 {
diff --git a/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
index 4a55e4d8a..11fe08ea3 100644
--- a/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+++ b/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;
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
index d78d77841..1525a063b 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
+++ b/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;
}
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
index 854fa4884..4a8e8d4db 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
+++ b/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 {
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
index 4ee7e3b32..e093e95c5 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
+++ b/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 {
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
index b395caf57..cb0ce5a21 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
+++ b/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,
];
}
diff --git a/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts b/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
index f7b22f029..59af79122 100644
--- a/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
+++ b/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 {
diff --git a/web/src/flow/stages/autosubmit/AutosubmitStage.ts b/web/src/flow/stages/autosubmit/AutosubmitStage.ts
index 9e9fb1929..a9053d861 100644
--- a/web/src/flow/stages/autosubmit/AutosubmitStage.ts
+++ b/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 {
diff --git a/web/src/flow/stages/captcha/CaptchaStage.ts b/web/src/flow/stages/captcha/CaptchaStage.ts
index 42ca38d94..1d2df1b79 100644
--- a/web/src/flow/stages/captcha/CaptchaStage.ts
+++ b/web/src/flow/stages/captcha/CaptchaStage.ts
@@ -13,7 +13,6 @@ import { CSSResult, TemplateResult, 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";
@@ -26,7 +25,7 @@ import { CaptchaChallenge, CaptchaChallengeResponseRequest } from "@goauthentik/
@customElement("ak-stage-captcha")
export class CaptchaStage extends BaseStage {
static get styles(): CSSResult[] {
- return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+ return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
handlers = [this.handleGReCaptcha, this.handleHCaptcha, this.handleTurnstile];
diff --git a/web/src/flow/stages/consent/ConsentStage.ts b/web/src/flow/stages/consent/ConsentStage.ts
index 0e1a4c712..639a1062b 100644
--- a/web/src/flow/stages/consent/ConsentStage.ts
+++ b/web/src/flow/stages/consent/ConsentStage.ts
@@ -8,7 +8,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";
@@ -23,17 +22,7 @@ import { ConsentChallenge, ConsentChallengeResponseRequest, Permission } from "@
@customElement("ak-stage-consent")
export class ConsentStage extends BaseStage {
static get styles(): CSSResult[] {
- return [
- PFBase,
- PFLogin,
- PFList,
- PFForm,
- PFSpacing,
- PFFormControl,
- PFTitle,
- PFButton,
- AKGlobal,
- ];
+ return [PFBase, PFLogin, PFList, PFForm, PFSpacing, PFFormControl, PFTitle, PFButton];
}
renderPermissions(perms: Permission[]): TemplateResult {
diff --git a/web/src/flow/stages/dummy/DummyStage.ts b/web/src/flow/stages/dummy/DummyStage.ts
index f460576cf..48fb71199 100644
--- a/web/src/flow/stages/dummy/DummyStage.ts
+++ b/web/src/flow/stages/dummy/DummyStage.ts
@@ -7,7 +7,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";
@@ -20,7 +19,7 @@ import { DummyChallenge, DummyChallengeResponseRequest } from "@goauthentik/api"
@customElement("ak-stage-dummy")
export class DummyStage extends BaseStage {
static get styles(): CSSResult[] {
- return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+ return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
render(): TemplateResult {
diff --git a/web/src/flow/stages/email/EmailStage.ts b/web/src/flow/stages/email/EmailStage.ts
index 7326ac016..ce7d0cf45 100644
--- a/web/src/flow/stages/email/EmailStage.ts
+++ b/web/src/flow/stages/email/EmailStage.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";
@@ -19,7 +18,7 @@ import { EmailChallenge, EmailChallengeResponseRequest } from "@goauthentik/api"
@customElement("ak-stage-email")
export class EmailStage extends BaseStage {
static get styles(): CSSResult[] {
- return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
+ return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
}
render(): TemplateResult {
diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts
index a30b0c89f..1cb8de5c5 100644
--- a/web/src/flow/stages/identification/IdentificationStage.ts
+++ b/web/src/flow/stages/identification/IdentificationStage.ts
@@ -9,7 +9,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 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";
@@ -46,16 +45,7 @@ export class IdentificationStage extends BaseStage<
form?: HTMLFormElement;
static get styles(): CSSResult[] {
- return [
- PFBase,
- PFAlert,
- PFLogin,
- PFForm,
- PFFormControl,
- PFTitle,
- PFButton,
- AKGlobal,
- ].concat(
+ return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(
css`
/* login page's icons */
.pf-c-login__main-footer-links-item button {
diff --git a/web/src/flow/stages/password/PasswordStage.ts b/web/src/flow/stages/password/PasswordStage.ts
index e1c6855e8..6c3506db5 100644
--- a/web/src/flow/stages/password/PasswordStage.ts
+++ b/web/src/flow/stages/password/PasswordStage.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";
@@ -23,7 +22,7 @@ import { PasswordChallenge, PasswordChallengeResponseRequest } from "@goauthenti
@customElement("ak-stage-password")
export class PasswordStage extends BaseStage {
static get styles(): CSSResult[] {
- return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
+ return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
}
input?: HTMLInputElement;
diff --git a/web/src/flow/stages/prompt/PromptStage.ts b/web/src/flow/stages/prompt/PromptStage.ts
index dbfee6a51..cbdd897c7 100644
--- a/web/src/flow/stages/prompt/PromptStage.ts
+++ b/web/src/flow/stages/prompt/PromptStage.ts
@@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.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 @@ import {
@customElement("ak-stage-prompt")
export class PromptStage extends BaseStage {
static get styles(): CSSResult[] {
- return [PFBase, PFLogin, PFAlert, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
+ return [PFBase, PFLogin, PFAlert, PFForm, PFFormControl, PFTitle, PFButton];
}
renderPromptInner(prompt: StagePrompt, placeholderAsValue: boolean): string {
diff --git a/web/src/user/LibraryApplication.ts b/web/src/user/LibraryApplication.ts
index 6ad3e75ae..7a670ab71 100644
--- a/web/src/user/LibraryApplication.ts
+++ b/web/src/user/LibraryApplication.ts
@@ -10,7 +10,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 PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -35,7 +34,6 @@ export class LibraryApplication extends AKElement {
PFCard,
PFButton,
PFAvatar,
- AKGlobal,
css`
.pf-c-card {
height: 100%;
diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts
index 05a56d054..350dff4bf 100644
--- a/web/src/user/LibraryPage.ts
+++ b/web/src/user/LibraryPage.ts
@@ -14,7 +14,6 @@ import { CSSResult, TemplateResult, css, 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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
@@ -64,8 +63,7 @@ export class LibraryPage extends AKElement {
}
static get styles(): CSSResult[] {
- return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGrid, PFGallery, AKGlobal]
- .concat(css`
+ return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGrid, PFGallery].concat(css`
:host,
main {
padding: 3% 5%;
diff --git a/web/src/user/UserInterface.ts b/web/src/user/UserInterface.ts
index 986139a7f..a7d54acf5 100644
--- a/web/src/user/UserInterface.ts
+++ b/web/src/user/UserInterface.ts
@@ -10,7 +10,7 @@ import { autoDetectLanguage } from "@goauthentik/common/ui/locale";
import { me } from "@goauthentik/common/users";
import { first } from "@goauthentik/common/utils";
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/notifications/APIDrawer";
import "@goauthentik/elements/notifications/NotificationDrawer";
@@ -26,7 +26,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 PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import PFBrand from "@patternfly/patternfly/components/Brand/brand.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -42,7 +41,7 @@ import { CurrentTenant, EventsApi, SessionUser } from "@goauthentik/api";
autoDetectLanguage();
@customElement("ak-interface-user")
-export class UserInterface extends AKElement {
+export class UserInterface extends Interface {
@property({ type: Boolean })
notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
@@ -74,7 +73,6 @@ export class UserInterface extends AKElement {
PFDrawer,
PFDropdown,
PFNotificationBadge,
- AKGlobal,
css`
.pf-c-page__main,
.pf-c-drawer__content,
@@ -85,6 +83,9 @@ export class UserInterface extends AKElement {
.pf-c-page {
background-color: transparent;
}
+ :host([theme="dark"]) .pf-c-page {
+ background-color: var(--ak-dark-background);
+ }
.background-wrapper {
background-color: var(--pf-c-page--BackgroundColor) !important;
}
diff --git a/web/src/user/user-settings/BaseUserSettings.ts b/web/src/user/user-settings/BaseUserSettings.ts
index 703871cc0..e0e4234f3 100644
--- a/web/src/user/user-settings/BaseUserSettings.ts
+++ b/web/src/user/user-settings/BaseUserSettings.ts
@@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base";
import { CSSResult } 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 PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@@ -17,6 +16,6 @@ export abstract class BaseUserSettings extends AKElement {
configureUrl?: string;
static get styles(): CSSResult[] {
- return [PFBase, PFButton, PFForm, PFFormControl, AKGlobal];
+ return [PFBase, PFButton, PFForm, PFFormControl];
}
}
diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts
index bc71cad75..7bb03c66b 100644
--- a/web/src/user/user-settings/UserSettingsPage.ts
+++ b/web/src/user/user-settings/UserSettingsPage.ts
@@ -18,7 +18,6 @@ import { customElement, state } 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 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";
@@ -50,7 +49,6 @@ export class UserSettingsPage extends AKElement {
PFForm,
PFFormControl,
PFStack,
- AKGlobal,
css`
@media screen and (min-width: 1200px) {
:host {
diff --git a/web/src/user/user-settings/details/UserPassword.ts b/web/src/user/user-settings/details/UserPassword.ts
index a64d9023f..fecd22ca2 100644
--- a/web/src/user/user-settings/details/UserPassword.ts
+++ b/web/src/user/user-settings/details/UserPassword.ts
@@ -9,7 +9,6 @@ import { customElement } from "lit/decorators.js";
import { 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 PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
@@ -22,7 +21,7 @@ export class UserSettingsPassword extends AKElement {
configureUrl?: string;
static get styles(): CSSResult[] {
- return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal];
+ return [PFBase, PFCard, PFButton, PFForm, PFFormControl];
}
render(): TemplateResult {
diff --git a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
index 74d06693e..9acc50ae5 100644
--- a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
+++ b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
@@ -13,7 +13,6 @@ import { CSSResult, TemplateResult, 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 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";
@@ -56,7 +55,7 @@ export class UserSettingsFlowExecutor extends AKElement implements StageHost {
tenant!: CurrentTenant;
static get styles(): CSSResult[] {
- return [PFBase, PFCard, PFPage, PFButton, PFContent, AKGlobal];
+ return [PFBase, PFCard, PFPage, PFButton, PFContent];
}
constructor() {
diff --git a/web/src/user/user-settings/sources/SourceSettings.ts b/web/src/user/user-settings/sources/SourceSettings.ts
index 3463b3b94..128f5887c 100644
--- a/web/src/user/user-settings/sources/SourceSettings.ts
+++ b/web/src/user/user-settings/sources/SourceSettings.ts
@@ -14,7 +14,6 @@ import { CSSResult, TemplateResult, css, 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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
@@ -32,7 +31,6 @@ export class UserSourceSettingsPage extends AKElement {
return [
PFDataList,
PFContent,
- AKGlobal,
css`
.pf-c-data-list__cell {
display: flex;
@@ -43,10 +41,8 @@ export class UserSourceSettingsPage extends AKElement {
width: 48px;
margin-right: 16px;
}
- @media (prefers-color-scheme: dark) {
- .pf-c-data-list__cell img {
- filter: invert(1);
- }
+ :host([theme="dark"]) .pf-c-data-list__cell img {
+ filter: invert(1);
}
`,
];
diff --git a/website/docs/interfaces/admin/customization.md b/website/docs/interfaces/admin/customization.md
index 239082269..d1532b9b1 100644
--- a/website/docs/interfaces/admin/customization.md
+++ b/website/docs/interfaces/admin/customization.md
@@ -3,3 +3,7 @@
### `settings.pagination.perPage`
How many items should be retrieved per page. Defaults to 20.
+
+### `settings.theme.base`
+
+Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`.
diff --git a/website/docs/interfaces/flow/customization.md b/website/docs/interfaces/flow/customization.md
new file mode 100644
index 000000000..ce684f299
--- /dev/null
+++ b/website/docs/interfaces/flow/customization.md
@@ -0,0 +1,7 @@
+# Customization
+
+Since flows can be executed authenticated or unauthenticated, the default settings can be set via tenants _attributes_.
+
+### `settings.theme.base`
+
+Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`.
diff --git a/website/docs/interfaces/user/customization.md b/website/docs/interfaces/user/customization.md
index 40480c545..a44dc38f2 100644
--- a/website/docs/interfaces/user/customization.md
+++ b/website/docs/interfaces/user/customization.md
@@ -32,6 +32,10 @@ The following features can be enabled/disabled. By default, all of them are enab
Configure what is shown in the top right corner. Defaults to `username`. Choices: `username`, `name`, `email`
+### `settings.theme.base`
+
+Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`.
+
### `settings.theme.background`
Optional CSS which is applied in the background of the background of the user interface; for example
diff --git a/website/sidebars.js b/website/sidebars.js
index abe458471..2b48cb0e1 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -194,6 +194,11 @@ module.exports = {
type: "category",
label: "Interfaces",
items: [
+ {
+ type: "category",
+ label: "Flow",
+ items: ["interfaces/flow/customization"],
+ },
{
type: "category",
label: "User",