🏡

Een dark mode optie maken met een popup?

Laatste update: 30/07/2021
14:03

Leestijd: < 1 minuut

Is het mogelijk om een darm mode optie te maken via een pop-up? Laat ik dat eens proberen.

Stap 1: sla de header en pagina op als template

Om een exacte kopie te krijgen van de pagina en header moet je deze als template opslaan.

Stap 2: maak een pop-up aan en voeg de templates toe

				
					.woocommerce .widget_price_filter .ui-slider .ui-slider-range {

background-color: #fff;

}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {

background-color: #fff;

}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {

background-color: #000;

}

				
					<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });

</script>
<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

Een dark mode optie maken met een popup?

Long Read

Devoked

Ontdek de ervaring