Display logo using data uri as CSS background-image

index.php

@@ -93,7 +93,6 @@ if (
 
       <header>
         <a id="linkTitles" href="./">
-          <img alt="" id="logo" src="themes/<?php echo $theme; ?>/icons/128.png">
           <div id="titles">
             <h1>LibreQR</h1>
             <h2><?= $loc['subtitle'] ?></h2>

style.less

@@ -2,6 +2,16 @@
 
 @light: ~"(prefers-color-scheme: light)";
 @dark: ~"(prefers-color-scheme: dark)";
+@import "themes/@{theme}/logo.less";
+
+:root {
+  @media @light {
+    color-scheme: light;
+  }
+  @media @dark {
+    color-scheme: dark;
+  }
+}
 
 * {
   font-family: system-ui, sans-serif;
@@ -123,9 +133,19 @@ header {
   justify-content: center;
 }
 
-#logo {
+#linkTitles::before {
   width: 64px;
   height: 64px;
+  content: "";
+
+  background-repeat: no-repeat;
+  @media @light {
+    background-image: var(--logo-light);
+  }
+
+  @media @dark {
+    background-image: var(--logo-dark);
+  }
 }
 
 #titles {

themes/libreqr/logo.less

@@ -0,0 +1,5 @@
+
+:root {
+  --logo-light: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///yoqKtTIFbYAAABYSURBVCjPjc7REcAwCAJQNmD/LdmAom0/w8X8vOSIClwUbchWBUgIHRyoI8ffryMy8J9+wu49YwuY5D4UwHE2q+BcJnzGLEaxI2mlawXfeEVouMPbteKiHlkfx+1zKaUYAAAAAElFTkSuQmCC");
+  --logo-dark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///yoqKtTIFbYAAABeSURBVCjPjdKxEcAgDENRbeD9t9QGipyQMv8CBa8wWBwoZwhgKSMNInYmDC+GEUdn1yfa8O3+hQ2+RxLcyk1G6HR7DqLLJiNsMI8Zrb5bEvyUI3q9ljL6cHEQP/7GBYz0NiTridwiAAAAAElFTkSuQmCC");
+}