Night Mode - Icon Change

Help
1

So within my code I have the following which is working well and my background is changing accordingly…

if (localStorage.getItem("mode") === "night") {
  document.documentElement.setAttribute("night", "");
  document.documentElement.classList.add('night_mode');
}

So in my header I want to change the icon between a night mode icon and standard although am struggling to work it out - I have the following:

{% if html.classList.contains('night_mode') %}
<img class="logo__image" src="{{ site.baseurl }}{{ site.data.settings.logo_night }}" alt="{{ site.data.settings.title }}">
{% else %}
<img class="logo__image" src="{{ site.baseurl }}{{ site.data.settings.logo }}" alt="{{ site.data.settings.title }}">
{% endif %}

I know the problem is here in this line of code “{% if html.classList.contains(‘night_mode’) %}” - if anyone could point me in the right direction it would be appreciated…

2

you need to do it with javascript not liquid. Jekyll/liquid only runs once at build time so you would get the value that one time only and thats it.