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
This commit is contained in:
Jens L
2020-12-06 18:02:04 +01:00
committed by GitHub
parent 3487c41ce0
commit c03754abec
6 changed files with 122 additions and 12 deletions

View File

@ -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);
}
}

View File

@ -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];

View File

@ -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);
}
`]);
}

View File

@ -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;