public inbox for pbs-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pbs-devel] [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs
@ 2023-12-15 10:52 Stefan Sterz
  2023-12-15 11:01 ` Maximiliano Sandoval
  2023-12-20 16:21 ` [pbs-devel] applied: " Thomas Lamprecht
  0 siblings, 2 replies; 3+ messages in thread
From: Stefan Sterz @ 2023-12-15 10:52 UTC (permalink / raw)
  To: pbs-devel

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





^ permalink raw reply	[flat|nested] 3+ messages in thread

* Re: [pbs-devel] [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs
  2023-12-15 10:52 [pbs-devel] [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs Stefan Sterz
@ 2023-12-15 11:01 ` Maximiliano Sandoval
  2023-12-20 16:21 ` [pbs-devel] applied: " Thomas Lamprecht
  1 sibling, 0 replies; 3+ messages in thread
From: Maximiliano Sandoval @ 2023-12-15 11:01 UTC (permalink / raw)
  To: Proxmox Backup Server development discussion


Stefan Sterz <s.sterz@proxmox.com> writes:

> 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>

This is a most important contribution.

I checked all the pages in the documentation and they all look as they
should and have decent contrast.

Tested-by: Maximiliano Sandoval <m.sandoval@proxmox.com>

--
Maximiliano




^ permalink raw reply	[flat|nested] 3+ messages in thread

* [pbs-devel] applied: [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs
  2023-12-15 10:52 [pbs-devel] [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs Stefan Sterz
  2023-12-15 11:01 ` Maximiliano Sandoval
@ 2023-12-20 16:21 ` Thomas Lamprecht
  1 sibling, 0 replies; 3+ messages in thread
From: Thomas Lamprecht @ 2023-12-20 16:21 UTC (permalink / raw)
  To: Proxmox Backup Server development discussion, Stefan Sterz

On 15/12/2023 11:52, Stefan Sterz wrote:
> 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(+)
> 
>

applied, with Maximiliano's T-b, thanks!




^ permalink raw reply	[flat|nested] 3+ messages in thread

end of thread, other threads:[~2023-12-20 16:21 UTC | newest]

Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-12-15 10:52 [pbs-devel] [PATCH proxmox-offline-mirror] docs: add an auto dark mode to the docs Stefan Sterz
2023-12-15 11:01 ` Maximiliano Sandoval
2023-12-20 16:21 ` [pbs-devel] applied: " Thomas Lamprecht

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal