我将在下面包括我的代码以及到我的代码本的链接。我到处乱搞，试图学习HTML/CSS，我试图将黑暗模式纳入网站。我很难让图标从太阳变成月亮，反之亦然，当图标被点击时，太阳指示您将切换到亮模式，月亮指示您将在点击时切换到暗月亮。

我也有问题，第一段文字坐在屏幕低在加载，而不是集中在您的屏幕上-如果有人有一个想法如何解决这个问题，它将非常感谢！（在全屏时，它比水平占据屏幕一半时要低得多）

感谢您提供的任何帮助:)

codepen:https://codepen.io/stuartgroom/pen/rwgypyr

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");

    var themeIcon = document.getElementById('themeIcon');
    if(document.classList.contains("fas fa-sun")){
        themeIcon.addClass("fas fa-moon").removeClass("fas fa-sun");
        
    }
    else{
        themeIcon.addClass("fas fa-sun").removeClass("fas fa-moon");
    }

}

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");

    var themeIcon = document.getElementById('themeIcon');
    if(document.classList.contains("fas fa-sun")){
        themeIcon.addClass("fas fa-moon").removeClass("fas fa-sun");
        
    }
    else{
        themeIcon.addClass("fas fa-sun").removeClass("fas fa-moon");
    }

}

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");

    var themeIcon = document.getElementById('themeIcon');
    if(document.classList.contains("fas fa-sun")){
        themeIcon.addClass("fas fa-moon").removeClass("fas fa-sun");
        
    }
    else{
        themeIcon.addClass("fas fa-sun").removeClass("fas fa-moon");
    }

}

顺晟科技：

在您的if条件中，您有替代，导致它找不到正确的值。另外，AddClass/RemoveClass不是真正的函数（可能来自某个库），所以我用standard和

function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");

    var themeIcon = document.getElementById('themeIcon');
    if(document.classList.contains("fas fa-sun")){
        themeIcon.addClass("fas fa-moon").removeClass("fas fa-sun");
        
    }
    else{
        themeIcon.addClass("fas fa-sun").removeClass("fas fa-moon");
    }

}

https://codepen.io/jacekwyroba/pen/zyzjagb