proxmox-mirrors/proxmox-offline-mirror
1
0
Fork 0
mirror of https://git.proxmox.com/git/proxmox-offline-mirror synced 2025-04-28 23:11:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: add an auto dark mode to the docs

Browse Source 
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>
Tested-by: Maximiliano Sandoval <m.sandoval@proxmox.com>
This commit is contained in:
Stefan Sterz 2023-12-15 11:52:29 +01:00 committed by Thomas Lamprecht
parent 0735f868cf
commit 077c6bfcc2
1 changed files with 157 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
docs/custom.css
View File

@ -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;
}
}