From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [RFC PATCH proxmox-backup] docs: implement auto dark mode
Date: Fri, 24 Mar 2023 16:53:21 +0100 [thread overview]
Message-ID: <20230324155321.4042609-1-d.csapak@proxmox.com> (raw)
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
next reply other threads:[~2023-03-24 15:53 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-24 15:53 Dominik Csapak [this message]
2023-03-27 18:17 ` [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=20230324155321.4042609-1-d.csapak@proxmox.com \
--to=d.csapak@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