web: dark mode (#368)

* web: initial dark mode

* web: re-fix sidebar colour in dark mode

* web: fix dark mode for user settings

* web: fix dark mode for flows

* core: match delete template's footer with generic form

* admin: show app icon in app list

authentik/admin/templates/administration/application/list.html

@@ -36,24 +36,34 @@
         <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
             <thead>
                 <tr role="row">
+                    <th role="columnheader"></th>
                     <th role="columnheader" scope="col">{% trans 'Name' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Slug' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Provider' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Provider Type' %}</th>
-                    <th role="cell"></th>
+                    <th role="columnheader"></th>
                 </tr>
             </thead>
             <tbody role="rowgroup">
                 {% for application in object_list %}
                 <tr role="row">
-                    <th role="columnheader">
+                    <td role="cell" {% if application.meta_icon %} style="vertical-align: bottom;" {% endif %}>
+                        {% if application.meta_icon %}
+                        <img class="app-icon pf-c-avatar" src="{{ application.meta_icon.url }}" alt="{% trans 'Application Icon' %}">
+                        {% else %}
+                        <i class="pf-icon pf-icon-arrow"></i>
+                        {% endif %}
+                    </td>
+                    <td role="cell">
                         <a href="/applications/{{ application.slug }}/">
-                            <div>{{ application.name }}</div>
+                            <div>
+                                {{ application.name }}
+                            </div>
                             {% if application.meta_publisher %}
                             <small>{{ application.meta_publisher }}</small>
                             {% endif %}
                         </a>
-                    </th>
+                    </td>
                     <td role="cell">
                         <code>{{ application.slug }}</span>
                     </td>

authentik/core/templates/generic/delete.html

@@ -28,16 +28,14 @@
                             {% endblocktrans %}
                         </p>
                         <input type="hidden" name="confirmdelete" value="yes">
-                        <div class="pf-c-form__group pf-m-action">
-                            <div class="pf-c-form__actions">
-                                <input class="pf-c-button pf-m-danger" type="submit" value="{% trans 'Delete' %}" />
-                                <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Back" %}</a>
-                            </div>
-                        </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </section>
+<footer class="pf-c-modal-box__footer">
+    <input class="pf-c-button pf-m-danger" type="submit" value="{% trans 'Delete' %}" />
+    <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Back" %}</a>
+</footer>
 {% endblock %}

web/src/authentik.css

@@ -85,3 +85,98 @@ select[multiple] {
 .subtext {
     font-size: var(--pf-global--FontSize--sm);
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ak-dark-foreground: #fafafa;
+        --ak-dark-foreground-darker: #bebebe;
+        --ak-dark-foreground-link: #5a5cb9;
+        --ak-dark-background: #18191a;
+        --ak-dark-background-darker: #000000;
+        --ak-dark-background-light: #1c1e21;
+        --ak-dark-background-lighter: #2b2e33;
+
+        --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);
+    }
+    /* Global page background colour */
+    .pf-c-page {
+        --pf-c-page--BackgroundColor: var(--ak-dark-background);
+    }
+    .pf-c-title {
+        color: var(--ak-dark-foreground);
+    }
+    /* Header sections */
+    .pf-c-page__main-section {
+        background-color: var(--ak-dark-background);
+    }
+    .pf-c-page__main-section.pf-m-light {
+        background-color: var(--ak-dark-background-light);
+    }
+    .pf-c-content {
+        color: var(--ak-dark-foreground);
+    }
+    /* Card */
+    .pf-c-card {
+        --pf-c-card--BackgroundColor: var(--ak-dark-background-light);
+    }
+    .pf-c-card__header-main,
+    .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);
+    }
+    /* inputs */
+    .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;
+        background-color: var(--ak-dark-background-light);
+        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-c-form__label-text {
+        color: var(--ak-dark-foreground);
+    }
+    .pf-c-check__label {
+        color: var(--ak-dark-foreground);
+    }
+    /* inputs help text */
+    .pf-c-form__helper-text {
+        color: var(--ak-dark-foreground);
+    }
+    /* modal */
+    .pf-c-modal-box__footer {
+        background-color: var(--ak-dark-background-light);
+    }
+    /* 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-footer-links-item-link > img {
+        filter: invert(1);
+    }
+    .form-control-static {
+        color: var(--ak-dark-foreground);
+    }
+}

web/src/common/styles.ts

@@ -5,7 +5,7 @@ import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
 // @ts-ignore
 import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
 // @ts-ignore
-import PBGlobal from "../authentik.css";
+import AKGlobal from "../authentik.css";
 import { CSSResult } from "lit-element";
 
-export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, PBGlobal];
+export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal];

web/src/elements/cards/AggregateCard.ts

@@ -16,9 +16,13 @@ export class AggregateCard extends LitElement {
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES.concat([css`
+            .pf-c-card.pf-c-card-aggregate {
+                height: 100%;
+            }
             .center-value {
                 font-size: var(--pf-global--icon--FontSize--lg);
                 text-align: center;
+                color: var(--pf-global--Color--100);
             }
         `]);
     }

web/src/elements/sidebar/Sidebar.ts

@@ -5,6 +5,8 @@ import PageStyle from "@patternfly/patternfly/components/Page/page.css";
 import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
 // @ts-ignore
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+// @ts-ignore
+import AKGlobal from "../../authentik.css";
 
 import { until } from "lit-html/directives/until";
 
@@ -31,6 +33,7 @@ export class Sidebar extends LitElement {
             GlobalsStyle,
             PageStyle,
             NavStyle,
+            AKGlobal,
             css`
                 .pf-c-nav__list .sidebar-brand {
                     max-height: 82px;