From c03754abeccf2116c2180f5e5f91277474578ea4 Mon Sep 17 00:00:00 2001 From: Jens L Date: Sun, 6 Dec 2020 18:02:04 +0100 Subject: [PATCH] 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 --- .../administration/application/list.html | 18 +++- authentik/core/templates/generic/delete.html | 10 +- web/src/authentik.css | 95 +++++++++++++++++++ web/src/common/styles.ts | 4 +- web/src/elements/cards/AggregateCard.ts | 4 + web/src/elements/sidebar/Sidebar.ts | 3 + 6 files changed, 122 insertions(+), 12 deletions(-) diff --git a/authentik/admin/templates/administration/application/list.html b/authentik/admin/templates/administration/application/list.html index 843fa6c15..a31f92f6b 100644 --- a/authentik/admin/templates/administration/application/list.html +++ b/authentik/admin/templates/administration/application/list.html @@ -36,24 +36,34 @@ + - + {% for application in object_list %} - + diff --git a/authentik/core/templates/generic/delete.html b/authentik/core/templates/generic/delete.html index 594155be0..2cfab27f2 100644 --- a/authentik/core/templates/generic/delete.html +++ b/authentik/core/templates/generic/delete.html @@ -28,16 +28,14 @@ {% endblocktrans %}

-
-
- - {% trans "Back" %} -
-
+ {% endblock %} diff --git a/web/src/authentik.css b/web/src/authentik.css index cda7830d8..e6c5a6446 100644 --- a/web/src/authentik.css +++ b/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); + } +} diff --git a/web/src/common/styles.ts b/web/src/common/styles.ts index 0e5629ee3..24f4b49d4 100644 --- a/web/src/common/styles.ts +++ b/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]; diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts index 7ad95421d..8fb70c70f 100644 --- a/web/src/elements/cards/AggregateCard.ts +++ b/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); } `]); } diff --git a/web/src/elements/sidebar/Sidebar.ts b/web/src/elements/sidebar/Sidebar.ts index 9cc8cd19a..07cd1e8d8 100644 --- a/web/src/elements/sidebar/Sidebar.ts +++ b/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;
{% trans 'Name' %} {% trans 'Slug' %} {% trans 'Provider' %} {% trans 'Provider Type' %}
+ + {% if application.meta_icon %} + {% trans 'Application Icon' %} + {% else %} + + {% endif %} + -
{{ application.name }}
+
+ {{ application.name }} +
{% if application.meta_publisher %} {{ application.meta_publisher }} {% endif %} - + 		{{ application.slug }}