From nephele <nep@xxxxxxxxxxxxxx>:
nephele has uploaded this change for review. (
https://review.haiku-os.org/c/haiku/+/5329 ;)
Change subject: WIP: userguide CSS dark mode
......................................................................
WIP: userguide CSS dark mode
Change-Id: I94c308ea22a304f061544a28e1490b9c004191d2
---
M docs/userguide/Haiku-doc.css
A docs/userguide/images/HaikuDark.svg
A docs/userguide/images/LeafDark.png
A docs/userguide/images/LeafDark.svg
4 files changed, 279 insertions(+), 50 deletions(-)
git pull ssh://git.haiku-os.org:22/haiku refs/changes/29/5329/1
diff --git a/docs/userguide/Haiku-doc.css b/docs/userguide/Haiku-doc.css
index 8c7051c..137b5fc 100644
--- a/docs/userguide/Haiku-doc.css
+++ b/docs/userguide/Haiku-doc.css
@@ -9,16 +9,103 @@
* Humdinger <humdingerb@xxxxxxxxx>
* Vincent Duvert <vincent.duvert@xxxxxxx>
* Augustin Cavalier <waddlesplash>
+ * Pascal R. G. Abresch <nep@xxxxxxxxxxxxxx>
*/
+:root {
+ color-scheme: light dark;
+}
+
+@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: #333;
+ }
+ }
+ @media (prefers-contrast: more) {
+ :root {
+ --CanvasText: #EFEFEF;
+ --ButtonBackground: #222;
+ --SecondaryCanvas: #111;
+ --TertiaryCanvas: #151515;
+ }
+ }
+ @media (prefers-contrast: less) {
+ :root {
+ --CanvasText: #AAA;
+ --ButtonBackground: #444;
+ }
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --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;
+ }
+}
+
+@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 +117,35 @@
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,11 +155,13 @@
left: 0;
top: 0;
height: 84px;
- background: #eeeeee;
+ background: var(--SecondaryCanvas);
}
+/* HaikuDark.svg -> Haiku logo - white on black - normal; canvas resize to
width 254 */
#banner div {
- background: transparent url(images/logo.png) no-repeat scroll 10px 0;
+ background: url(images/HaikuDark.svg) no-repeat scroll 6px 8px,
url(images/LeafDark.png) no-repeat scroll 10px 0;
+ background-image: ;
height: 100%;
margin: 0 auto;
}
@@ -90,7 +179,7 @@
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 +191,7 @@
position: relative;
left: 0;
top: 0;
- background: #e0e0e0;
+ background: var(--TertiaryCanvas);
padding: 0;
}
@media (min-width:768px) {
@@ -151,7 +240,7 @@
ul.lang-menu li {
margin-left: 10px;
- background: #e0e0e0;
+ background-color: var(--SecondaryCanvas);
display: none;
}
@@ -160,7 +249,7 @@
}
ul.lang-menu li:hover {
- background-color: #efefef;
+ background-color: var(--TertiaryCanvas);
}
ul.lang-menu li.now {
@@ -176,7 +265,7 @@
}
ul.lang-menu li a {
- color: black;
+ color: var(--CanvasText);
text-decoration: none;
font-weight: normal;
display: block;
@@ -226,13 +315,13 @@
z-index: 10;
}
table.index tr.heading {
- background-color: #e0e0e0;
+ background-color: var(--TertiaryCanvas);
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
table.index tr.index {
- background-color: #eeeeee;
+ background-color: var(--SecondaryCanvas);
}
table.index td {
padding: 5px 20px;
@@ -241,11 +330,11 @@
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 +358,27 @@
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 +390,20 @@
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,12 +426,12 @@
white-space: nowrap;
}
tt {
- background-color: #e2e2e2;
- font-size: 1.0em;
- font-family: monospace;
+ background-color: #e2e2e2;
+ font-size: 1.0em;
+ font-family: monospace;
}
pre {
- border-color: #0c3762;
+ border-color: var(--HeaderText);
border-style: dotted;
border-width: thin;
margin: 0em;
@@ -359,43 +448,43 @@
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/docs/userguide/images/HaikuDark.svg
b/docs/userguide/images/HaikuDark.svg
new file mode 100644
index 0000000..8f72241
--- /dev/null
+++ b/docs/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/docs/userguide/images/LeafDark.png
b/docs/userguide/images/LeafDark.png
new file mode 100644
index 0000000..713a5f0
--- /dev/null
+++ b/docs/userguide/images/LeafDark.png
Binary files differ
diff --git a/docs/userguide/images/LeafDark.svg
b/docs/userguide/images/LeafDark.svg
new file mode 100644
index 0000000..f22705c
--- /dev/null
+++ b/docs/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>
--
To view, visit https://review.haiku-os.org/c/haiku/+/5329
To unsubscribe, or for help writing mail filters, visit
https://review.haiku-os.org/settings
Gerrit-Project: haiku
Gerrit-Branch: master
Gerrit-Change-Id: I94c308ea22a304f061544a28e1490b9c004191d2
Gerrit-Change-Number: 5329
Gerrit-PatchSet: 1
Gerrit-Owner: nephele <nep@xxxxxxxxxxxxxx>
Gerrit-MessageType: newchange
