* [pmg-devel] [PATCH widget-toolkit 1/1] dark-theme: add a dark theme for the asciidoc-based documentation
2023-03-15 16:11 [pmg-devel] [PATCH widget-toolkit 0/1] Proxmox Dark Theme - AsciiDoc Stefan Sterz
@ 2023-03-15 16:11 ` Stefan Sterz
2023-03-15 16:11 ` [pmg-devel] [PATCH pmg-docs] html conf: add support for a dark mode in the documentation Stefan Sterz
1 sibling, 0 replies; 3+ messages in thread
From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw)
To: pve-devel, pmg-devel
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
^ permalink raw reply [flat|nested] 3+ messages in thread