How to dynamically change an image on a page depending on dark mode
CSSYou could include the following Javascript on your blade at the end, to change the image depending on the mode:
@push('final-javascript')
<script>
const lightImg = document.getElementById('xLogo');
let darkModeMediaQuery2 = window.matchMedia('(prefers-color-scheme: dark)')
let isSystemDarkMode = darkModeMediaQuery2.matches
let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
if (isDarkMode) {
lightImg.src = '{{ asset('/img/x-logo-white.png') }}';
} else {
lightImg.src = '{{ asset('/img/x-logo-black.png') }}';
}
</script>
@endpush
</x-guest-layout>