web: fix Colours for user settings in dark mode

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">

web/src/authentik.css

@@ -156,6 +156,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 {

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%;
+            }
         `];
     }