From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <d.csapak@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 CD00190B9F
 for <pbs-devel@lists.proxmox.com>; Fri, 24 Mar 2023 16:53:53 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id A77DDDCEA
 for <pbs-devel@lists.proxmox.com>; Fri, 24 Mar 2023 16:53:23 +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 <pbs-devel@lists.proxmox.com>; Fri, 24 Mar 2023 16:53:22 +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 559D846839
 for <pbs-devel@lists.proxmox.com>; Fri, 24 Mar 2023 16:53:22 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Date: Fri, 24 Mar 2023 16:53:21 +0100
Message-Id: <20230324155321.4042609-1-d.csapak@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.010 Adjusted score from AWL reputation of From: address
 BAYES_00                 -1.9 Bayes spam probability is 0 to 1%
 DMARC_MISSING             0.1 Missing DMARC policy
 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: [pbs-devel] [RFC PATCH proxmox-backup] docs: implement auto dark
 mode
X-BeenThere: pbs-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Backup Server development discussion
 <pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Fri, 24 Mar 2023 15:53:53 -0000

the colors are inspired/copied from the pmg/pve docs dark mode, but
i tried to apply them such that theme is faithful to the original
docs style regarding contrast etc.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
just a very fast approach to implementing the dark mode, not sure
about the filter style for the code or if we want to maintain a custom
color set ?

 docs/custom.css | 116 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)

diff --git a/docs/custom.css b/docs/custom.css
index fe8b795b..9408f418 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -86,3 +86,119 @@ 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-400: hsl(0deg, 0%, 40%);
+        --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-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%);
+        --pdt-body-background: var(--pdt-grey-150);
+        --pdt-text: var(--pdt-grey-850);
+        --pdt-headline: var(--pdt-primary-800);
+        --pdt-link: var(--pdt-primary-700);
+        --pdt-background-admonition: var(--pdt-grey-250);
+    }
+
+    /* 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.headerlink:hover {
+        color: var(--pdt-text);
+        background-color: var(--pdt-background-admonition)
+    }
+
+    div.sphinxsidebar ul ul a {
+        color: var(--pdt-text);
+        border-bottom-color: var(--pdt-grey-500);
+    }
+
+    ul li.toctree-l1 > a,
+    div.sphinxsidebar ul,
+    div.sphinxsidebar a:hover {
+        color: var(--pdt-text);
+        border-bottom-color: var(--pdt-grey-500);
+    }
+
+    /* highlighting backgrounds */
+    div.admonition,
+    div.highlight,
+    a:hover code,
+    pre {
+        background-color: var(--pdt-background-admonition);
+    }
+
+    div.caution, div.warning {
+        background-color: #422;
+    }
+
+    div.topic {
+        background-color: var(--pdt-grey-200);
+    }
+
+    img.logo {
+        filter: invert(100%) hue-rotate(180deg) brightness(90%);
+    }
+
+    table.docutils {
+        box-shadow: 2px 2px 4px var(--pdt-grey-100);
+    }
+
+    /* 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-background-admonition);
+    }
+
+
+    .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: #a19231;
+    }
+}
-- 
2.30.2