Add dark variant of icons and use that on dashboard.

css/global.css

@@ -1,7 +1,9 @@
-.icon-quicknotes {
+.dashboard-quicknotes-icon {
-	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIGZpbGw9IiNmZmYiPgogIDxwYXRoIGQ9Im0yOC4xOTggMjUuMjMxYy0wLjEwMzUyIDEuNTE2MS0xLjY1NTIgMi41MzkyLTMuMDg0MSAyLjMzOTctNy4yNjcyLTAuMDA4Ni0xNC41MzUtMC4wMjI2LTIxLjgwMi0wLjA1MzE4LTEuMzI1NC0wLjA5MDY2LTIuMjEzNS0xLjI0NDYtMi4yODY1LTIuNDk5Mi0xLjQ5ZS00IDAuOTU2NjUgMC4wMDEyIDEuOTE0OCAwIDIuODcxNC0wLjE5OTc2IDEuNDMxNyAwLjc2ODg4IDIuOTgwNCAyLjI4NjUgMy4wODQxIDcuMjgwNCAwLjAzMDYxIDE0LjU3NC0wLjAwODYgMjEuODU1IDAgMS40MzE3IDAuMTk5NzYgMi45ODA0LTAuNzY4ODggMy4wODQxLTIuMjg2NWwtMC4wNTMxOC0zLjQ1NjR6Ii8+CiAgPHBhdGggZD0ibTMuNTc4NCAzLjc0ODZjLTEuMjczMS0wLjAyMTk3NC0yLjM5NiAwLjgyOTI5LTIuNDk5MiAxLjg2MTEtMC4wMzA1NiA1LjkwOTMtMC4wNDQ0NSAxMS43OTctMC4wNTMxNyAxNy43MDctMC4xOTkzOCAxLjE2MiAwLjc3MTc2IDIuNDE1IDIuMjg2NSAyLjQ5OTIgNy4yNjY2IDAuMDI0ODQgMTQuNTM0IDAuMDQ2MDggMjEuODAyIDAuMDUzMTggMS40MjkgMC4xNjIxNCAyLjk4MDYtMC42MjkzMSAzLjA4NDEtMS44NjExIDAuMDI2NDUtNS4xMTMxIDAuMDUyMzItMTAuMjU0IDAuMDUzMTgtMTUuMzY3bC04LjU2MTEgOC41NjExYy0wLjYzODA5IDAuNjM4MDgtMS40MjM1IDAuODY3MTEtMi4yMzMzIDAuOTAzOTctMC4zOTI0OCAwLjMyMTItMC43ODEyIDAuNjMyNjItMS4yNzYyIDAuNzk3NjItMC42NzEyNiAwLjIyMzc2LTEuNzEwMiAwLjMxMDQyLTIuNTUyNC0wLjUzMTc1LTAuODQyMTYtMC44NDIxNi0wLjc1NTUtMS44ODExLTAuNTMxNzUtMi41NTI0IDAuMTY1LTAuNDk0OTkgMC40NzY0Mi0wLjg4MzcyIDAuNzk3NjItMS4yNzYyIDAuMDM2ODUtMC44MDk4NiAwLjI2NTg4LTEuNTk1MiAwLjkwMzk3LTIuMjMzM2w4LjU2MTEtOC41NjExYy02LjU3OTYtMC4wMTMzNTctMTMuMjAxIDAuMDA2MjYtMTkuNzgxIDB6Ii8+CiAgPHBhdGggZD0ibTE2LjA2MiAxMy41MzJjLTAuNDQwNDkgMC40NDA0OS0wLjU1NTI5IDEuMDU1OC0wLjQxMzYgMS42MTY4bC0wLjE4OCAwLjE4OGMtMC42NjY1OCAwLjY2NjU4LTAuOTM0ODkgMS40NzE1LTAuNjAxNiAxLjgwNDggMC4zMzMyOSAwLjMzMzI5IDEuMTM4MiAwLjA2NDk3IDEuODA0OC0wLjYwMTZsMC4xODgtMC4xODhjMC41NjA5NiAwLjE0MTY5IDEuMTc2MyAwLjAyNjg4IDEuNjE2OC0wLjQxMzZsMTIuMDMyLTEyLjAzMmMwLjY2NjU4LTAuNjY2NTggMC42NjY1OC0xLjczOTggMC0yLjQwNjQtMC42NjY1Ny0wLjY2NjU4LTEuNzM5OC0wLjY2NjU4LTIuNDA2NCAweiIvPgogPC9nPgo8L3N2Zz4K")
+    background-image: url(../img/app-dark.svg);
+    filter: var(--background-invert-if-dark);
 }
 
-.icon-pinned {
+.dashboard-pinned-icon {
-	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41NzIgMi40YTEuNDI4NiAxLjQgMCAwIDAtMS40Mjg2LTEuNGgtNC4yODU3Yy0wLjc4NTcxIDAtMS40Mjg2IDAuNjMtMS40Mjg2IDEuNHY0LjlsLTEuNDI4NiAyLjF2MS40aDQuMjg1N3YzLjVsMC43MTQyOSAwLjcgMC43MTQyOS0wLjd2LTMuNWg0LjI4NTd2LTEuNGwtMS40Mjg2LTIuMXoiIHN0cm9rZS13aWR0aD0iLjcwNzExIi8+PC9zdmc+Cg==")
+    background-image: url(../img/pinned.svg);
+    filter: var(--background-invert-if-dark);
 }

img/app-dark.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 32 32"
+   fill="#000000"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="app-dark.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   width="32"
+   height="32"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       id="swatch1"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="15.758161"
+     inkscape:cx="12.215892"
+     inkscape:cy="9.772714"
+     inkscape:window-width="1920"
+     inkscape:window-height="1010"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <g
+     id="g3"
+     transform="translate(1.4013811e-4,4.9861892e-5)">
+    <path
+       d="m 28.198,25.231 c -0.10352,1.5161 -1.6552,2.5392 -3.0841,2.3397 -7.2672,-0.0086 -14.535,-0.0226 -21.802,-0.05318 -1.3254,-0.09066 -2.2135,-1.2446 -2.2865,-2.4992 -1.49e-4,0.95665 0.0012,1.9148 0,2.8714 -0.19976,1.4317 0.76888,2.9804 2.2865,3.0841 7.2804,0.03061 14.574,-0.0086 21.855,0 1.4317,0.19976 2.9804,-0.76888 3.0841,-2.2865 l -0.05318,-3.4564 z"
+       id="path1" />
+    <path
+       d="M 3.5784,3.7486 C 2.3053,3.726626 1.1824,4.57789 1.0792,5.6097 1.04864,11.519 1.03475,17.4067 1.02603,23.3167 c -0.19938,1.162 0.77176,2.415 2.2865,2.4992 7.2666,0.02484 14.534,0.04608 21.802,0.05318 1.429,0.16214 2.9806,-0.62931 3.0841,-1.8611 0.02645,-5.1131 0.05232,-10.254 0.05318,-15.367 l -8.5611,8.5611 c -0.63809,0.63808 -1.4235,0.86711 -2.2333,0.90397 -0.39248,0.3212 -0.7812,0.63262 -1.2762,0.79762 -0.67126,0.22376 -1.7102,0.31042 -2.5524,-0.53175 -0.84216,-0.84216 -0.7555,-1.8811 -0.53175,-2.5524 0.165,-0.49499 0.47642,-0.88372 0.79762,-1.2762 0.03685,-0.80986 0.26588,-1.5952 0.90397,-2.2333 l 8.5611,-8.5611 c -6.5796,-0.013357 -13.201,0.00626 -19.781,0 z"
+       id="path2" />
+    <path
+       d="m 16.062,13.532 c -0.44049,0.44049 -0.55529,1.0558 -0.4136,1.6168 l -0.188,0.188 c -0.66658,0.66658 -0.93489,1.4715 -0.6016,1.8048 0.33329,0.33329 1.1382,0.06497 1.8048,-0.6016 l 0.188,-0.188 c 0.56096,0.14169 1.1763,0.02688 1.6168,-0.4136 l 12.032,-12.032 c 0.66658,-0.66658 0.66658,-1.7398 0,-2.4064 -0.66657,-0.66658 -1.7398,-0.66658 -2.4064,0 z"
+       id="path3" />
+  </g>
+</svg>

img/app.svg

@@ -1,7 +1,48 @@
-<svg version="1.0" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
- <g fill="#fff">
+<svg
-  <path d="m28.198 25.231c-0.10352 1.5161-1.6552 2.5392-3.0841 2.3397-7.2672-0.0086-14.535-0.0226-21.802-0.05318-1.3254-0.09066-2.2135-1.2446-2.2865-2.4992-1.49e-4 0.95665 0.0012 1.9148 0 2.8714-0.19976 1.4317 0.76888 2.9804 2.2865 3.0841 7.2804 0.03061 14.574-0.0086 21.855 0 1.4317 0.19976 2.9804-0.76888 3.0841-2.2865l-0.05318-3.4564z"/>
+   viewBox="0 0 32 32"
-  <path d="m3.5784 3.7486c-1.2731-0.021974-2.396 0.82929-2.4992 1.8611-0.03056 5.9093-0.04445 11.797-0.05317 17.707-0.19938 1.162 0.77176 2.415 2.2865 2.4992 7.2666 0.02484 14.534 0.04608 21.802 0.05318 1.429 0.16214 2.9806-0.62931 3.0841-1.8611 0.02645-5.1131 0.05232-10.254 0.05318-15.367l-8.5611 8.5611c-0.63809 0.63808-1.4235 0.86711-2.2333 0.90397-0.39248 0.3212-0.7812 0.63262-1.2762 0.79762-0.67126 0.22376-1.7102 0.31042-2.5524-0.53175-0.84216-0.84216-0.7555-1.8811-0.53175-2.5524 0.165-0.49499 0.47642-0.88372 0.79762-1.2762 0.03685-0.80986 0.26588-1.5952 0.90397-2.2333l8.5611-8.5611c-6.5796-0.013357-13.201 0.00626-19.781 0z"/>
+   fill="#ffffff"
-  <path d="m16.062 13.532c-0.44049 0.44049-0.55529 1.0558-0.4136 1.6168l-0.188 0.188c-0.66658 0.66658-0.93489 1.4715-0.6016 1.8048 0.33329 0.33329 1.1382 0.06497 1.8048-0.6016l0.188-0.188c0.56096 0.14169 1.1763 0.02688 1.6168-0.4136l12.032-12.032c0.66658-0.66658 0.66658-1.7398 0-2.4064-0.66657-0.66658-1.7398-0.66658-2.4064 0z"/>
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="app.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   width="32"
+   height="32"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="14.625862"
+     inkscape:cx="11.178828"
+     inkscape:cy="12.375339"
+     inkscape:window-width="1920"
+     inkscape:window-height="1010"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <g
+     id="g3"
+     transform="translate(1.4013811e-4,4.9861892e-5)">
+    <path
+       d="m 28.198,25.231 c -0.10352,1.5161 -1.6552,2.5392 -3.0841,2.3397 -7.2672,-0.0086 -14.535,-0.0226 -21.802,-0.05318 -1.3254,-0.09066 -2.2135,-1.2446 -2.2865,-2.4992 -1.49e-4,0.95665 0.0012,1.9148 0,2.8714 -0.19976,1.4317 0.76888,2.9804 2.2865,3.0841 7.2804,0.03061 14.574,-0.0086 21.855,0 1.4317,0.19976 2.9804,-0.76888 3.0841,-2.2865 l -0.05318,-3.4564 z"
+       id="path1" />
+    <path
+       d="M 3.5784,3.7486 C 2.3053,3.726626 1.1824,4.57789 1.0792,5.6097 1.04864,11.519 1.03475,17.4067 1.02603,23.3167 c -0.19938,1.162 0.77176,2.415 2.2865,2.4992 7.2666,0.02484 14.534,0.04608 21.802,0.05318 1.429,0.16214 2.9806,-0.62931 3.0841,-1.8611 0.02645,-5.1131 0.05232,-10.254 0.05318,-15.367 l -8.5611,8.5611 c -0.63809,0.63808 -1.4235,0.86711 -2.2333,0.90397 -0.39248,0.3212 -0.7812,0.63262 -1.2762,0.79762 -0.67126,0.22376 -1.7102,0.31042 -2.5524,-0.53175 -0.84216,-0.84216 -0.7555,-1.8811 -0.53175,-2.5524 0.165,-0.49499 0.47642,-0.88372 0.79762,-1.2762 0.03685,-0.80986 0.26588,-1.5952 0.90397,-2.2333 l 8.5611,-8.5611 c -6.5796,-0.013357 -13.201,0.00626 -19.781,0 z"
+       id="path2" />
+    <path
+       d="m 16.062,13.532 c -0.44049,0.44049 -0.55529,1.0558 -0.4136,1.6168 l -0.188,0.188 c -0.66658,0.66658 -0.93489,1.4715 -0.6016,1.8048 0.33329,0.33329 1.1382,0.06497 1.8048,-0.6016 l 0.188,-0.188 c 0.56096,0.14169 1.1763,0.02688 1.6168,-0.4136 l 12.032,-12.032 c 0.66658,-0.66658 0.66658,-1.7398 0,-2.4064 -0.66657,-0.66658 -1.7398,-0.66658 -2.4064,0 z"
+       id="path3" />
   </g>
 </svg>

lib/Dashboard/NotesWidget.php

@@ -45,7 +45,7 @@ class NotesWidget implements IWidget {
 	 * @inheritDoc
 	 */
 	public function getIconClass(): string {
-		return 'icon-quicknotes';
+		return 'dashboard-quicknotes-icon';
 	}
 
 	/**

src/components/Dashboard.vue

@@ -11,7 +11,7 @@
 				<template #avatar>
 					<div
 						class="note-item"
-						:class="{ 'icon-pinned': item.pinned, 'note-item-no-pinned': !hasPinned }"
+						:class="{ 'dashboard-pinned-icon': item.pinned, 'note-item-no-pinned': !hasPinned }"
 					/>
 				</template>
 			</DashboardWidgetItem>