Help with switching profile photo when changing mode

[PkleinRNA]

Hi all,

I am trying to change my profile photo when changing mode from light to dark and vise and versa. After many iterations of writing my code, I'm stuck and this where I got to. I managed to create a toggle button (not sure it's what i wanted but it kind of work) which does make the profile photo change but it's disconnected to the change mode button in the header. So i mean that when I click on the mode switch button the profile photos stays the same, but when I click on the toggle button, profile photo changes but not the mode...

Sorry, I hope I'm clear. I am still quite new at html/CSS coding.

Can anyone help me with my code - thanks sooo much!

P

below is my code

---

layout: default

{% if site.title == 'blank' %} {{ site.first_name }} {{ site.middle_name }} {{ site.last_name }} {% else %} {{ site.title }} {% endif %}

{{ page.subtitle }}

{% if page.profile %}

    <!-- Dark theme image if it exists -->
    {% unless page.profile.image_dark == "No" %}
      <img src="{{ site.baseurl }}/assets/img/{{ page.profile.image_dark }}" alt="Profile Dark" class="profile-img-dark" style="{{ page.profile.image_style }}">
    {% endunless %}
    
    {% if page.profile.more_info %}
      <div class="more-info">{{ page.profile.more_info | markdownify }}</div>
    {% endif %}
  </div>
{% endif %}

<div class="clearfix">{{ content }}</div>

<!-- News -->
{% if page.news and site.announcements.enabled %}
  <h2>
    <a href="{{ '/news/' | relative_url }}" style="color: inherit">news</a>
  </h2>
  {% include news.liquid limit=true %}
{% endif %}

<!-- Latest posts -->
{% if site.latest_posts.enabled %}
  <h2>
    <a href="{{ '/blog/' | relative_url }}" style="color: inherit">latest posts</a>
  </h2>
  {% include latest_posts.liquid %}
{% endif %}

<!-- Selected papers -->
{% if page.selected_papers %}
  <h2>
    <a href="{{ '/publications/' | relative_url }}" style="color: inherit">selected publications</a>
  </h2>
  {% include selected_papers.liquid %}
{% endif %}

<!-- Social -->
{% if page.social %}
  <div class="social">
    <div class="contact-icons">{% include social.liquid %}</div>
    <div class="contact-note">{{ site.contact_note }}</div>
  </div>
{% endif %}

{% if site.newsletter.enabled and site.footer_fixed %}
  {% include scripts/newsletter.liquid center=true %}
{% endif %}

<style> /* Default to light theme */ .profile-img-dark { display: none; } body.dark-mode .profile-img-light { display: none; } body.dark-mode .profile-img-dark { display: block; } .profile-img-light, .profile-img-dark { max-width: 100%; height: auto; } </style>

Toggle Theme

<script> document.addEventListener('DOMContentLoaded', function () { function applyTheme() { let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.body.classList.toggle('dark-mode', theme === 'dark'); switchProfileImage(theme); updateToggleButtonText(theme); } function switchProfileImage(theme) { const profileImageLight = document.querySelector('.profile-img-light'); const profileImageDark = document.querySelector('.profile-img-dark'); if (theme === 'dark') { profileImageLight.style.display = 'none'; profileImageDark.style.display = 'block'; } else { profileImageLight.style.display = 'block'; profileImageDark.style.display = 'none'; } } function toggleTheme() { let theme = localStorage.getItem('theme') || 'light'; theme = theme === 'light' ? 'dark' : 'light'; localStorage.setItem('theme', theme); applyTheme(); } function updateToggleButtonText(theme) { const toggleButton = document.getElementById('theme-toggle'); toggleButton.textContent = theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'; } // Set the initial state of the toggle button based on the theme function setInitialToggleButton() { let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); updateToggleButtonText(theme); } // Update theme and button text on system preference change window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { let newColorScheme = e.matches ? 'dark' : 'light'; localStorage.setItem('theme', newColorScheme); applyTheme(); }); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); applyTheme(); setInitialToggleButton(); }); </script>

[george-gca]

Maybe this solution can work out for you.