[pmg-devel] [PATCH widget-toolkit 1/1] dark-theme: add a dark theme for the asciidoc-based documentation

[Stefan Sterz <s.sterz@proxmox.com>]

this commit adds a css file to the proxmox-widget-toolkit-dev package
that makes it possible for pve and pmg docs to use a dark theme

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 debian/proxmox-widget-toolkit-dev.install    |   1 +
 src/proxmox-dark/Makefile                    |  12 +-
 src/proxmox-dark/scss/ProxmoxDarkADocs.scss  |   9 ++
 src/proxmox-dark/scss/adocs/_admonition.scss |  18 +++
 src/proxmox-dark/scss/adocs/_general.scss    | 120 +++++++++++++++++++
 5 files changed, 159 insertions(+), 1 deletion(-)
 create mode 100644 src/proxmox-dark/scss/ProxmoxDarkADocs.scss
 create mode 100644 src/proxmox-dark/scss/adocs/_admonition.scss
 create mode 100644 src/proxmox-dark/scss/adocs/_general.scss

diff --git a/debian/proxmox-widget-toolkit-dev.install b/debian/proxmox-widget-toolkit-dev.install
index 620d69f..b0cf14b 100644
--- a/debian/proxmox-widget-toolkit-dev.install
+++ b/debian/proxmox-widget-toolkit-dev.install
@@ -1,2 +1,3 @@
 Toolkit.js /usr/share/javascript/proxmox-widget-toolkit-dev/
 api-viewer/APIViewer.js /usr/share/javascript/proxmox-widget-toolkit-dev/
+proxmox-dark/theme-proxmox-dark-adocs.css /usr/share/javascript/proxmox-widget-toolkit-dev/
diff --git a/src/proxmox-dark/Makefile b/src/proxmox-dark/Makefile
index 2ac6f22..1777e36 100644
--- a/src/proxmox-dark/Makefile
+++ b/src/proxmox-dark/Makefile
@@ -30,8 +30,14 @@ SCSSSRC=scss/ProxmoxDark.scss 			\
 	scss/proxmox/_tags.scss 		\
 	scss/proxmox/_datepicker.scss
 
+DOCSSCSSRC=scss/ProxmoxDarkADocs.scss 		\
+	   scss/abstracts/_mixins.scss 		\
+	   scss/abstracts/_variables.scss 	\
+	   scss/adocs/_general.scss 		\
+	   scss/adocs/_admonition.scss
+
 .PHONY: all
-all: theme-proxmox-dark.css
+all: theme-proxmox-dark.css theme-proxmox-dark-adocs.css
 
 .PHONY: install
 install: theme-proxmox-dark.css
@@ -42,6 +48,10 @@ theme-proxmox-dark.css: ${SCSSSRC}
 	sassc -t compressed $< $@.tmp
 	mv $@.tmp $@
 
+theme-proxmox-dark-adocs.css: ${DOCSSCSSRC}
+	sassc -t expanded $< $@.tmp
+	mv $@.tmp $@
+
 .PHONY: clean
 clean:
 	rm -rf theme-proxmox-dark.css
diff --git a/src/proxmox-dark/scss/ProxmoxDarkADocs.scss b/src/proxmox-dark/scss/ProxmoxDarkADocs.scss
new file mode 100644
index 0000000..1efc3fa
--- /dev/null
+++ b/src/proxmox-dark/scss/ProxmoxDarkADocs.scss
@@ -0,0 +1,9 @@
+@charset "utf-8";
+
+// Abstracts
+@import "abstracts/mixins";
+@import "abstracts/variables";
+
+// ascii doc styles
+@import "adocs/general";
+@import "adocs/admonition"
diff --git a/src/proxmox-dark/scss/adocs/_admonition.scss b/src/proxmox-dark/scss/adocs/_admonition.scss
new file mode 100644
index 0000000..46a47a5
--- /dev/null
+++ b/src/proxmox-dark/scss/adocs/_admonition.scss
@@ -0,0 +1,18 @@
+/* adjust admonition block spacing. this allows for a background on
+ * admonition blocks that doesn't make the elements look to tightly
+ * spaced.
+ */
+div.admonitionblock {
+  border-radius: 3px;
+  margin: 1.5em 0;
+  padding: 0.5em 10% 0.5em 0.5em;
+
+  td.icon {
+    padding-right: 0.5em;
+  }
+
+  td.icon > img {
+    padding: 0.15em;
+    box-sizing: border-box;
+  }
+}
diff --git a/src/proxmox-dark/scss/adocs/_general.scss b/src/proxmox-dark/scss/adocs/_general.scss
new file mode 100644
index 0000000..d411ed1
--- /dev/null
+++ b/src/proxmox-dark/scss/adocs/_general.scss
@@ -0,0 +1,120 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: $background-darker;
+    color: $text-color;
+  }
+
+  a {
+    color: $highlighted-text;
+
+    &:visited {
+      color: $highlighted-text-alt;
+    }
+  }
+
+  // style headlines, titles etc.
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  thead,
+  #author,
+  #toctitle,
+  div.title,
+  td.hdlist1,
+  caption.title,
+  p.tableblock.header {
+    color: $highlighted-text-alt;
+  }
+
+  h1,
+  h2,
+  h3,
+  #footer {
+    border-color: $border-color;
+  }
+
+  // formatted colored text
+  dt,
+  em,
+  pre,
+  code,
+  strong,
+  .monospaced {
+    color: $highlighted-text;
+  }
+
+  // style the table of contents sidebar
+  div #toc {
+    color: $text-color;
+    background-color: $background-darkest;
+    border-color: $border-color-alt;
+  }
+
+  div #toc a:link,
+  div #toc a:visited {
+    color: $text-color;
+  }
+
+  // reduce the brigthness of images a bit and make it reversable
+  // through hovering over them.
+  .image > img {
+    filter: brightness(90%);
+
+    &:hover {
+      filter: none;
+    }
+  }
+
+  // tables
+  table.tableblock {
+    border-color: $primary-light;
+  }
+
+  div.quoteblock,
+  div.verseblock {
+    color: $text-color;
+    border-color: $border-color;
+  }
+
+  // listings (e.g. code snippet blocks)
+  div.listingblock > div.content {
+    background-color: $background-darkest;
+    border-color: $border-color-alt;
+  }
+
+  // admonition blocks (e.g. notes, warnings etc.)
+  div.admonitionblock {
+    background-color: $background-dark;
+    color: $text-color;
+
+    td.content {
+      border-color: $border-color;
+    }
+
+    // makes the admonition icons appear a bit more consistent, by
+    // adding a white background the shadows in the icons look
+    // "correct"
+    td.icon > img {
+      background-color: white;
+      border-radius: 100%;
+      filter: brightness(95%);
+    }
+  }
+
+  // invert the logo
+  #header > h1 > .image > img {
+    filter: invert(100%) hue-rotate(180deg) brightness(90%);
+  }
+
+  // fixes the black text on unorderd lists
+  ul > li > * {
+    color: $text-color;
+  }
+}
-- 
2.30.2