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

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>

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>

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