How to dynamically change an image on a page depending on dark mode

You 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>
lang-php

Navigation