<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.