Creating and Calling Functions not working

JavaScript
1

I am trying to make a dark/light mode button in my project, but it is not working. Can anyone help me on the functions or how to call them? Thanks!

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">

        <title>HTML CSS JavaScript Cheatsheet</title>

        <!-- Load external CSS styles -->
        <link rel="stylesheet" href="styles.css">

    </head>

    <header>
        <div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" class="html logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg" class="css logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Javascript-shield.svg" class="js logo">
        </div>
        <nav>
            <ul>
                <li><a href="#html">HTML</a></li>
                <li><a href="#css">CSS</a></li>
                <li><a href="#js">JavaScript</a></li>
            </ul>
        </nav>
        <button onclick="darkFull()">Toggle light/ dark mode</button>
    </header>

    <body>
        <section role="region" aria-labelledby="html">
        <h1>HTML Cheatsheet</h1>
        <hr>
        <h1 class="head">HEADINGS</h1>
        <code>&lt;h1&gt;Heading 1&lt;/h1&gt;</code>
        <code>&lt;h2&gt;Heading 2&lt;/h2&gt;</code>
        <code>&lt;h3&gt;Heading 3&lt;/h3&gt;</code>
        <code>&lt;h4&gt;Heading 4&lt;/h4&gt;</code>
        <code>&lt;h5&gt;Heading 5&lt;/h5&gt;</code>
        <code class="last">&lt;h6&gt;Heading 6&lt;/h6&gt;</code>
        </section>
        
        <!-- Load external JavaScript -->
        <script src="scripts.js"></script>
        
    </body>

</html>

/* Place your CSS styles in this file */

*:not(code){
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

header > nav > ul > li {
    justify-content: center;
    display: block;
    text-align: right;
    font-size: large;
    margin: 0 0.2rem;
    padding: 0.2rem;
}

header {
    background-color: #def;
    color: #000;
    text-align: right;
    display: flex;
    justify-content: space-between;
}

.logo {
    height: 100px;
    width: 100px;
    
}

header > nav > ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
}

code  {
    font-size: 50px;
    border: solid 5px #000;
    border-style: solid solid none solid;
}

.last {
    border-style: solid;
}

.head {
    font-size: 75px;
    margin: 0;
}

.dark-mode {
    background-color: #000;
    color: #fff;
}

body {
    background-color: #fff;
    color: #000
}

.dark-header {
    background-color: #225;
    color:  #ff0;
}

/* Place your JavaScript in this file */

function darkFull() {
    darkMode();
    darkHeader();
}

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

function darkHeader() {
    var element = document.header;
    element.classList.toggle("darkHeader")
}
2

please describe what issue you are having and how to reproduce it

3

  1. There is no header property on the document object. Use a selector to get the element.

  2. You do not have a darkHeader class in the CSS. You have dark-header