<html>
<body>
<header class="header-box">
<button class="night-mode-button">Night Mode</button>
</header>
<main class="content-box">
<div class="content-inner">
<h1>Hello there, I'm a Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum nobis cumque recusandae quos, dolores ullam, repellat iusto doloribus maiores voluptate ut velit eligendi sequi, aliquam quas quam quaerat. Dignissimos est dolores unde non
quibusdam eos eius deleniti nam alias.</p>
<img alt="Sample Colorful Image" class="image" src="https://i2.imgpile.com/i/QeH9i.jpg" />
<p>Eius aliquam pariatur praesentium consectetur rerum nam dolor sed maxime laboriosam officiis soluta totam eos fugit velit, itaque rem quos nesciunt porro, deleniti. Atque accusamus incidunt minus excepturi iusto ipsam aliquam sit laboriosam, corporis
beatae aliquid non nulla, sunt minima!</p>
</div>
</main>
</body>
</html>.header-box {
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 1em;
text-align: center;
background: #dd5678;
color: #fff;
z-index: 2;
> .night-mode-button {
display: inline-block;
padding: .5em;
text-decoration: none;
color: white;
background: red;
border: none;
border-radius: .5em;
cursor: pointer;
}
}
.content-box {
position: relative;
padding: 5em 0 1em;
z-index: 1;
color: darkBlue;
background: lightYellow;
}
.content-inner {
& {
min-width: 17.5em;
width: 50%;
margin: 0 auto;
padding: 1em;
border: solid;
}
> .image {
width: 100%;
}
}
/**
* Wonderful CSS filter trick by Leo Nikkilä
* @link https://lnikki.la/articles/night-mode-css-filter/
*/
.content-box.-nightmode {
& {
// Ensures that night mode colors are black and white
background: #000 !important;
color: #333 !important;
}
.content-inner {
&, img, video {
-webkit-filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
}
}$(document).ready(function(){
var button = $('.night-mode-button');
var container = $('.content-box');
button.click(function() {
container.toggleClass('-nightmode');
});
});
External CSS
This Pen doesn't use any external CSS resources.