From d6f5b8e42148ad798c075d3da290ad6ae172df6c Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Wed, 11 Jan 2023 00:38:23 +0100 Subject: [PATCH] web/elements: fix pagination page button colours in dark mode Signed-off-by: Jens Langhammer --- web/src/elements/table/TablePagination.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts index ce05651812..ca8fc4b5d0 100644 --- a/web/src/elements/table/TablePagination.ts +++ b/web/src/elements/table/TablePagination.ts @@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base"; import { t } from "@lingui/macro"; -import { CSSResult, TemplateResult, html } from "lit"; +import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import AKGlobal from "@goauthentik/common/styles/authentik.css"; @@ -33,7 +33,23 @@ export class TablePagination extends AKElement { }; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFPagination, AKGlobal]; + return [ + PFBase, + PFButton, + PFPagination, + AKGlobal, + css` + @media (prefers-color-scheme: dark) { + .pf-c-pagination__nav-control .pf-c-button { + color: var(--pf-c-button--m-plain--disabled--Color); + --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--Color); + } + .pf-c-pagination__nav-control .pf-c-button:disabled { + color: var(--pf-c-button--disabled--Color); + } + } + `, + ]; } render(): TemplateResult {