<div class="toggle">
	<div class="sun"></div>
	<div class="moon"></div>
	<div class="toggle-overlay"></div>
</div>

<h1 class="click">Click Sun or Moon</h1>

<footer>
	Made  by <a href="https://codepen.io/JamesCZ" target="_blank">Jakub Pradeniak</a>
	&bull;
	<a href="https://www.linkedin.com/in/jakub-pradeniak/" target="_blank"><i class="fab fa-linkedin"></i></a>
	<a href="https://www.facebook.com/jakub.pradeniak" target="_blank"><i class="fab fa-facebook-square"></i></a>
</footer>
// Day/Night mode toggle
.toggle
	position: fixed
	top: -75px
	left: -75px
	width: 150px
	height: 150px
	border: none
	border-radius: 50%	
	z-index: 498
	// overlay for onclick event
	.toggle-overlay
		position: absolute
		top: 0
		left: 0
		width: 150px
		height: 150px
		border: none
		border-radius: 50%
		z-index: 500
		cursor: pointer
		transition: .3s linear
		&:hover
			box-shadow: 0 0 10px
	.sun, .moon
		width: 40px
		height:	40px
		border-radius: 50%
		z-index: 499
	.sun
		background: radial-gradient(#f9ca24, #f6e58d)
		box-shadow: 0 0 10px 2px #fbc531
		position: absolute
		top: 85px
		left: 85px
	.moon
		background: #dedede
		box-shadow: 0 0 10px 2px #eeeeee
		position: absolute
		top: 25px
		left: 25px
		transform: rotate(160deg)
		&::before
			content: ""
			display: block
			position: absolute
			top: 1px
			left: 1px
			width: 30px
			height:	30px
			border-radius: 50%
			background: rgba(32,32,64,.9)

.toggle.day
	animation: rotateDay .45s linear 0s 1 forwards
	
.toggle.night	
	animation: rotateNight .45s linear 0s 1 forwards
	.toggle-overlay
		&:hover
			box-shadow: 0 0 10px #d4d7dd

// Body Day/Night mode
body
	width: 100%
	transition: all .35s linear
	margin: 0
	padding: 0
	position: static
	// day	
	&::before
		opacity: 1
		background: linear-gradient(to top, #6bc5d2, #cbf1f5 35%)
	// night
	&::after
		opacity: 0
		background: linear-gradient(to top, #202060, #0f0f21 35%)
	&::before,	&::after
		content: ""
		display: block
		position: absolute
		top: 0
		left: 0
		bottom: 0
		right: 0
		z-index: -1

body.day
	&::after
		animation: opacityOff .35s linear 0s 1 forwards
	
body.night
	color: #f7f7f7
	&::after
		animation: opacityOn .35s linear 0s 1 forwards

// animations
@keyframes rotateNight
	0%
		transform: rotate(0deg)
	100%		
		transform: rotate(180deg)

@keyframes rotateDay
	0%		
		transform: rotate(180deg)
	100%
		transform: rotate(360deg)

@keyframes opacityOn
	0%		
		opacity: 0
	100%
		opacity: 1

@keyframes opacityOff
	0%		
		opacity: 1
	100%
		opacity: 0

// Header
h1
	text-align: center

// Basic styling
html
	font-family: arial
	font-size: 15px
	line-height: 1.15
	color: #0C0C0C
	box-sizing: border-box

*
	font-family: inherit
	font-size: inherit
	color: inherit
	box-sizing: inherit

// Footer
footer
	position: fixed
	bottom: 0
	width: 100%
	text-align: center
	padding: .5rem 0 .7rem 0
	color: #F9F9F9
	background: #2D303A
	z-index: 999
View Compiled
$('.toggle-overlay').on('click', function () {	
	let $t = $('.toggle');
	let $b = $('body');
	if($t.hasClass('night')) {
		$t.removeClass('night');
		$t.addClass('day');
		$b.removeClass('night');
		$b.addClass('day');
	} else {
		$t.addClass('night');
		$t.removeClass('day');
		$b.addClass('night');
		$b.removeClass('day');
	}
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js