From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <s.sterz@proxmox.com>
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 34A4090BFB
for <pve-devel@lists.proxmox.com>; Thu, 16 Mar 2023 18:02:54 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 11B1C8569
for <pve-devel@lists.proxmox.com>; Thu, 16 Mar 2023 18:02:54 +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) server-digest SHA256)
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS
for <pve-devel@lists.proxmox.com>; Thu, 16 Mar 2023 18:02:52 +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 2741344388
for <pve-devel@lists.proxmox.com>; Thu, 16 Mar 2023 18:02:52 +0100 (CET)
From: Stefan Sterz <s.sterz@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Thu, 16 Mar 2023 18:02:34 +0100
Message-Id: <20230316170234.2071027-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: [pve-devel] [PATCH docs v2] conf: add support for a dark mode in
the documentation
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Thu, 16 Mar 2023 17:02:54 -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 <s.sterz@proxmox.com>
---
asciidoc/pve-docs.css | 168 +++++++++++++++++++++++++++++++++++++++++
asciidoc/pve-html.conf | 4 +
2 files changed, 172 insertions(+)
create mode 100644 asciidoc/pve-docs.css
diff --git a/asciidoc/pve-docs.css b/asciidoc/pve-docs.css
new file mode 100644
index 0000000..45e2b11
--- /dev/null
+++ b/asciidoc/pve-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/pve-html.conf b/asciidoc/pve-html.conf
index 8a089d3..913169b 100644
--- a/asciidoc/pve-html.conf
+++ b/asciidoc/pve-html.conf
@@ -629,6 +629,10 @@ div .toclevel1 {
</style>
endif::toc2[]
+<style type="text/css">
+include1::{stylesdir=.}/pve-docs.css[]
+</style>
+
ifndef::disable-javascript[]
ifdef::linkcss[]
<script type="text/javascript" src="{scriptsdir=.}/asciidoc.js"></script>
--
2.30.2