Comment to 'How to make logo change color depending on website background on Artificer template?'
Comment to How to make logo change color depending on website background on Artificer template?

  • 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>