This part is the darkmode code, first part of determines, that the website choses darrkmode, if the user has darkmode activated in their OS. (I put this part in Custom HTML at bottom)
<!-- Darkmode Code -->
<script>if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches){jQuery("body").addClass("dark-mode-on");}
window.laytheme.on("newpage", function(layoutObj, type, obj){
});
window.laytheme.on("newpage", function(layoutObj, type, obj){
jQuery( "li#menu-item-3845" ).html( '<div class="dark-mode-wrapper"><svg xmlns="http://www.w3.org/2000/svg" id="darkmode" fill="currentColor" stroke="currentColor" stroke-width="1.2" viewBox="0 0 14.5 14.5"><defs><style>.cls-3{fill:none;}.cls-4{stroke:none}svg#darkmode {overflow: hidden;}</style></defs><title>DARKMODE</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-3" cx="7.25" cy="7.25" r="6.75"/><path class="cls-4" d="M14,7.25a6.71,6.71,0,0,0-2.22-5L2.26,11.78A6.74,6.74,0,0,0,14,7.25Z"/></g></g></svg</div>');
});
jQuery(document).on("click", ".dark-mode-wrapper", function(event) {
jQuery("body").toggleClass("dark-mode-on");
});
</script>
Now you need to adjust your CSS classes like this:
.dark-mode-on {background-color: #000!important}
Go through everything until you have a complete darkmode. The darkmode button can be placed by giving a text or image the class:
dark-mode-wrapper
