From: Stefan Sterz <s.sterz@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-docs v2] conf: add support for a dark mode in the documentation
Date: Thu, 16 Mar 2023 18:03:01 +0100 [thread overview]
Message-ID: <20230316170301.2072520-1-s.sterz@proxmox.com> (raw)
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/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 {
</style>
endif::toc2[]
+<style type="text/css">
+include1::{stylesdir=.}/pmg-docs.css[]
+</style>
+
ifndef::disable-javascript[]
ifdef::linkcss[]
<script type="text/javascript" src="{scriptsdir=.}/asciidoc.js"></script>
--
2.30.2
next reply other threads:[~2023-03-16 17:03 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-16 17:03 Stefan Sterz [this message]
2023-03-21 11:55 ` [pmg-devel] applied: " Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230316170301.2072520-1-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pmg-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox