<meta name="viewport" content="width=device-width, initial-

scale=1.0">
</head>
<body class="container">
<header id="main-header">
<h3>onclick event</h3>
<p>when you click the night mode button the theme changes to a darker 

mode </p>
</header>

<main id="main">
<p> Maecenas sem diam, hendrerit nec urna et, cursus sagittis dolor. 

Etiam posuere condimentum porttitor. Aenean lacinia libero quis 

commodo viverra. Aliquam id rutrum nibh, a tristique lacus. 

Praesent a dapibus risus. Nullam vel auctor lorem, vitae 

condimentum massa. Vestibulum lorem mauris, auctor eget lorem 

in, posuere ultrices nulla. Aenean non lacus ornare, mollis augue 

eget, faucibus sem. Morbi eget neque id augue fermentum sagittis 

quis nec lectus. Curabitur auctor tristique fringilla.</p>
<p class="none">Lorem ipsum dolor sit amet, consectetur adipiscing 

elit. Praesent egestas justo in tortor mattis cursus. Vestibulum 

dignissim ut ante vel porta. Mauris malesuada lectus in tristique 

interdum. Curabitur vitae dapibus leo. Vestibulum eu quam ut odio 

aliquam sagittis. Vivamus metus justo, fermentum nec tincidunt 

eget, fermentum quis arcu. Nunc mattis ac leo quis convallis. Duis 

facilisis massa nec libero porttitor tempor.</p>
<p class="none">Proin nisi ante, pulvinar sit amet tortor in, feugiat 

auctor justo. Mauris gravida ultrices lacus quis blandit. Phasellus 

vitae nisl quis lectus dapibus ullamcorper. Aenean dapibus justo non 

mauris volutpat dapibus. Maecenas sem diam, hendrerit nec urna 

et, cursus sagittis dolor. Etiam posuere condimentum porttitor. 

Aenean lacinia libero quis commodo viverra. Aliquam id rutrum 

nibh, a tristique lacus. Praesent a dapibus risus. Nullam vel auctor 

lorem, vitae condimentum massa. Vestibulum lorem mauris, auctor 

eget lorem in, posuere ultrices nulla. Aenean non lacus ornare, 

mollis augue eget, faucibus sem. Morbi eget neque id augue 

fermentum sagittis quis nec lectus. Curabitur auctor tristique 

fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent 

egestas justo in tortor mattis cursus. Vestibulum dignissim ut ante vel 

porta. Mauris malesuada lectus in tristique interdum. Curabitur 

vitae dapibus leo. Vestibulum eu quam ut odio aliquam sagittis. 

Vivamus metus justo, fermentum nec tincidunt eget, fermentum quis 

arcu. Nunc mattis ac leo quis convallis. Duis facilisis massa nec 

libero porttitor tempor.</p>
<p class="none">Proin nisi ante, pulvinar sit amet tortor in, feugiat 

auctor justo. Mauris gravida ultrices lacus quis blandit. Phasellus 

vitae nisl quis lectus dapibus ullamcorper. Aenean dapibus justo non 

mauris volutpat dapibus. Maecenas sem diam, hendrerit nec urna 

et, cursus sagittis dolor. Etiam posuere condimentum porttitor. 

Aenean lacinia libero quis commodo viverra. Aliquam id rutrum 

nibh, a tristique lacus. Praesent a dapibus risus. Nullam vel auctor 

lorem, vitae condimentum massa. Vestibulum lorem mauris, auctor 

eget lorem in, posuere ultrices nulla. Aenean non lacus ornare, 

mollis augue eget, faucibus sem. Morbi eget neque id augue 

fermentum sagittis quis nec lectus. Curabitur auctor tristique 

fringilla.</p>
</main>
<button id="btn" name="btn">night mode</button>
<script>

</script>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.container {
max-width:900px;
margin:auto;
}
#main-header {
background:steelblue;
color:#fff;
padding:1em 2em;
text-align:center;
}
#main-header h3  {
text-transform:uppercase;
}
#main {
background:#f4f4f4;
padding:1em;
}
button {
border:none;
background:brown;
color:#fff;
font-weight:bold;
padding:0.5em 1em;
display:block;
margin-top:1em;
transition:1s opacity;
border-radius:50px;
}
button:hover {
outline:none;
opacity:0.8;
}
button:focus {
outline:none;
}
@media screen and (max-width:500px){
body {
height:100vh;
overflow:hidden;
}
.none {
display:none;
}
button {
position:absolute;
bottom:20px;
right:20px;
z-index:1;
}


}
let btn = document.getElementById("btn");
btn.onclick = () => {
let mainHeader = document.getElementById("main-header");
mainHeader.style.background = "#f4f4f4";
mainHeader.style.color = "#111";
let main = document.querySelector("#main");
main.style.background = "#333";
main.style.color = "#eee";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.