How To Make A Dark-Light Portfolio Website Using WordPress 2024

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var darkMode = true

$(document).ready(function(){
  $(".dark-button").click(function(){
    darkMode = false
    $(".dark-version").addClass("hide");
    $(".light-version").addClass("show");
    autoHighlight()
  });
  $(".light-button").click(function(){
    darkMode = true
    $(".dark-version").removeClass("hide");
    $(".light-version").removeClass("show");
    autoHighlight()
  });
});

var className = 'menu-highlight',
    $ = jQuery,
    clickLock = false

$(document).ready(function(){

autoHighlight()

$('.' + className + ' .elementor-icon-list-item, .' + className + ' .elementor-grid-item').on('click', function(){
    $('.' + className + ' .elementor-icon-list-item, .' + className + ' .elementor-grid-item').removeClass('active')
    $(this).addClass('active')
    clickLock = true
    setTimeout(function(){
        clickLock = false
    },600)
})
})

function autoHighlight(){
    
    if( clickLock ) return
    
    var ids = [],
        id,
        darkClass = darkMode ? 'dark-version' : 'light-version',
        targetContainer = $('.main-wrapper').length ? '.main-wrapper.' + darkClass + ' > .e-con, .main-wrapper.' + darkClass + ' > .e-container, .main-wrapper.' + darkClass + ' > .e-con-inner > .e-con, .main-wrapper > .e-con-inner > .e-container' : '.elementor-top-section, [data-elementor-type="wp-page"] > .e-con, [data-elementor-type="wp-page"] > .e-container'
    
    $(targetContainer).each(function(){
        if($(window).scrollTop() + $(window).height() - 350 > $(this).offset().top){
            ids.push($(this).attr('id'))
        }
    })
    
    ids = ids.filter(element => {
      return element !== undefined
    })
    
    id = ids[ids.length - 1]
    
    $('.' + className + ' .elementor-icon-list-item, .' + className + ' .elementor-grid-item').removeClass('active')
    $('[href="#'+id+'"]').parent().addClass('active')  
}

$(window).on('load scroll', autoHighlight)


</script>