diff --git a/userguide/Haiku-doc.css b/userguide/Haiku-doc.css
index 8c7051cd..6ed0a436 100644
--- a/userguide/Haiku-doc.css
+++ b/userguide/Haiku-doc.css
@@ -9,16 +9,105 @@
  *		Humdinger <humdingerb@gmail.com>
  *		Vincent Duvert <vincent.duvert@free.fr>
  *		Augustin Cavalier <waddlesplash>
+ *		Pascal R. G. Abresch <nep@packageloss.eu>
  */
 
+/* don't use @media (prefers-color-scheme: light) here, so it runs correctly in browsers that don't 
+   understand it and thus expect a light mode as is the default for html */
+:root {
+	color-scheme: light dark;
+
+	--CanvasBackground: #FFF;
+	--CanvasText: #333333;
+	--LinkText: #dc3c01;
+	--VisitedLinkText: #892601;
+	--TableBackground: #ff4500;
+	--TableHeaderBackground: #e0e0e0;
+	--HeaderColor: #0c3762;
+	--MenuColor: #24225e;
+	--ActiveLinkText: #ff4500;
+	--HeaderText: #0c3762;
+	--ButtonBackground: #e8e8e8;
+	--ButtonBorder: #c7c7c7;
+	--InfoBackground: #e4ffde;
+	--WarningBackground: #fffbc6;
+	--StopBackground: #ffeae6;
+	--SecondaryCanvas: #e0e0e0;
+	--TertiaryCanvas: #efefef;
+}
+
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--CanvasBackground: #000;
+		--LinkText: #f24000;
+		--VisitedLinkText: #bf3401;
+		--ActiveLinkText: #ff4500;
+		--HeaderText: #1b80e5;
+		--ButtonBorder: #666;
+		--InfoBackground: #0d2f3f;
+		--WarningBackground: #453b07;
+		--StopBackground: #4d0000;
+		--MenuColor: #5c57f2;
+	}
+	@media (prefers-contrast: no-preference) {
+		:root {
+			--CanvasText: #DDD;
+			--ButtonBackground: #444;
+			--SecondaryCanvas: #222;
+			--TertiaryCanvas: #131313;
+		}
+	}
+	@media (prefers-contrast: more) {
+		:root {
+			--CanvasText: #EFEFEF;
+			--ButtonBackground: #222;
+			--SecondaryCanvas: #111;
+			--TertiaryCanvas: #080808;
+		}
+	}
+	@media (prefers-contrast: less) {
+		:root {
+			--CanvasText: #AAA;
+			--ButtonBackground: #444;
+		}
+	}
+}
+
+
+@media (forced-colors: active) {
+	:root {
+		/* Userguide specific */
+		/* "Normal values" */
+		--HeaderText: LinkText;
+		--CanvasBackground: Canvas;
+		--CanvasText: CanvasText;
+		--LinkText: LinkText;
+		--VisitedLinkText: VisitedText;
+		--ActiveLinkText: ActiveText;
+		--ButtonBackground: ButtonFace;
+		--ButtonBorder: ButtonBorder;
+		--InputBackground: Field;
+		--InputText: FieldText;
+		--HighlightBackground: Highlight;
+		--HighlightText: HighlightText;
+		--SelectedBackground: SelectedItem;
+		--SelectedText: SelectedItemText;
+		--MarkBackground: Mark;
+		--MarkText: MarkText;
+		--DisabledText: GrayText;
+	}
+}
+
+
 html {
 	margin: 0;
 	padding: 0;
-	background: #FFF;
+	background: var(--CanvasBackground);
 }
 
 body {
-	color: #333333;
+	color: var(--CanvasText);
 	line-height: 1.5;
 	margin: 0;
 	padding: 0;
@@ -30,35 +119,35 @@ body {
 a:link {
 	font-weight: bold;
 	text-decoration: none;
-	color: #dc3c01;
+	color: var(--LinkText);
 }
 a:visited {
 	font-weight: bold;
 	text-decoration: none;
-	color: #892601;
+	color: var(--VisitedLinkText)
 }
 a:hover, a:active {
 	text-decoration: underline;
-	color: #ff4500;
+	color: var(--ActiveLinkText);
 }
 
 /* Some headers act as anchors, don't give them a hover effect */
 
 h2 a:hover, a:active {
 	text-decoration: none;
-	color: #0c3762;
+	color: var(--HeaderText);
 }
 h3 a:hover, a:active {
 	text-decoration: none;
-	color: #0c3762;
+	color: var(--HeaderText);
 }
 h4 a:hover, a:active {
 	text-decoration: none;
-	color: #0c3762;
+	color: var(--HeaderText);
 }
 h5 a:hover, a:active {
 	text-decoration: none;
-	color: #0c3762;
+	color: var(--HeaderText);
 }
 
 /* heading and navigation */
@@ -68,7 +157,7 @@ h5 a:hover, a:active {
 	left: 0;
 	top: 0;
 	height: 84px;
-	background: #eeeeee;
+	background: var(--SecondaryCanvas);
 }
 
 #banner div {
@@ -76,6 +165,13 @@ h5 a:hover, a:active {
 	height: 100%;
 	margin: 0 auto;
 }
+
+/* HaikuDark.svg -> Haiku logo - white on black - normal; canvas resize to width 254 */
+@media (prefers-color-scheme: dark) {
+	#banner div {
+		background: url(images/HaikuDark.svg) no-repeat scroll 6px 8px, url(images/LeafDark.png) no-repeat scroll 10px 0;
+	}
+}
 @media (min-width:768px) {
 	#banner {
 		min-width: 59em;
@@ -90,7 +186,7 @@ h5 a:hover, a:active {
 	position: relative;
 	top: 51px;
 	left: 272px;
-	color: #333333;
+	color: var(--CanvasText);
 	text-transform: uppercase;
 	letter-spacing: 3px;
 	font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif;
@@ -102,7 +198,7 @@ div.nav {
 	position: relative;
 	left: 0;
 	top: 0;
-	background: #e0e0e0;
+	background: var(--SecondaryCanvas);
 	padding: 0;
 }
 @media (min-width:768px) {
@@ -151,7 +247,7 @@ ul.lang-menu img {
 
 ul.lang-menu li {
 	margin-left: 10px;
-	background: #e0e0e0;
+	background-color: var(--SecondaryCanvas);
 	display: none;
 }
 
@@ -160,7 +256,7 @@ ul.lang-menu:hover li {
 }
 
 ul.lang-menu li:hover {
-	background-color: #efefef;
+	background-color: var(--TertiaryCanvas);
 }
 
 ul.lang-menu li.now {
@@ -176,7 +272,7 @@ ul.lang-menu li.now span.dropdown-caret {
 }
 
 ul.lang-menu li a {
-	color: black;
+	color: var(--CanvasText);
 	text-decoration: none;
 	font-weight: normal;
 	display: block;
@@ -226,13 +322,13 @@ table.index {
 	z-index: 10;
 }
 table.index tr.heading {
-	background-color: #e0e0e0;
+	background-color: var(--SecondaryCanvas);
 	text-align: center;
 	font-weight: bold;
 	font-size: 1.1em;
 }
 table.index tr.index {
-	background-color: #eeeeee;
+	background-color: var(--TertiaryCanvas);
 }
 table.index td {
 	padding: 5px 20px;
@@ -241,11 +337,11 @@ table.index td {
 table.index a:link, table.index a:visited {
 	font-weight: normal;
 	text-decoration: none;
-	color: #dc3c01;
+	color: var(--VisitedLinkText)
 }
 table.index a:hover, table.index a:active {
 	text-decoration: underline;
-	color: #ff4500;
+	color: var(--ActiveLinkText);
 }
 
 
@@ -269,27 +365,27 @@ table.index a:hover, table.index a:active {
 	min-height: 42px;
 }
 .box-info {
-	background: #e4ffde url(images/alert_info_32.png) 15px 15px no-repeat;
+	background: var(--InfoBackground) url(images/alert_info_32.png) 15px 15px no-repeat;
 }
 .box-warning {
-	background: #fffbc6 url(images/alert_warning_32.png) 15px 15px no-repeat;
+	background: var(--WarningBackground) url(images/alert_warning_32.png) 15px 15px no-repeat;
 }
 .box-stop {
-	background: #ffeae6 url(images/alert_stop_32.png) 15px 15px no-repeat;
+	background: var(--StopBackground) url(images/alert_stop_32.png) 15px 15px no-repeat;
 }
 
 /* More layout and styles */
 h1 {
 	font-size: 1.3em;
 	font-weight: bold;
-	color: #0c3762;
+	color: var(--HeaderText);
 	border-bottom: dotted thin #e0e0e0;
 	margin-bottom: 25px;
 }
 h2 {
 	font-size: 1.3em;
 	font-weight: normal;
-	color: #0c3762;
+	color: var(--HeaderText);
 	border-bottom: dotted thin #e0e0e0;
 	margin-top: 18px;
 }
@@ -301,20 +397,20 @@ h2 {
 h3 {
 	font-size: 1.2em;
 	font-weight: normal;
-	color: #0c3762;
+	color: var(--HeaderText);
 	border-bottom: dotted thin #e0e0e0;
 	margin-top: 30px;
 }
 h4 {
 	font-size: 1.1em;
 	font-weight: normal;
-	color: #0c3762;
+	color: var(--HeaderText);
 	margin-top: 30px;
 }
 h5 {
 	font-size: 1.0em;
 	font-weight: normal;
-	color: #0c3762;
+	color: var(--HeaderText);
 	margin-top: 30px;
 }
 p {
@@ -337,17 +433,17 @@ td.onelinetop {
 	white-space: nowrap;
 }
 tt {
-    	background-color: #e2e2e2;
-    	font-size: 1.0em;
-    	font-family: monospace;
+    background-color: var(--SecondaryCanvas);
+    font-size: 1.0em;
+    font-family: monospace;
 }
 pre {
-	border-color: #0c3762;
+	border-color: var(--HeaderText);
 	border-style: dotted;
 	border-width: thin;
 	margin: 0em;
 	padding: 1.5em;
-	background-color: #f0f0f0;
+	background-color: var(--SecondaryCanvas);
 }
 pre.terminal {			/* Terminal output*/
 	border-color: #ffb11f;
@@ -359,43 +455,43 @@ pre.terminal {			/* Terminal output*/
 	color: #ffb11f;
 }
 .menu {				/* Menu */
-    	font-size: 1.0em;
-    	font-family: serif;
-    	font-style: italic;
-	color: #24225e;
+    font-size: 1.0em;
+    font-family: serif;
+    font-style: italic;
+	color: var(--MenuColor);
 }
 .button {			/* Button */
-    	font-size: 1.0em;
-    	font-family: serif;
-    	font-style: italic;
+    font-size: 1.0em;
+    font-family: serif;
+    font-style: italic;
 	color: #33583c;
 }
 .app {				/* GUI Application name */
-    	font-size: 1.0em;
-    	font-family: serif;
-    	font-style: italic;
+    font-size: 1.0em;
+    font-family: serif;
+    font-style: italic;
 	color: #5e1c1c;
 }
 .cli {				/* Shell command or file */
-    	background-color: #e8e8e8;
-    	font-size: 0.9em;
-    	font-family: monospace;
+    background-color: var(--SecondaryCanvas);
+    font-size: 0.9em;
+    font-family: monospace;
 }
 .path {				/* File path */
-    	background-color: #e8e8e8;
-    	font-size: 0.9em;
-    	font-family: monospace;
+    background-color: var(--SecondaryCanvas);
+    font-size: 0.9em;
+    font-family: monospace;
 }
 .key {				/* Shortcut (separate with   */
 	-webkit-border-radius: 3px;
 	-khtml-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
-	border-color: #c7c7c7;
+	border-color: var(--ButtonBorder);
 	border-style: solid;
 	border-width: 1px;
 	padding: 0px 2px 0px 2px;
-	background-color: #e8e8e8;
+	background-color: var(--ButtonBackground);
     	font-family: serif;
    	font-variant: small-caps;
   	font-size: 0.8em;
diff --git a/userguide/images/HaikuDark.svg b/userguide/images/HaikuDark.svg
new file mode 100644
index 00000000..8f72241a
--- /dev/null
+++ b/userguide/images/HaikuDark.svg
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<svg width="254" height="81" color-interpolation="linearRGB" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+ <g visibility="hidden">
+ </g>
+ <g opacity="0.4399">
+  <path style="fill:#808080"
+        d="M23.32 18.75v42.33h5.23c0 -14.11 0 -28.22 0 -42.33h-5.23v0z"
+  />
+  <path style="fill:#808080"
+        d="M48.63 18.75c0 14.11 0 28.22 0 42.33h5.18v-42.33h-5.18v0z"
+  />
+  <path style="fill:#808080"
+        d="M89.51 16.88l-20.07 44.2h5.68l14.5 -32.3l14.32 32.3h5.67l-20.11 -44.2v0z"
+  />
+  <path style="fill:#808080"
+        d="M125.33 18.75v42.33h5.23v-42.33h-5.23v0z"
+  />
+  <path style="fill:#808080"
+        d="M150.94 18.75v42.33h5.23v-17.63l2.05 -2.13l15.9 19.76h7.06l-19.22 -23.36l18.89 -18.97h-6.84l-17.84 18.29v-18.29h-5.23v0z"
+  />
+  <path style="fill:#808080"
+        d="M221.71 18.75v25.44c0 4.06 -0.83 7.22 -2.5 9.48c-1.67 2.25 -4.25 3.37 -7.74 3.37c-3.66 0 -6.27 -1.23 -7.81 -3.7c-1.55 -2.48 -2.32 -5.37 -2.32 -8.7v-25.89h-5.18v27.17c0 2.57 0.53 5.08 1.62 7.52c1.08 2.45 2.77 4.48 5.09 6.08c2.3 1.6 5.17 2.42 8.6 2.46c2.26 0 4.34 -0.39 6.24 -1.17c1.89 -0.78 3.53 -1.9 4.91 -3.36c1.37 -1.46 2.43 -3.19 3.17 -5.2c0.73 -2 1.1 -4.2 1.1 -6.59v-26.9h-5.18v0z"
+  />
+ </g>
+ <g>
+  <path style="fill:#ffffff"
+        d="M238.73 22.78c0 -0.91 0.34 -1.71 1.02 -2.4c0.68 -0.69 1.57 -1.03 2.67 -1.03c0.92 0 1.74 0.32 2.44 0.98c0.69 0.65 1.04 1.47 1.04 2.46c0 0.93 -0.32 1.76 -0.98 2.49c-0.65 0.72 -1.51 1.09 -2.58 1.09c-0.02 0 -0.04 0 -0.06 0c-0.02 0 -0.04 0 -0.06 0c-0.98 -0.02 -1.77 -0.34 -2.36 -0.93c-0.59 -0.59 -0.95 -1.25 -1.08 -1.96c-0.01 -0.08 -0.02 -0.18 -0.03 -0.27c-0 -0.09 -0.01 -0.18 -0.01 -0.27c0 -0.02 0 -0.04 0 -0.06c0 -0.02 0 -0.04 0 -0.06v-0z
+           M245.28 22.7c0 -0.01 0 -0.02 0 -0.04c0 -0.01 0 -0.03 0 -0.06c0 -0.09 -0 -0.19 -0.01 -0.29c-0.01 -0.1 -0.03 -0.2 -0.06 -0.3c-0.13 -0.52 -0.44 -1 -0.92 -1.44c-0.47 -0.43 -1.09 -0.65 -1.85 -0.65c-0.01 0 -0.02 0 -0.03 0c-0 0 -0.01 0 -0.03 0c-0.01 0 -0.02 0 -0.03 0c-0 0 -0.01 0 -0.03 0c-0.85 0.02 -1.5 0.27 -1.96 0.72c-0.46 0.45 -0.76 0.94 -0.91 1.48c-0.03 0.14 -0.06 0.28 -0.08 0.42c-0.01 0.13 -0.02 0.27 -0.02 0.4c0.02 0.69 0.21 1.25 0.58 1.67c0.36 0.42 0.76 0.73 1.19 0.93c0.2 0.09 0.4 0.16 0.6 0.21c0.19 0.04 0.37 0.06 0.53 0.06c0.83 0 1.5 -0.23 2.01 -0.71c0.51 -0.47 0.83 -0.99 0.97 -1.56c0.02 -0.09 0.04 -0.19 0.05 -0.29c0.01 -0.09 0.01 -0.19 0.01 -0.29c0 -0.04 0 -0.08 0 -0.12c0 -0.03 -0 -0.07 -0 -0.12v-0z
+           M240.87 20.94h1.78c0.42 0 0.74 0.08 0.96 0.24c0.21 0.15 0.32 0.4 0.32 0.75c0 0.34 -0.07 0.6 -0.23 0.76c-0.15 0.16 -0.43 0.28 -0.82 0.35l1.06 1.75h-0.71l-0.99 -1.76h-0.78v1.76h-0.57v-3.88z
+           M242.58 21.44h-1.14v1.05h1.21c0.24 0 0.42 -0.03 0.54 -0.13c0.11 -0.09 0.17 -0.21 0.17 -0.34c0 -0.14 -0.06 -0.27 -0.18 -0.38c-0.12 -0.11 -0.32 -0.17 -0.6 -0.17v-0z"
+  />
+ </g>
+ <g>
+  <path style="fill:#ffffff"
+        d="M24.11 19.05v41.29h4.82v-41.29h-4.82z"
+  />
+  <path style="fill:#ffffff"
+        d="M48.22 19.05v41.29h4.82v-41.29h-4.82z"
+  />
+  <path style="fill:#ffffff"
+        d="M89.51 16.88l-20.07 43.41h5.68l14.5 -31.51l14.32 31.51h5.67l-20.11 -43.41v0z"
+  />
+  <path style="fill:#ffffff"
+        d="M125.39 19.05v41.29h4.82v-41.29h-4.82z"
+  />
+  <path style="fill:#ffffff"
+        d="M151.11 19.05v41.29h4.82l0.04 -16.89l2.25 -2.13l15.9 18.97h7.06l-19.22 -22.56l18.89 -18.67h-6.84l-18.04 18l-0.04 -17.99h-4.82z"
+  />
+  <path style="fill:#ffffff"
+        d="M221.84 19.05l-0.03 25.14c0 4.06 -0.93 7.22 -2.6 9.48c-1.67 2.25 -4.25 3.37 -7.74 3.37c-3.66 0 -6.27 -1.23 -7.81 -3.7c-1.55 -2.48 -2.72 -5.37 -2.72 -8.7l0.03 -25.59h-4.82l0.01 26.87c0 2.57 0.53 5.08 1.62 7.52c1.08 2.45 2.77 4.48 5.09 6.08c2.3 1.6 5.17 2.42 8.6 2.46c2.26 0 4.34 -0.39 6.24 -1.17c1.89 -0.78 3.53 -1.9 4.91 -3.36c1.37 -1.46 2.33 -3.19 3.07 -5.2c0.73 -2 1 -4.2 1 -6.59l-0.02 -26.6h-4.82z"
+  />
+ </g>
+ <g visibility="hidden">
+  <radialGradient id="gradient0" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.105,-0.1173,-0.1402,-0.1975,214.2878,40.9923)">
+   <stop offset="0" stop-color="#ffa600"/>
+   <stop offset="1" stop-color="#ffeb16"/>
+  </radialGradient>
+  <path style="fill:url(#gradient0)"
+        d="M214.86 40.77c-1.21 6.24 0.32 10.94 3.6 14.43c0.05 -0.95 0.59 -2.33 0.9 -2.9c1.1 5.85 4.82 6.89 6.73 7.59c0.07 -0.71 -0.59 -1.09 -0.05 -2.76c0.62 1.31 1.19 2.05 1.93 3.15c1.11 0.28 2.32 0.99 3.52 1.14c1.48 0.18 3.45 0.36 5.09 0.49c-0.02 -0.74 0.2 -1.04 0.48 -1.5c0.19 0.57 0.45 1.1 0.78 1.58c1.69 -0.14 3.17 0.38 3.97 0.86c-0.88 -3.56 -3.48 -7.2 -5.82 -9.55c-1.37 -0.4 -2.37 0.27 -4.23 1.05c0.37 -1.04 1.14 -1.9 2.66 -2.39c-1.86 -1.51 -3.89 -2.83 -5.92 -4.08c-0.78 -0.48 -3.13 -1.39 -4.18 -2.13c-1.03 -0.01 -1.97 0.02 -2.84 0.12c0.59 -0.4 1.12 -0.88 1.77 -1.22c-2.67 -2.93 -4.73 -4.15 -7.91 -5.01c-2.88 -4.35 -4.2 -10.46 -3.49 -10.86l-1.67 0.93c0 0 1.48 6.78 4.65 11.05v0z"
+  />
+ </g>
+ <g>
+  <radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.114,-0.1003,-0.1522,-0.1689,212.153,53.2874)">
+   <stop offset="0" stop-color="#ffa600"/>
+   <stop offset="1" stop-color="#ffee9c"/>
+  </radialGradient>
+  <path style="fill:url(#gradient1)"
+        d="M215 40.77c-1.2 6.24 0.32 10.94 3.59 14.43c0.05 -0.95 0.44 -1.64 0.76 -2.2c0.34 6.02 4.95 6.19 6.86 6.9c0.07 -0.71 -0.59 -1.09 -0.05 -2.76c0.62 1.31 1.19 2.05 1.92 3.15c1.11 0.28 2.31 0.99 3.51 1.14c1.48 0.18 3.44 0.36 5.07 0.49c-0.02 -0.74 0.2 -1.04 0.48 -1.5c0.19 0.57 0.45 1.1 0.78 1.58c1.69 -0.14 3.16 0.38 3.95 0.86c-0.88 -3.56 -3.47 -7.2 -5.8 -9.55c-1.37 -0.4 -2.36 0.27 -4.22 1.05c0.37 -1.04 1.14 -1.9 2.65 -2.39c-1.85 -1.51 -3.88 -2.83 -5.9 -4.08c-0.78 -0.48 -3.13 -1.39 -4.16 -2.13c-1.02 -0.01 -1.96 0.02 -2.83 0.12c0.59 -0.4 1.12 -0.88 1.77 -1.22c-2.66 -2.93 -4.71 -4.15 -7.89 -5.01c-2.88 -4.35 -4.19 -10.46 -3.48 -10.86l-1.66 0.93c0 0 1.48 6.78 4.64 11.05v0z"
+  />
+ </g>
+ <g visibility="hidden">
+  <radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.2685,-0.0194,0.0101,0.0662,89.1002,41.7602)">
+   <stop offset="0" stop-color="#ff4500"/>
+   <stop offset="1" stop-color="#ffaa00"/>
+  </radialGradient>
+  <path style="fill:url(#gradient2)"
+        d="M106.7 50.42c-3.38 -6.91 -8.3 -10.36 -14.03 -11.42c0.64 0.96 1.07 2.39 1.17 3.28c-5.57 -5.5 -9.63 -3.08 -12 -2.41c1.15 0.77 1.9 1.02 2.35 3.25c-2.21 -1.48 -3.78 -1.66 -5.12 -2.13c-1.28 0.51 -2.3 0.5 -3.58 1.21c-1.57 0.87 -3.61 2.09 -5.29 3.12c0.56 0.7 0.56 1.15 0.63 1.8c-0.6 -0.41 -1.24 -0.74 -1.92 -0.97c-1.53 1.34 -3.35 1.87 -4.47 1.97c3.46 2.82 8.63 4.51 12.61 5.12c1.62 -0.58 2.09 -1.94 3.33 -4.02c0.39 1.27 0.27 2.65 -0.83 4.2c2.91 0.14 5.84 -0.01 8.71 -0.24c1.11 -0.08 4.05 -0.87 5.6 -0.89c1 -0.71 1.88 -1.42 2.65 -2.13c-0.27 0.81 -0.44 1.65 -0.82 2.44c4.73 0.94 7.61 0.67 11.32 -0.74c5.97 2.17 11.71 7.15 11.31 8.04l0.93 -2.08c0 0 -6.39 -5.52 -12.58 -7.4v0z"
+  />
+ </g>
+ <g>
+  <radialGradient id="gradient3" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.2677,-0.0278,0.0101,0.0948,88.7923,39.4077)">
+   <stop offset="0" stop-color="#ff7200"/>
+   <stop offset="1" stop-color="#ffaa00"/>
+  </radialGradient>
+  <path style="fill:url(#gradient3)"
+        d="M106.34 50.42c-3.37 -6.91 -8.28 -10.36 -13.99 -11.42c0.64 0.96 0.76 1.9 0.86 2.67c-4.72 -5.58 -9.3 -2.47 -11.66 -1.8c0.44 0.74 1.37 0.63 2.07 2.64c-1.55 -0.82 -2.65 -1.14 -4.16 -1.68c-1.28 0.51 -2.96 0.67 -4.23 1.38c-1.56 0.87 -3.6 2.09 -5.27 3.12c0.56 0.7 0.56 1.15 0.63 1.8c-0.6 -0.41 -1.24 -0.74 -1.91 -0.97c-1.52 1.34 -3.34 1.87 -4.46 1.97c3.45 2.82 8.6 4.51 12.57 5.12c1.62 -0.58 2.09 -1.94 3.32 -4.02c0.39 1.27 0.27 2.65 -0.83 4.2c2.9 0.14 5.83 -0.01 8.68 -0.24c1.11 -0.08 4.04 -0.87 5.59 -0.89c1 -0.71 1.88 -1.42 2.65 -2.13c-0.27 0.81 -0.44 1.65 -0.81 2.44c4.71 0.94 7.59 0.67 11.29 -0.74c5.96 2.17 11.67 7.15 11.28 8.04l0.93 -2.08c0 0 -6.37 -5.52 -12.54 -7.4v0z"
+  />
+ </g>
+ <g visibility="hidden">
+  <path style="fill:#010101; fill-opacity:0.7333"
+        d="M24.72 46.46c5.62 5.3 11.13 6.91 16.87 5.94c-1.2 -1.29 -1.07 -1.58 -1.44 -2.27c7.47 2.57 9.62 -0.88 11.6 -2.33c-0.68 -0.54 -1.51 -0.11 -2.88 -1.76c1.75 0.24 2.89 0.15 4.51 0.14c1.01 -0.92 2.54 -1.65 3.49 -2.75c1.16 -1.35 2.64 -3.21 3.85 -4.75c-0.77 -0.46 -1.35 -1.16 -1.65 -1.75c0.71 0.18 1.84 0.54 2.56 0.53c0.95 -1.78 2.47 -2.91 3.49 -3.39c-4.24 -1.45 -9.69 -1.25 -13.63 -0.46c-1.31 1.1 -1.27 2.54 -1.7 4.91c-0.82 -1.06 -1.19 -2.39 -0.71 -4.23c-2.77 0.86 -5.47 2.02 -8.08 3.22c-1.01 0.46 -2.89 1.93 -4.34 2.48c-0.8 1.78 -1.6 3.27 -2.71 4.36c-0.2 -1.19 -0.1 -2.68 0.28 -3.74c-4.77 0.73 -7.37 1.98 -10.34 4.59c-6.37 0.02 -13.5 -2.67 -13.45 -3.64l-0.13 2.27c0 0 7.94 2.97 14.41 2.61v0z"
+  />
+  <radialGradient id="gradient4" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.3339,-0.1339,0.0537,0.1115,36.0376,51.6369)">
+   <stop offset="0" stop-color="#33a02c"/>
+   <stop offset="1" stop-color="#a9ff00"/>
+  </radialGradient>
+  <path style="fill:url(#gradient4)"
+        d="M24.09 45.87c5.6 5.3 11.42 6.85 17.15 5.87c-0.94 -0.68 -1.39 -1.52 -1.76 -2.2c6.39 3.6 9.59 -0.88 11.57 -2.33c-0.67 -0.54 -1.5 -0.11 -2.87 -1.76c1.75 0.24 2.88 0.15 4.49 0.14c1.01 -0.92 2.54 -1.65 3.48 -2.75c1.16 -1.35 2.63 -3.21 3.83 -4.75c-0.77 -0.46 -0.93 -0.88 -1.22 -1.47c0.71 0.18 1.42 0.26 2.13 0.25c0.95 -1.78 2.46 -2.91 3.48 -3.39c-4.23 -1.45 -9.66 -1.25 -13.59 -0.46c-1.31 1.1 -1.27 2.54 -1.69 4.91c-0.82 -1.06 -1.19 -2.39 -0.7 -4.23c-2.77 0.86 -5.45 2.02 -8.05 3.22c-1.01 0.46 -3.48 2.21 -4.92 2.76c-0.69 1.01 -1.26 1.98 -1.73 2.91c-0.03 -0.85 -0.16 -1.7 -0.09 -2.57c-4.75 0.73 -7.35 1.98 -10.31 4.59c-6.35 0.02 -13.47 -2.67 -13.41 -3.64l-0.13 2.27c0 0 7.92 2.97 14.37 2.61v0z"
+  />
+ </g>
+ <g>
+  <radialGradient id="gradient5" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.3339,-0.1339,0.0537,0.1115,36.0376,51.6369)">
+   <stop offset="0" stop-color="#33a02c"/>
+   <stop offset="1" stop-color="#a9ff00"/>
+  </radialGradient>
+  <path style="fill:url(#gradient5)"
+        d="M24.09 45.87c5.6 5.3 11.42 6.85 17.15 5.87c-0.94 -0.68 -1.39 -1.52 -1.76 -2.2c6.39 3.6 9.59 -0.88 11.57 -2.33c-0.67 -0.54 -1.5 -0.11 -2.87 -1.76c1.75 0.24 2.88 0.15 4.49 0.14c1.01 -0.92 2.54 -1.65 3.48 -2.75c1.16 -1.35 2.63 -3.21 3.83 -4.75c-0.77 -0.46 -0.93 -0.88 -1.22 -1.47c0.71 0.18 1.42 0.26 2.13 0.25c0.95 -1.78 2.46 -2.91 3.48 -3.39c-4.23 -1.45 -9.66 -1.25 -13.59 -0.46c-1.31 1.1 -1.27 2.54 -1.69 4.91c-0.82 -1.06 -1.19 -2.39 -0.7 -4.23c-2.77 0.86 -5.45 2.02 -8.05 3.22c-1.01 0.46 -3.48 2.21 -4.92 2.76c-0.69 1.01 -1.26 1.98 -1.73 2.91c-0.03 -0.85 -0.16 -1.7 -0.09 -2.57c-4.75 0.73 -7.35 1.98 -10.31 4.59c-6.35 0.02 -13.47 -2.67 -13.41 -3.64l-0.13 2.27c0 0 7.92 2.97 14.37 2.61v0z"
+  />
+ </g>
+</svg>
diff --git a/userguide/images/LeafDark.png b/userguide/images/LeafDark.png
new file mode 100644
index 00000000..713a5f0d
Binary files /dev/null and b/userguide/images/LeafDark.png differ
diff --git a/userguide/images/LeafDark.svg b/userguide/images/LeafDark.svg
new file mode 100644
index 00000000..f22705c1
--- /dev/null
+++ b/userguide/images/LeafDark.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<svg width="372" height="121" color-interpolation="linearRGB" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+ <g visibility="hidden">
+  <path style="fill:none; stroke:#e8e8e8; stroke-opacity:0; stroke-width:0.2"
+        d="M90.85 597.23c6.97 -6.68 14.21 -8.62 21.33 -7.4c-1.17 0.86 -1.72 1.91 -2.19 2.78c7.96 -4.54 11.94 1.11 14.39 2.93c-0.84 0.68 -1.87 0.15 -3.57 2.21c2.17 -0.3 3.59 -0.19 5.59 -0.18c1.26 1.16 3.16 2.08 4.33 3.47c1.44 1.71 3.27 4.04 4.77 5.98c-0.96 0.59 -1.16 1.11 -1.52 1.85c0.88 -0.22 1.77 -0.33 2.66 -0.32c1.19 2.25 3.07 3.66 4.33 4.26c-5.27 1.83 -12.02 1.58 -16.91 0.58c-1.63 -1.39 -1.58 -3.2 -2.11 -6.19c-1.02 1.33 -1.48 3.01 -0.88 5.32c-3.44 -1.08 -6.79 -2.54 -10.02 -4.06c-1.25 -0.58 -4.33 -2.78 -6.12 -3.48c-0.85 -1.27 -1.95 -2.85 -2.54 -4.02c-0.54 0.81 -0.42 2.54 0.15 3.81c-5.91 -0.92 -9.03 -2.71 -12.72 -5.99c-7.9 -0.02 -16.44 3.52 -16.37 4.74l-0.16 -2.86c0 0 9.54 -3.89 17.57 -3.44v0z"
+        transform="matrix(1.5854,0.6056,1.7959,-3.675,-1127.1127,2182.58)"
+  />
+  <path style="fill:#efefef"
+        d="M-86 86v39h1555v-39h-1555z"
+  />
+  <path style="fill:#a2a2a2"
+        d="M-86 86v15h1555v-15h-1555z"
+  />
+ </g>
+ <g>
+  <path style="fill:none; stroke:#e8e8e8; stroke-width:0.2"
+        d="M90.85 597.23c6.97 -6.68 14.21 -8.62 21.33 -7.4c-1.17 0.86 -1.72 1.91 -2.19 2.78c7.96 -4.54 11.94 1.11 14.39 2.93c-0.84 0.68 -1.87 0.15 -3.57 2.21c2.17 -0.3 3.59 -0.19 5.59 -0.18c1.26 1.16 3.16 2.08 4.33 3.47c1.44 1.71 3.27 4.04 4.77 5.98c-0.96 0.59 -1.16 1.11 -1.52 1.85c0.88 -0.22 1.77 -0.33 2.66 -0.32c1.19 2.25 3.07 3.66 4.33 4.26c-5.27 1.83 -12.02 1.58 -16.91 0.58c-1.63 -1.39 -1.58 -3.2 -2.11 -6.19c-1.02 1.33 -1.48 3.01 -0.88 5.32c-3.44 -1.08 -6.79 -2.54 -10.02 -4.06c-1.25 -0.58 -4.33 -2.78 -6.12 -3.48c-0.85 -1.27 -1.95 -2.85 -2.54 -4.02c-0.54 0.81 -0.42 2.54 0.15 3.81c-5.91 -0.92 -9.03 -2.71 -12.72 -5.99c-7.9 -0.02 -16.44 3.52 -16.37 4.74l-0.16 -2.86c0 0 9.54 -3.89 17.57 -3.44v0z"
+        transform="matrix(1.5854,0.6056,1.7959,-3.675,-1127.1127,2182.58)"
+  />
+  <path style="fill:#a2a2a2"
+        d="M-86 86v39h1555v-39h-1555z"
+  />
+ </g>
+ <g visibility="hidden">
+  <path style="fill:none; stroke:#010101; stroke-width:0.2"
+        d="M90.85 597.23c6.97 -6.68 14.21 -8.62 21.33 -7.4c-1.17 0.86 -1.72 1.91 -2.19 2.78c7.96 -4.54 11.94 1.11 14.39 2.93c-0.84 0.68 -1.87 0.15 -3.57 2.21c2.17 -0.3 3.59 -0.19 5.59 -0.18c1.26 1.16 3.16 2.08 4.33 3.47c1.44 1.71 3.27 4.04 4.77 5.98c-0.96 0.59 -1.16 1.11 -1.52 1.85c0.88 -0.22 1.77 -0.33 2.66 -0.32c1.19 2.25 3.07 3.66 4.33 4.26c-5.27 1.83 -12.02 1.58 -16.91 0.58c-1.63 -1.39 -1.58 -3.2 -2.11 -6.19c-1.02 1.33 -1.48 3.01 -0.88 5.32c-3.44 -1.08 -6.79 -2.54 -10.02 -4.06c-1.25 -0.58 -4.33 -2.78 -6.12 -3.48c-0.85 -1.27 -1.95 -2.85 -2.54 -4.02c-0.54 0.81 -0.42 2.54 0.15 3.81c-5.91 -0.92 -9.03 -2.71 -12.72 -5.99c-7.9 -0.02 -16.44 3.52 -16.37 4.74l-0.16 -2.86c0 0 9.54 -3.89 17.57 -3.44v0z"
+        transform="matrix(1.5854,0.6056,1.7959,-3.675,-1127.1127,2182.58)"
+  />
+ </g>
+</svg>