* [pbs-devel] [RFC PATCH proxmox-backup] docs: implement auto dark mode
@ 2023-03-24 15:53 Dominik Csapak
2023-03-27 18:17 ` [pbs-devel] applied: " Thomas Lamprecht
0 siblings, 1 reply; 2+ messages in thread
From: Dominik Csapak @ 2023-03-24 15:53 UTC (permalink / raw)
To: pbs-devel
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
^ permalink raw reply [flat|nested] 2+ messages in thread
* [pbs-devel] applied: [RFC PATCH proxmox-backup] docs: implement auto dark mode
2023-03-24 15:53 [pbs-devel] [RFC PATCH proxmox-backup] docs: implement auto dark mode Dominik Csapak
@ 2023-03-27 18:17 ` Thomas Lamprecht
0 siblings, 0 replies; 2+ messages in thread
From: Thomas Lamprecht @ 2023-03-27 18:17 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Dominik Csapak
Am 24/03/2023 um 16:53 schrieb Dominik Csapak:
> 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 ?
did not really thought about that, but the overall thing seemed good enough
as starter.
>
> docs/custom.css | 116 ++++++++++++++++++++++++++++++++++++++++++++++++
> 1 file changed, 116 insertions(+)
>
>
applied, thanks!
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2023-03-27 18:17 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-03-24 15:53 [pbs-devel] [RFC PATCH proxmox-backup] docs: implement auto dark mode Dominik Csapak
2023-03-27 18:17 ` [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