Display logo using data uri as CSS background-image

This commit is contained in:
Miraty 2021-12-06 20:10:45 +01:00
parent 51b3b58c3a
commit be39fff8b2
3 changed files with 26 additions and 2 deletions

View File

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

View File

@ -2,6 +2,16 @@
@light: ~"(prefers-color-scheme: light)"; @light: ~"(prefers-color-scheme: light)";
@dark: ~"(prefers-color-scheme: dark)"; @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; font-family: system-ui, sans-serif;
@ -123,9 +133,19 @@ header {
justify-content: center; justify-content: center;
} }
#logo { #linkTitles::before {
width: 64px; width: 64px;
height: 64px; height: 64px;
content: "";
background-repeat: no-repeat;
@media @light {
background-image: var(--logo-light);
}
@media @dark {
background-image: var(--logo-dark);
}
} }
#titles { #titles {

5
themes/libreqr/logo.less Normal file
View File

@ -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");
}