How to make logo change color depending on website background on Artificer template? Previously, in the Protean template, you could upload two logos for black and white backgrounds, but what about now in Artificer.
It works only when you change system color scheme.
To make it work with theme switcher in UNA, it will need some adjustments + it needs to be inline SVG, but UNA doesn't support inline SVG for logo, unless you do it in your custom template:
To make inline SVG logo for UNA site which depends on light/dark switcher in UNA you need to insert the following code in Studio > Designer > Injections > HEAD injection:
Yes, it's true, it's not easy to have a logo that stands out well on light and dark. You have to be in between.
Actually you can use SVG logo which has build-in styles for dark and light schemes, for example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> .circle { fill: black; } @media (prefers-color-scheme: dark) { .circle { fill: white; } } </style> <circle class="circle" cx="50" cy="50" r="40" /> </svg>@Alex T⚜️ , your sample logo code doesn't change the color on the site when changing the scheme from black to white.
I've just checked it, and it works fine:
It works only when you change system color scheme.
To make it work with theme switcher in UNA, it will need some adjustments + it needs to be inline SVG, but UNA doesn't support inline SVG for logo, unless you do it in your custom template:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> .circle { fill: black; } html.dark .circle { fill: white; } @media (prefers-color-scheme: dark) { .circle { fill: white; } } </style> <circle class="circle" cx="50" cy="50" r="40" /> </svg>@Alex T⚜️ This is not done in the SVG file itself? And then what do we insert into Artificer> Logo> Logo Images ?
To make inline SVG logo for UNA site which depends on light/dark switcher in UNA you need to insert the following code in Studio > Designer > Injections > HEAD injection:
<style> .circle { fill: black; } html.dark .circle { fill: white; } </style> <script> $(document).ready(function () { $('#bx-logo-container a').html('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="h-16"><circle class="circle" cx="50" cy="50" r="40" /></svg>'); }); </script>#tipsandtricks