From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id B729590C8F for ; Thu, 16 Mar 2023 18:03:10 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id A12B685F6 for ; Thu, 16 Mar 2023 18:03:10 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Thu, 16 Mar 2023 18:03:09 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 41AFD44388 for ; Thu, 16 Mar 2023 18:03:09 +0100 (CET) From: Stefan Sterz To: pmg-devel@lists.proxmox.com Date: Thu, 16 Mar 2023 18:03:01 +0100 Message-Id: <20230316170301.2072520-1-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.065 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pmg-devel] [PATCH pmg-docs v2] conf: add support for a dark mode in the documentation X-BeenThere: pmg-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Mail Gateway development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 16 Mar 2023 17:03:10 -0000 this commit adds support for a dark theme that behaves similarly to that one used by the api viewer. Signed-off-by: Stefan Sterz --- asciidoc/pmg-docs.css | 168 +++++++++++++++++++++++++++++++++++++++++ asciidoc/pmg-html.conf | 4 + 2 files changed, 172 insertions(+) create mode 100644 asciidoc/pmg-docs.css diff --git a/asciidoc/pmg-docs.css b/asciidoc/pmg-docs.css new file mode 100644 index 0000000..45e2b11 --- /dev/null +++ b/asciidoc/pmg-docs.css @@ -0,0 +1,168 @@ +:root { + /* pre-defined colors */ + --pdt-grey-950: hsl(0deg, 0%, 95%); + --pdt-grey-400: hsl(0deg, 0%, 40%); + --pdt-grey-250: hsl(0deg, 0%, 25%); + --pdt-grey-150: hsl(0deg, 0%, 15%); + --pdt-grey-100: hsl(0deg, 0%, 10%); + --pdt-primary-850: hsl(205deg, 100%, 85%); + --pdt-primary-800: hsl(205deg, 100%, 80%); + --pdt-primary-700: hsl(205deg, 100%, 70%); + --pdt-secondary-850: hsl(250deg, 100%, 85%); +} + +/* adjust admonition block spacing. this allows for a background on + * admonition blocks that doesn't make the elements look to tightly + * spaced. + */ +div.admonitionblock { + border-radius: 3px; + margin: 1.5em 0; + padding: 0.5em 10% 0.5em 0.5em; +} + +div.admonitionblock td.icon { + padding-right: 0.5em; +} + +div.admonitionblock td.icon > img { + box-sizing: border-box; + padding: 0.15em; +} + +@media screen and (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --pdt-body-background: var(--pdt-grey-150); + --pdt-text: var(--pdt-grey-950); + --pdt-headline: var(--pdt-primary-800); + --pdt-link: var(--pdt-primary-700); + --pdt-link-visited: var(--pdt-secondary-850); + --pdt-highlighted-text: var(--pdt-primary-850); + --pdt-background-sidebar: var(--pdt-grey-100); + --pdt-background-listings: var(--pdt-grey-100); + --pdt-border: var(--pdt-grey-400); + --pdt-border-alt: var(--pdt-grey-250); + --pdt-table-border: var(--pdt-grey-400); + --pdt-background-admonition: var(--pdt-grey-250); + } + + body { + color: var(--pdt-text); + background-color: var(--pdt-body-background); + } + + a { + color: var(--pdt-link); + } + + a:visited { + color: var(--pdt-link-visited); + } + + /* style headlines, titles etc. */ + h1, + h2, + h3, + h4, + h5, + h6, + thead, + #author, + #toctitle, + div.title, + td.hdlist1, + caption.title, + p.tableblock.header { + color: var(--pdt-headline); + } + + h1, + h2, + h3, + #footer { + border-color: var(--pdt-border); + } + + /* formatted colored text */ + dt, + em, + pre, + code, + strong, + .monospaced { + color: var(--pdt-highlighted-text); + } + + /* style the table of contents sidebar */ + div #toc { + color: var(--pdt-text); + background-color: var(--pdt-background-sidebar); + border-color: var(--pdt-border-alt); + } + + div #toc a:link, + div #toc a:visited { + color: var(--pdt-text); + } + + /* reduce the brigthness of images a bit and make it reversable + * through hovering over them. + */ + .image > img { + filter: brightness(90%); + } + + .image > img:hover { + filter: none; + } + + /* tables */ + th.tableblock, + td.tableblock, + table.tableblock { + border-color: var(--pdt-table-border); + } + + div.quoteblock, + div.verseblock { + color: var(--pdt-text); + border-color: var(--pdt-border); + } + + /* listings (e.g. code snippet blocks) */ + div.listingblock > div.content { + background-color: var(--pdt-background-listings); + border-color: var(--pdt-border-alt); + } + + /* admonition blocks (e.g. notes, warnings etc.) */ + div.admonitionblock { + color: var(--pdt-text); + background-color: var(--pdt-background-admonition); + } + + div.admonitionblock td.content { + border-color: var(--pdt-border); + } + + /* makes the admonition icons appear a bit more consistent, by + * adding a white background the shadows in the icons look + * "correct" + */ + div.admonitionblock td.icon > img { + background-color: white; + border-radius: 100%; + filter: brightness(95%); + } + + /* invert the logo */ + #header > h1 > .image > img { + filter: invert(100%) hue-rotate(180deg) brightness(90%); + } + + /* fixes the black text on unorderd lists */ + ul > li > * { + color: var(--pdt-text); + } +} diff --git a/asciidoc/pmg-html.conf b/asciidoc/pmg-html.conf index 707a83f..a83a8a6 100644 --- a/asciidoc/pmg-html.conf +++ b/asciidoc/pmg-html.conf @@ -632,6 +632,10 @@ div .toclevel1 { endif::toc2[] + + ifndef::disable-javascript[] ifdef::linkcss[] -- 2.30.2