From cbc86d674d9d6b44e6f72743ff766c5ef8794bc2 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 6 Mar 2021 23:00:29 +0100
Subject: [PATCH] web: fix Colours for user settings in dark mode

---
 authentik/core/templates/user/settings.html | 2 +-
 web/src/authentik.css                       | 4 ++++
 web/src/elements/Tabs.ts                    | 7 ++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/authentik/core/templates/user/settings.html b/authentik/core/templates/user/settings.html
index ff803e4be..bf7424569 100644
--- a/authentik/core/templates/user/settings.html
+++ b/authentik/core/templates/user/settings.html
@@ -13,7 +13,7 @@
                 <p>{% trans "Configure settings relevant to your user profile." %}</p>
             </div>
         </section>
-        <ak-tabs vertical="true">
+        <ak-tabs vertical="true" style="height: 100%;">
             <section slot="page-1" data-tab-title="{% trans 'User details' %}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                 <div class="pf-u-display-flex pf-u-justify-content-center">
                     <div class="pf-u-w-75">
diff --git a/web/src/authentik.css b/web/src/authentik.css
index 273b340d1..a7bc1b696 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -155,6 +155,10 @@ ak-message {
     .pf-c-table__sort-indicator i {
         color: var(--ak-dark-foreground) !important;
     }
+    /* tabs, vertical */
+    .pf-c-tabs__link {
+        background-color: var(--ak-dark-background-light);
+    }
     /* table, on mobile */
     @media screen and (max-width: 1200px) {
         .pf-m-grid-xl.pf-c-table tbody:first-of-type {
diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index 814106eb4..2d1006f5c 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -4,6 +4,8 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
 // @ts-ignore
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+// @ts-ignore
+import AKGlobal from "../authentik.css";
 import { CURRENT_CLASS } from "../constants";
 import { gettext } from "django";
 
@@ -16,7 +18,7 @@ export class Tabs extends LitElement {
     vertical = false;
 
     static get styles(): CSSResult[] {
-        return [GlobalsStyle, TabsStyle, css`
+        return [GlobalsStyle, TabsStyle, AKGlobal, css`
             ::slotted(*) {
                 height: 100%;
                 flex-grow: 2;
@@ -24,6 +26,9 @@ export class Tabs extends LitElement {
             :host([vertical]) {
                 display: flex;
             }
+            :host([vertical]) .pf-c-tabs__list {
+                height: 100%;
+            }
         `];
     }