@crombolo/backoffice-host 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.17.0",
+    "@crombolo/core": "0.18.0",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/branding/branding.js

@@ -70,8 +70,101 @@ function correctLogoLink() {
   return true
 }
 
+/** Where Umbraco's theme context keeps the choice, as the shells' early script reads it. */
+const THEME_KEY = 'umb-theme-alias'
+
+/** Whether a theme choice paints the back office dark: Dark, or Match my system on a dark computer. */
+export function isDarkTheme(alias, prefersDark) {
+  return (
+    alias === 'Crombolo.Theme.Dark' ||
+    alias === 'umb-dark-theme' ||
+    (alias === 'Crombolo.Theme.System' && Boolean(prefersDark))
+  )
+}
+
+const GRAPHIC =
+  /(\/security\/back-office\/graphics\/)(logo|logo-alternative|login-logo|login-logo-alternative)(-dark)?$/
+
+/**
+ * A logo's address for the theme: the cream-lettered `-dark` variant on a dark
+ * theme, the plain one otherwise. Anything that is not one of the logos comes
+ * back as it was.
+ */
+export function themedLogoUrl(src, dark) {
+  const match = GRAPHIC.exec(src ?? '')
+  if (!match) return src
+  return `${src.slice(0, match.index)}${match[1]}${match[2]}${dark ? '-dark' : ''}`
+}
+
+const prefersDark = () => {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  } catch {
+    return false
+  }
+}
+
+const storedTheme = () => {
+  try {
+    return localStorage.getItem(THEME_KEY)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The header's logo, and the wordmark in its popover, in the theme's colours.
+ *
+ * `umb-app-logo` picks its graphic from Umbraco's own theme names, and the
+ * header pins it to the one drawn for an orange bar, so its cocoa lettering
+ * vanished on the dark header. Like the link above, this reaches into the
+ * vendored element and does nothing if it is not what it was.
+ */
+function applyThemedLogos() {
+  const dark = isDarkTheme(storedTheme(), prefersDark())
+  const header = deepQuery('umb-backoffice-header-logo')?.shadowRoot
+  const mark = header?.querySelector('umb-app-logo')?.shadowRoot?.querySelector('img')
+  if (!mark) return false
+  const src = mark.getAttribute('src')
+  const next = themedLogoUrl(src, dark)
+  if (next !== src) mark.setAttribute('src', next)
+  const popover = header.querySelector('img#logo')
+  if (popover) {
+    popover.dataset.lightSrc ??= popover.getAttribute('src') ?? ''
+    const wanted = dark
+      ? next.replace(/graphics\/logo-dark$/, 'graphics/logo-alternative-dark')
+      : popover.dataset.lightSrc
+    if (popover.getAttribute('src') !== wanted) popover.setAttribute('src', wanted)
+  }
+  return true
+}
+
+/** Applies the logos now and on every change of theme: the menu, another tab, or the computer's. */
+function followTheme() {
+  const apply = () => setTimeout(applyThemedLogos, 0)
+  // The theme context swaps the theme's stylesheet in the head when the choice changes.
+  new MutationObserver(apply).observe(document.head, { childList: true })
+  window.addEventListener('storage', (event) => {
+    if (event.key === THEME_KEY) apply()
+  })
+  try {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', apply)
+  } catch {
+    // Without media queries, Match my system stays light.
+  }
+}
+
 export const onInit = () => {
   const brand = brandName()
+  let themed = false
+  const logos = setInterval(() => {
+    if (applyThemedLogos() && !themed) {
+      themed = true
+      clearInterval(logos)
+      followTheme()
+    }
+  }, 250)
+  setTimeout(() => clearInterval(logos), 30_000)
   const correct = () => {
     const corrected = brandedTitle(document.title, brand)
     if (corrected !== document.title) document.title = corrected

package/plugin/branding/logo-header-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="81.25 269.75 1022.75 237.5" role="img" aria-label="crombolo"><circle cx="200" cy="388.5" r="116.75" fill="#cb6f48"/><path transform="matrix(0.025 0 0 -0.025 75 516)" d="M4285 8205 c-459 -94 -647 -159 -1014 -349 -249 -130 -544 -347 -669 -494 -26 -30 -82 -96 -125 -145 -218 -254 -207 -378 24 -266 295 143 924 329 1113 329 19 0 78 9 131 20 128 26 792 30 910 5 39 -8 108 -20 155 -25 378 -43 1093 -273 1364 -438 45 -27 114 -66 153 -86 91 -45 440 -278 525 -349 35 -29 91 -74 124 -100 651 -496 1244 -1578 1303 -2379 13 -165 47 -197 125 -115 86 90 236 513 236 663 0 23 9 86 20 139 25 122 27 345 4 450 -8 39 -19 111 -24 162 -50 500 -394 1231 -774 1648 -50 55 -116 130 -145 167 -30 37 -81 89 -115 115 -33 26 -114 96 -178 155 -117 106 -442 334 -560 394 -29 14 -100 55 -158 89 -97 59 -240 123 -516 231 -122 47 -541 156 -671 174 -45 6 -112 17 -150 25 -152 32 -900 19 -1088 -20z M3300 6458 c-58 -11 -142 -26 -186 -34 -80 -14 -243 -58 -414 -111 -742 -234 -1299 -909 -1300 -1575 0 -312 82 -391 218 -208 298 402 1010 790 1450 790 17 0 74 9 127 20 79 16 136 20 305 20 168 0 228 -4 310 -20 56 -11 124 -20 152 -20 406 0 1286 -389 1680 -742 56 -52 133 -117 171 -147 37 -29 88 -81 114 -115 26 -33 75 -92 108 -131 303 -346 645 -1054 645 -1336 0 -14 9 -68 20 -120 23 -111 27 -371 8 -505 -22 -155 37 -185 183 -93 657 414 699 1621 89 2594 -137 218 -431 585 -518 647 -11 7 -75 66 -144 130 -138 130 -157 146 -338 273 -329 233 -595 368 -985 501 -208 72 -585 164 -670 164 -18 0 -79 9 -135 20 -147 29 -730 28 -890 -2z M2909 4331 c-921 -186 -1424 -895 -1087 -1533 105 -199 210 -222 296 -65 284 517 979 758 1655 572 241 -66 501 -192 647 -314 25 -21 78 -64 119 -97 262 -210 502 -618 586 -998 64 -293 346 -107 440 291 45 189 45 192 -20 531 -50 262 -304 691 -560 947 -304 304 -848 601 -1190 650 -28 4 -90 16 -140 26 -153 32 -566 26 -746 -10z" fill="#fdebd4"/><path transform="matrix(0.025 0 0 -0.025 340 470)" d="M17231 5945 c-168 -47 -253 -129 -320 -310 -32 -87 -48 -4483 -16 -4609 116 -459 691 -531 916 -115 64 119 84 124 184 38 765 -661 1980 -322 2461 686 211 443 246 966 103 1527 -156 616 -774 1208 -1325 1273 -33 4 -103 16 -157 26 -288 56 -760 -83 -1009 -295 -193 -166 -188 -183 -188 699 0 837 0 835 -144 974 -117 112 -326 156 -505 106z m1804 -2497 c449 -160 700 -668 575 -1164 -177 -708 -937 -952 -1444 -465 -535 516 -283 1523 414 1655 84 16 386 -2 455 -26z M25519 5946 c-139 -37 -259 -165 -328 -351 -41 -109 -46 -4365 -6 -4534 132 -554 862 -581 1000 -36 23 90 23 4460 0 4550 -76 297 -358 454 -666 371z M2125 4445 c-485 -100 -723 -223 -1037 -540 -245 -245 -338 -398 -452 -740 -219 -652 -94 -1396 311 -1852 46 -52 91 -105 99 -119 9 -13 66 -65 128 -116 295 -246 613 -393 943 -438 45 -6 112 -17 150 -25 103 -22 324 -19 463 5 63 12 153 28 200 36 766 137 1266 828 868 1200 -185 173 -405 157 -681 -48 -184 -137 -210 -151 -367 -204 -503 -170 -1103 189 -1182 706 -5 36 -16 102 -24 148 -41 249 136 680 339 823 406 286 884 272 1252 -37 290 -244 676 -128 770 231 147 567 -919 1148 -1780 970z M8460 4464 c-36 -7 -103 -19 -150 -25 -91 -12 -407 -112 -494 -156 -129 -66 -499 -343 -532 -399 -6 -11 -42 -55 -79 -99 -429 -503 -572 -1318 -336 -1911 86 -219 195 -419 289 -532 31 -38 78 -96 104 -130 27 -34 76 -83 110 -110 33 -26 95 -75 137 -110 521 -432 1453 -504 2071 -160 1479 825 1219 3159 -397 3572 -283 73 -560 96 -723 60z m423 -999 c75 -19 211 -88 326 -165 370 -248 476 -916 208 -1315 -457 -679 -1424 -500 -1628 302 -176 689 438 1349 1094 1178z M14940 4464 c-36 -7 -103 -19 -150 -25 -248 -33 -455 -137 -665 -334 -169 -159 -170 -159 -345 12 -176 172 -279 233 -485 290 -166 46 -660 43 -790 -6 -164 -60 -274 -124 -384 -221 -145 -128 -166 -128 -235 -1 -213 388 -797 302 -911 -134 -23 -89 -23 -2930 0 -3020 95 -368 575 -518 841 -264 148 142 144 114 144 1134 0 920 5 998 81 1200 165 442 803 510 1016 109 102 -194 97 -136 103 -1204 5 -965 5 -965 27 -1024 183 -481 916 -433 973 64 5 47 15 101 22 120 9 26 14 263 18 940 5 905 5 905 31 975 152 410 629 539 935 252 186 -173 188 -189 194 -1342 5 -980 5 -980 28 -1037 169 -418 775 -418 944 0 39 97 41 2271 2 2435 -92 387 -272 671 -547 865 -212 150 -645 260 -847 216z M22565 4445 c-282 -58 -363 -84 -555 -180 -506 -253 -953 -845 -1009 -1339 -6 -44 -17 -110 -25 -146 -60 -251 31 -828 177 -1115 199 -393 460 -651 865 -854 141 -71 383 -156 468 -166 33 -3 103 -15 156 -26 302 -60 757 21 1108 196 1042 522 1348 1936 628 2907 -416 563 -1157 859 -1813 723z m590 -997 c396 -142 605 -458 605 -913 0 -803 -753 -1231 -1403 -798 -576 383 -505 1340 123 1662 174 90 496 113 675 49z M28340 4464 c-35 -7 -101 -19 -145 -24 -484 -66 -963 -375 -1258 -815 -156 -233 -278 -547 -298 -765 -5 -58 -16 -132 -24 -165 -21 -87 -19 -270 5 -375 11 -47 20 -101 20 -120 2 -368 398 -997 793 -1261 386 -258 945 -393 1324 -320 54 10 124 22 157 26 709 84 1433 881 1486 1640 5 66 14 136 19 155 6 19 11 64 11 100 0 36 -5 81 -11 100 -5 19 -14 89 -19 155 -33 469 -342 1002 -764 1317 -216 162 -535 294 -793 328 -45 6 -112 17 -150 25 -85 18 -267 18 -353 -1z m455 -1016 c875 -312 832 -1609 -60 -1855 -748 -206 -1382 660 -1017 1392 121 243 374 442 622 489 84 16 386 -2 455 -26z M6060 4425 c-214 -48 -298 -92 -455 -240 -164 -154 -183 -157 -249 -36 -238 434 -814 353 -931 -130 -41 -171 -35 -2904 7 -3017 184 -495 793 -495 976 0 27 73 27 73 32 918 5 845 5 845 49 970 126 362 303 489 706 509 311 16 439 111 521 388 118 400 -226 735 -656 638z" fill="#f6ede4"/></svg>

package/plugin/branding/logo-surface-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="81.25 269.75 1022.75 237.5" role="img" aria-label="crombolo"><circle cx="200" cy="388.5" r="116.75" fill="#cb6f48"/><path transform="matrix(0.025 0 0 -0.025 75 516)" d="M4285 8205 c-459 -94 -647 -159 -1014 -349 -249 -130 -544 -347 -669 -494 -26 -30 -82 -96 -125 -145 -218 -254 -207 -378 24 -266 295 143 924 329 1113 329 19 0 78 9 131 20 128 26 792 30 910 5 39 -8 108 -20 155 -25 378 -43 1093 -273 1364 -438 45 -27 114 -66 153 -86 91 -45 440 -278 525 -349 35 -29 91 -74 124 -100 651 -496 1244 -1578 1303 -2379 13 -165 47 -197 125 -115 86 90 236 513 236 663 0 23 9 86 20 139 25 122 27 345 4 450 -8 39 -19 111 -24 162 -50 500 -394 1231 -774 1648 -50 55 -116 130 -145 167 -30 37 -81 89 -115 115 -33 26 -114 96 -178 155 -117 106 -442 334 -560 394 -29 14 -100 55 -158 89 -97 59 -240 123 -516 231 -122 47 -541 156 -671 174 -45 6 -112 17 -150 25 -152 32 -900 19 -1088 -20z M3300 6458 c-58 -11 -142 -26 -186 -34 -80 -14 -243 -58 -414 -111 -742 -234 -1299 -909 -1300 -1575 0 -312 82 -391 218 -208 298 402 1010 790 1450 790 17 0 74 9 127 20 79 16 136 20 305 20 168 0 228 -4 310 -20 56 -11 124 -20 152 -20 406 0 1286 -389 1680 -742 56 -52 133 -117 171 -147 37 -29 88 -81 114 -115 26 -33 75 -92 108 -131 303 -346 645 -1054 645 -1336 0 -14 9 -68 20 -120 23 -111 27 -371 8 -505 -22 -155 37 -185 183 -93 657 414 699 1621 89 2594 -137 218 -431 585 -518 647 -11 7 -75 66 -144 130 -138 130 -157 146 -338 273 -329 233 -595 368 -985 501 -208 72 -585 164 -670 164 -18 0 -79 9 -135 20 -147 29 -730 28 -890 -2z M2909 4331 c-921 -186 -1424 -895 -1087 -1533 105 -199 210 -222 296 -65 284 517 979 758 1655 572 241 -66 501 -192 647 -314 25 -21 78 -64 119 -97 262 -210 502 -618 586 -998 64 -293 346 -107 440 291 45 189 45 192 -20 531 -50 262 -304 691 -560 947 -304 304 -848 601 -1190 650 -28 4 -90 16 -140 26 -153 32 -566 26 -746 -10z" fill="#fdebd4"/><path transform="matrix(0.025 0 0 -0.025 340 470)" d="M17231 5945 c-168 -47 -253 -129 -320 -310 -32 -87 -48 -4483 -16 -4609 116 -459 691 -531 916 -115 64 119 84 124 184 38 765 -661 1980 -322 2461 686 211 443 246 966 103 1527 -156 616 -774 1208 -1325 1273 -33 4 -103 16 -157 26 -288 56 -760 -83 -1009 -295 -193 -166 -188 -183 -188 699 0 837 0 835 -144 974 -117 112 -326 156 -505 106z m1804 -2497 c449 -160 700 -668 575 -1164 -177 -708 -937 -952 -1444 -465 -535 516 -283 1523 414 1655 84 16 386 -2 455 -26z M25519 5946 c-139 -37 -259 -165 -328 -351 -41 -109 -46 -4365 -6 -4534 132 -554 862 -581 1000 -36 23 90 23 4460 0 4550 -76 297 -358 454 -666 371z M2125 4445 c-485 -100 -723 -223 -1037 -540 -245 -245 -338 -398 -452 -740 -219 -652 -94 -1396 311 -1852 46 -52 91 -105 99 -119 9 -13 66 -65 128 -116 295 -246 613 -393 943 -438 45 -6 112 -17 150 -25 103 -22 324 -19 463 5 63 12 153 28 200 36 766 137 1266 828 868 1200 -185 173 -405 157 -681 -48 -184 -137 -210 -151 -367 -204 -503 -170 -1103 189 -1182 706 -5 36 -16 102 -24 148 -41 249 136 680 339 823 406 286 884 272 1252 -37 290 -244 676 -128 770 231 147 567 -919 1148 -1780 970z M8460 4464 c-36 -7 -103 -19 -150 -25 -91 -12 -407 -112 -494 -156 -129 -66 -499 -343 -532 -399 -6 -11 -42 -55 -79 -99 -429 -503 -572 -1318 -336 -1911 86 -219 195 -419 289 -532 31 -38 78 -96 104 -130 27 -34 76 -83 110 -110 33 -26 95 -75 137 -110 521 -432 1453 -504 2071 -160 1479 825 1219 3159 -397 3572 -283 73 -560 96 -723 60z m423 -999 c75 -19 211 -88 326 -165 370 -248 476 -916 208 -1315 -457 -679 -1424 -500 -1628 302 -176 689 438 1349 1094 1178z M14940 4464 c-36 -7 -103 -19 -150 -25 -248 -33 -455 -137 -665 -334 -169 -159 -170 -159 -345 12 -176 172 -279 233 -485 290 -166 46 -660 43 -790 -6 -164 -60 -274 -124 -384 -221 -145 -128 -166 -128 -235 -1 -213 388 -797 302 -911 -134 -23 -89 -23 -2930 0 -3020 95 -368 575 -518 841 -264 148 142 144 114 144 1134 0 920 5 998 81 1200 165 442 803 510 1016 109 102 -194 97 -136 103 -1204 5 -965 5 -965 27 -1024 183 -481 916 -433 973 64 5 47 15 101 22 120 9 26 14 263 18 940 5 905 5 905 31 975 152 410 629 539 935 252 186 -173 188 -189 194 -1342 5 -980 5 -980 28 -1037 169 -418 775 -418 944 0 39 97 41 2271 2 2435 -92 387 -272 671 -547 865 -212 150 -645 260 -847 216z M22565 4445 c-282 -58 -363 -84 -555 -180 -506 -253 -953 -845 -1009 -1339 -6 -44 -17 -110 -25 -146 -60 -251 31 -828 177 -1115 199 -393 460 -651 865 -854 141 -71 383 -156 468 -166 33 -3 103 -15 156 -26 302 -60 757 21 1108 196 1042 522 1348 1936 628 2907 -416 563 -1157 859 -1813 723z m590 -997 c396 -142 605 -458 605 -913 0 -803 -753 -1231 -1403 -798 -576 383 -505 1340 123 1662 174 90 496 113 675 49z M28340 4464 c-35 -7 -101 -19 -145 -24 -484 -66 -963 -375 -1258 -815 -156 -233 -278 -547 -298 -765 -5 -58 -16 -132 -24 -165 -21 -87 -19 -270 5 -375 11 -47 20 -101 20 -120 2 -368 398 -997 793 -1261 386 -258 945 -393 1324 -320 54 10 124 22 157 26 709 84 1433 881 1486 1640 5 66 14 136 19 155 6 19 11 64 11 100 0 36 -5 81 -11 100 -5 19 -14 89 -19 155 -33 469 -342 1002 -764 1317 -216 162 -535 294 -793 328 -45 6 -112 17 -150 25 -85 18 -267 18 -353 -1z m455 -1016 c875 -312 832 -1609 -60 -1855 -748 -206 -1382 660 -1017 1392 121 243 374 442 622 489 84 16 386 -2 455 -26z M6060 4425 c-214 -48 -298 -92 -455 -240 -164 -154 -183 -157 -249 -36 -238 434 -814 353 -931 -130 -41 -171 -35 -2904 7 -3017 184 -495 793 -495 976 0 27 73 27 73 32 918 5 845 5 845 49 970 126 362 303 489 706 509 311 16 439 111 521 388 118 400 -226 735 -656 638z" fill="#f6ede4"/></svg>

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/sign-in/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Sign-in Dialog",
   "id": "Crombolo.SignInDialog",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/src/graphics.ts

@@ -27,6 +27,13 @@ const GRAPHICS: Record<string, string> = {
   'logo-alternative': 'branding/logo-surface.svg',
   'login-logo': 'branding/logo-header.svg',
   'login-logo-alternative': 'branding/logo-surface.svg',
+  // The same marks with cream lettering, for the dark theme. The client asks
+  // for the plain names whatever the theme, so the plugin and the shells'
+  // early script swap these in (`branding.js`, `theme-early.ts`).
+  'logo-dark': 'branding/logo-header-dark.svg',
+  'logo-alternative-dark': 'branding/logo-surface-dark.svg',
+  'login-logo-dark': 'branding/logo-header-dark.svg',
+  'login-logo-alternative-dark': 'branding/logo-surface-dark.svg',
   'login-background': 'branding/backdrop.svg',
 }
 

package/src/theme-early.ts

@@ -3,7 +3,8 @@
  * (story 049). Umbraco's theme context keeps the choice in `localStorage` and
  * applies it once the client has booted, so a reload painted light first; and
  * the login shell boots no theme context at all. This inline script reads the
- * same key and links the same stylesheet at once.
+ * same key and links the same stylesheet at once, and on a dark theme points
+ * the sign-in screens' logos at their cream-lettered variants.
  */
 import type { BackOfficePaths } from './paths.ts'
 
@@ -27,6 +28,9 @@ export function themeStylesheets(paths: BackOfficePaths): Record<string, string>
   }
 }
 
+/** The sign-in screens' logos, which get their cream-lettered `-dark` variant on a dark theme. */
+const LOGO_PATTERN = String.raw`/\/graphics\/(login-logo|login-logo-alternative|logo|logo-alternative)$/`
+
 /** The inline script, as the shells embed it. It fails quietly: light is a fine fallback. */
 export function earlyThemeScript(paths: BackOfficePaths): string {
   const sheets = JSON.stringify(themeStylesheets(paths))
@@ -37,6 +41,19 @@ export function earlyThemeScript(paths: BackOfficePaths): string {
     var alias = localStorage.getItem(key);
     var renamed = ${renamed};
     if (alias && renamed[alias]) { alias = renamed[alias]; localStorage.setItem(key, alias); }
+    var dark = alias === ${JSON.stringify(THEME_DARK)} ||
+      (alias === ${JSON.stringify(THEME_SYSTEM)} && typeof matchMedia === 'function' &&
+        matchMedia('(prefers-color-scheme: dark)').matches);
+    if (dark) document.addEventListener('DOMContentLoaded', function () {
+      var named = ['logo-image', 'logo-image-alternative'];
+      var found = document.querySelectorAll('[logo-image], [logo-image-alternative]');
+      for (var i = 0; i < found.length; i++) {
+        for (var j = 0; j < named.length; j++) {
+          var value = found[i].getAttribute(named[j]);
+          if (value && ${LOGO_PATTERN}.test(value)) found[i].setAttribute(named[j], value + '-dark');
+        }
+      }
+    });
     var href = alias ? ${sheets}[alias] : undefined;
     if (!href) return;
     var link = document.createElement('link');