From: Stefan Sterz <s.sterz@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs
Date: Fri, 15 Dec 2023 11:52:29 +0100 [thread overview]
Message-ID: <20231215105229.84489-1-s.sterz@proxmox.com> (raw)
this adds the dark mode from the proxmox backup server to the offline
mirror for a more consistent appearance of the documentation across
all products.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
docs/custom.css | 157 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 157 insertions(+)
diff --git a/docs/custom.css b/docs/custom.css
index fe8b795..7022b53 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -86,3 +86,160 @@ div.document, div.footer {
margin: 15px auto 0px auto;
}
}
+
+@media screen and (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ --pdt-grey-850: hsl(0deg, 0%, 85%);
+ --pdt-grey-500: hsl(0deg, 0%, 50%);
+ --pdt-grey-250: hsl(0deg, 0%, 25%);
+ --pdt-grey-200: hsl(0deg, 0%, 20%);
+ --pdt-grey-150: hsl(0deg, 0%, 15%);
+ --pdt-grey-100: hsl(0deg, 0%, 10%);
+ --pdt-primary-800: hsl(205deg, 100%, 80%);
+ --pdt-primary-700: hsl(205deg, 100%, 70%);
+ --pdt-red-200: hsl(360deg, 30%, 20%);
+ --pdt-red-350: hsl(360deg, 30%, 35%);
+ --pdt-yellow-250: hsl(40deg, 100%, 25%);
+ --pdt-body-background: var(--pdt-grey-150);
+ --pdt-text: var(--pdt-grey-850);
+ --pdt-border: var(--pdt-grey-500);
+ --pdt-shadow: var(--pdt-grey-100);
+ --pdt-headline: var(--pdt-primary-800);
+ --pdt-link: var(--pdt-primary-700);
+ --pdt-admonition-background: var(--pdt-grey-250);
+ --pdt-topic-background: var(--pdt-grey-200);
+ --pdt-warn: var(--pdt-yellow-250);
+ --pdt-crit: var(--pdt-red-200);
+ --pdt-crit-border: var(--pdt-red-350);
+ }
+
+ /* body and links */
+ body, div.body {
+ color: var(--pdt-text);
+ background-color: var(--pdt-body-background);
+ }
+
+ a,
+ a:hover,
+ a.reference:hover {
+ color: var(--pdt-link);
+ border-bottom-color: var(--pdt-link);
+ }
+
+ a.reference {
+ border-color: var(--pdt-border);
+ }
+
+ a.headerlink:hover {
+ color: var(--pdt-text);
+ background-color: var(--pdt-admonition-background)
+ }
+
+ div.sphinxsidebar ul ul a {
+ color: var(--pdt-text);
+ border-bottom-color: var(--pdt-border);
+ }
+
+ div.sphinxsidebar a,
+ ul li.toctree-l1 > a,
+ div.sphinxsidebar ul,
+ div.sphinxsidebar a:hover {
+ color: var(--pdt-text);
+ border-bottom-color: var(--pdt-border);
+ }
+
+ /* highlighting backgrounds */
+ div.admonition,
+ div.highlight,
+ a:hover code,
+ pre {
+ background-color: var(--pdt-admonition-background);
+ }
+
+ div.caution, div.warning {
+ background-color: var(--pdt-crit);
+ border-color: var(--pdt-crit-border);
+ }
+
+ div.topic {
+ background-color: var(--pdt-topic-background);
+ border-color: var(--pdt-border);
+ }
+
+ div.tip,
+ div.note,
+ div.important {
+ border-color: var(--pdt-border);
+ }
+
+ img.logo {
+ filter: invert(100%) hue-rotate(180deg) brightness(90%);
+ }
+
+ table.docutils {
+ box-shadow: 2px 2px 4px var(--pdt-shadow);
+ }
+
+ hr.docutils {
+ border-color: var(--pdt-border);
+ }
+
+ /* style headlines, titles etc. */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ span.caption-text,
+ div.sphinxsidebar h3,
+ div.sphinxsidebar h4 {
+ color: var(--pdt-headline);
+ }
+
+ /* code */
+ code {
+ color: var(--pdt-text);
+ background-color: var(--pdt-admonition-background);
+ }
+
+
+ .highlight span {
+ filter: brightness(1.5);
+ }
+
+ .highlight .gh,
+ .highlight .nt {
+ color: var(--pdt-headline);
+ filter: none;
+ }
+
+ .highlight .go {
+ color: var(--pdt-text);
+ filter: none;
+ }
+
+ span.highlighted {
+ background-color: var(--pdt-warn);
+ }
+
+ .related.bottom {
+ border-color: var(--pdt-border);
+ }
+
+ /* sidebar */
+ div.sphinxsidebar hr {
+ border-color: var(--pdt-border);
+ }
+
+ div.sphinxsidebar input {
+ border-color: var(--pdt-border);
+ }
+}
+
+@media screen and (max-width: 875px) and (prefers-color-scheme: dark) {
+ div.documentwrapper {
+ background: initial;
+ }
+}
--
2.39.2
next reply other threads:[~2023-12-15 10:52 UTC|newest]
Thread overview: 3+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-12-15 10:52 Stefan Sterz [this message]
2023-12-15 11:01 ` Maximiliano Sandoval
2023-12-20 16:21 ` [pbs-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=20231215105229.84489-1-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pbs-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