From 8356f83738c10b8f032a3c9f4274629afad8e219 Mon Sep 17 00:00:00 2001
From: Jens L <jens@goauthentik.io>
Date: Tue, 8 Aug 2023 00:58:57 +0200
Subject: [PATCH] web/user: fix user settings colours on dark theme (#6499)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/Tabs.ts                       |  3 +++
 web/src/user/user-settings/UserSettingsPage.ts | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index a208f3372..74440897f 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -38,6 +38,9 @@ export class Tabs extends AKElement {
                 :host([vertical]) .pf-c-tabs__list {
                     height: 100%;
                 }
+                :host([vertical]) .pf-c-tabs .pf-c-tabs__list::before {
+                    border-color: transparent;
+                }
             `,
         ];
     }
diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts
index 50d800bd4..8f447c4df 100644
--- a/web/src/user/user-settings/UserSettingsPage.ts
+++ b/web/src/user/user-settings/UserSettingsPage.ts
@@ -49,6 +49,18 @@ export class UserSettingsPage extends AKElement {
             PFFormControl,
             PFStack,
             css`
+                .pf-c-page {
+                    --pf-c-page--BackgroundColor: transparent;
+                }
+                .pf-c-page__main-section {
+                    --pf-c-page__main-section--BackgroundColor: transparent;
+                }
+                :host([theme="dark"]) .pf-c-page {
+                    --pf-c-page--BackgroundColor: transparent;
+                }
+                :host([theme="dark"]) .pf-c-page__main-section {
+                    --pf-c-page__main-section--BackgroundColor: transparent;
+                }
                 @media screen and (min-width: 1200px) {
                     :host {
                         width: 90rem;