Dark mode, light mode related

high8skyNov 7, 2020

When the toggle between dark mode and light mode is entered, the detection of dark mode input to the body is ignored.

Is it difficult to detect the user system and automatically change the toggle if the user is a dark mode setting system?

<body class="stretched adaptive-color-scheme">

<script>
		jQuery(window).on( 'load', function(){
		    var swiper = new Swiper('.swiper-scroller', {
		    	slidesPerView: 'auto',
		    	spaceBetween: 50,
				freeMode: true,
				grabCursor: true,
				navigation: {
				    nextEl: '.slider-arrow-right-1',
				    prevEl: '.slider-arrow-left-1',
				},
				scrollbar: {
				el: '.swiper-scrollbar',
				},
				mousewheel: true,
				breakpoints: {
			        768: {
			          spaceBetween: 20,
			        },
			        576: {
			          spaceBetween: 15,
			        }
			      }
		    });
		});

		jQuery(document).ready( function($){
			function modeSwitcher( elementCheck, elementParent ) {
				if( elementCheck.filter(':checked').length > 0 ) {
					elementParent.addClass('dark');
					$('.mode-switcher').toggleClass('pts-switch-active');
				} else {
					elementParent.removeClass('dark');
					$('.mode-switcher').toggleClass('pts-switch-active', false);
				}
			}

			$('.pts-switcher').each( function(){
				var element = $(this),
					elementCheck = element.find(':checkbox'),
					elementParent = $('body');

				modeSwitcher( elementCheck, elementParent );

				elementCheck.on( 'change', function(){
					modeSwitcher( elementCheck, elementParent );
				});
			});
		});
	</script>

SemiColonWebSTAFFNov 8, 2020

Hello,

This Functionality is not included by default and requires JS Customization. You can consider using the following JS Code to make your Customizations:

if( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
	//Dark Mode active
}

if( window.matchMedia ) {
	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
		e.matches ? console.log( 'Dark Mode Active' ) : console.log( 'Dark Mode not Active' );
	});
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.