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:
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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];
|
||||
|
@ -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);
|
||||
}
|
||||
`]);
|
||||
}
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user