<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet"> 

<body class="wrapper">
	
<div class="header">
	<button class="toggle-button">
		<ion-icon id="dark-mode-icon" class="moon" name="moon"></ion-icon>
    </button>
	<div class="colour-toggles">
	  <input class="radio-button grey" type="radio" id="grey" name="colour-toggle" value="blue" onclick="showGrey();">
	  <input class="radio-button blue" type="radio" id="blue" name="colour-toggle" value="blue" onclick="showBlue();">
	  <input class="radio-button orange" type="radio" id="orange" name="colour-toggle" value="orange" onclick="showOrange();">
	  <input class="radio-button red" type="radio" id="red" name="colour-toggle" value="red" onclick="showRed();">
	  <input class="radio-button green" type="radio" id="green" name="colour-toggle" value="green" onclick="showGreen();">
	  <input class="radio-button yellow" type="radio" id="yellow" name="colour-toggle" value="yellow" onclick="showYellow();">
</div>



<div id="accordion-wrapper" class="grey">

	<div class="accordion-item close">
		<h3 class="accordion-header">
			Lorem
		</h3>
		<div class="accordion-panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
		</div>
	</div>

	<div class="accordion-item close">
		<h3 class="accordion-header">
			Ipsum
		</h3>
		<div class="accordion-panel">
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
		</div>
	</div>

	<div class="accordion-item close">
		<h3 class="accordion-header">
			Consequeter
		</h3>
		<div class="accordion-panel">
			<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		</div>
	</div>

	<div class="accordion-item close">
		<h3 class="accordion-header">
			Astrum
		</h3>
		<div class="accordion-panel">
			<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>

</div>

</body>
/* Variables */

$blue: #5183f5;
$red: #f55169;
$yellow: #f5c351;
$green: #51f5c4;
$orange: #f59551;
$grey: #9e9e9e;

/* Mixins */

@mixin centered-layout {
	width: 500px;
	height: 450px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

@mixin typography {
	font-family: "PT Sans";
	letter-spacing: 1.1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #404040;
}

@mixin purge-button-defaults {
	border: none;
	box-shadow: none;
	outline: none;
	background: transparent;
	&:focus {
		outline: none;
	}
}

@mixin accordion-header-styles($colour, $lighten-rate: 30%, $darken-rate: 10%) {
	border: 2px solid darken($colour, $darken-rate);
	background: lighten($colour, $lighten-rate);
	color: $colour;
	transition: background 0.3s, border-color 0.3s;
	&:hover {
		background: lighten($colour, 20%);
		border-color: darken($colour, $darken-rate);
	}
}

.wrapper {
	@include typography;
	margin: 1rem;

}

.header {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	.moon {
		color: #fbc02d;
		font-size: 28px;
	}
	.toggle-button {
		@include purge-button-defaults;
	}
}

/* Radio button styles */

input[type="radio"] {
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 10px;
	padding: 0.5rem;
	&.grey {
		&:hover {
			background: darken($grey, 20%);
		}
		background: $grey;
	}
	&.blue {
		&:hover {
			background: darken($blue, 20%);
		}
		background: $blue;
	}
	&.orange {
		&:hover {
			background: darken($orange, 20%);
		}
		background: $orange;
	}
	&.red {
		&:hover {
			background: darken($red, 20%);
		}
		background: $red;
	}
	&.green {
		&:hover {
			background: darken($green, 20%);
		}
		background: $green;
	}
	&.yellow {
		&:hover {
			background: darken($yellow, 20%);
		}
		background: $yellow;
	}
}

/* Accordion styles */

#accordion-wrapper {
	@include centered-layout;
	
}

.accordion-item {
	float: left;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.accordion-header {
	text-transform: uppercase;
	user-select: none;
	cursor: pointer;
	margin: 0px 0px 3px 0px;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
	font-weight: 600;
	font-size: 16px;
}

.accordion-panel {
	line-height: 1.45rem;
}

.close .accordion-panel {
	height: 0;
	height: 0px;
	float: left;
	transform: scaleY(0);
}

.open .accordion-panel {
	display: block;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	width: 100%;
	margin: 6px 0px 6px 0px;
	box-sizing: border-box;
}

// Themed colours
.grey {
	.accordion-item {
		.accordion-header {
			@include accordion-header-styles($grey);
			color: darken($grey, 10%);
		}
		&.open {
			.accordion-header {
				background: lighten($grey, 10%);
				color: white;
			}
		}
		.accordion-panel {
			border: 2px solid $grey;
			color: darken($grey, 10%);
		}
	}
}

.blue {
	.accordion-item {
		.accordion-header {
			@include accordion-header-styles($blue);
			color: $blue;
		}
		&.open {
			.accordion-header {
				background: lighten($blue, 10%);
				color: white;
			}
		}
		.accordion-panel {
			border: 2px solid $blue;
			color: $blue;
		}
	}
}

.orange {
	.accordion-item {
		.accordion-header {
			@include accordion-header-styles($orange);
			color: $orange;
		}
		&.open {
			.accordion-header {
				background: lighten($orange, 10%);
				color: white;
			}
		}
		.accordion-panel {
			border: 2px solid $orange;
			color: $orange;
		}
	}
}

.green {
	.accordion-item {
		.accordion-header {
			@include accordion-header-styles($green);
			color: darken($green, 30%);
		}
		&.open {
			.accordion-header {
				background: lighten($green, 10%);
				color: white;
			}
		}
		.accordion-panel {
			border: 2px solid $green;
			color: darken($green, 30%);
		}
	}
}

.red {
	.accordion-item {
		.accordion-header {
			@include accordion-header-styles($red);
			color: $red;
		}
		&.open {
			.accordion-header {
				background: lighten($red, 10%);
				color: white;
			}
		}
		.accordion-panel {
			border: 2px solid $red;
			color: $red;
		}
	}
}

.yellow {
	.accordion-item {
		.accordion-header {
			@include accordion-header-styles($yellow);
			color: darken($yellow, 10%);
		}
		&.open {
			.accordion-header {
				background: lighten($yellow, 10%);
				color: white;
			}
		}
		.accordion-panel {
			border: 2px solid $yellow;
			color: darken($yellow, 10%);
		}
	}
}

// Dark styles

.dark {
	background: #212121;
	color: #e0e0e0;
	.grey {
		.accordion-item {
			.accordion-header {
				@include accordion-header-styles($grey);
				color: darken($grey, 10%);
				background: transparent;
				&:hover {
					background: darken($grey, 80%);
				}
			}
			&.open {
				.accordion-header {
					background: darken($grey, 80%);
					color: white;
				}
			}
			.accordion-panel {
				border: 2px solid $grey;
				color: darken($grey, 10%);
				background: transparent;
			}
		}
	}
	.red {
		.accordion-item {
			.accordion-header {
				@include accordion-header-styles($red);
				color: darken($red, 10%);
				background: transparent;
				&:hover {
					background: darken($red, 60%);
				}
			}
			&.open {
				.accordion-header {
					background: darken($red, 60%);
					color: white;
				}
			}
			.accordion-panel {
				color: darken($red, 10%);
				background: transparent;
				border: 2px solid darken($red, 10%);
			}
		}
	}
	.blue {
		.accordion-item {
			.accordion-header {
				@include accordion-header-styles($blue);
				color: darken($blue, 10%);
				background: transparent;
				&:hover {
					background: darken($blue, 60%);
				}
			}
			&.open {
				.accordion-header {
					background: darken($blue, 60%);
					color: white;
				}
			}
			.accordion-panel {
				color: darken($blue, 10%);
				background: transparent;
				border: 2px solid darken($blue, 10%);
			}
		}
	}
	.orange {
		.accordion-item {
			.accordion-header {
				@include accordion-header-styles($orange);
				color: darken($orange, 10%);
				background: transparent;
				&:hover {
					background: darken($orange, 60%);
				}
			}
			&.open {
				.accordion-header {
					background: darken($orange, 60%);
					color: white;
				}
			}
			.accordion-panel {
				color: darken($orange, 10%);
				background: transparent;
				border: 2px solid darken($orange, 10%);
			}
		}
	}
	.green {
		.accordion-item {
			.accordion-header {
				@include accordion-header-styles($green);
				color: darken($green, 10%);
				background: transparent;
				&:hover {
					background: darken($green, 60%);
				}
			}
			&.open {
				.accordion-header {
					background: darken($green, 60%);
					color: white;
				}
			}
			.accordion-panel {
				color: darken($green, 10%);
				background: transparent;
				border: 2px solid darken($green, 10%);
			}
		}
	}

	.yellow {
		.accordion-item {
			.accordion-header {
				@include accordion-header-styles($yellow);
				color: darken($yellow, 10%);
				background: transparent;
				&:hover {
					background: darken($yellow, 60%);
				}
			}
			&.open {
				.accordion-header {
					background: darken($yellow, 60%);
					color: white;
				}
			}
			.accordion-panel {
				color: darken($yellow, 10%);
				background: transparent;
				border: 2px solid darken($yellow, 10%);
			}
		}
	}
}
/* Toggle darkmode and switch sun/moon */
var toggle = document.querySelector("button.toggle-button");
var wrapper = document.querySelector(".wrapper");
var darkModeIcon = document.getElementById("dark-mode-icon");

function toggleClass() {
	wrapper.classList.toggle("dark");
	if (darkModeIcon.name == "moon") {
		darkModeIcon.name = "sunny";
	} else {
		darkModeIcon.name = "moon";
	}
}

// Toggle dark mode
function toggleDarkMode() {
	toggleClass();
	changeTheme();
}

toggle.addEventListener("click", toggleDarkMode);

/* Accordion functionality */

var accItem = document.getElementsByClassName('accordion-item');
    var accHD = document.getElementsByClassName('accordion-header');
    for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordion-item close';
        }
        if (itemClass == 'accordion-item close') {
            this.parentNode.className = 'accordion-item open';
        }
    }

/* Toggle through themes */

function showGrey() {
	let greyToggle = document.querySelector("#accordion-wrapper");
	greyToggle.classList = " ";
	greyToggle.classList.toggle("grey");
}


function showBlue() {
	let blueToggle = document.querySelector("#accordion-wrapper");
	blueToggle.classList = " ";
	blueToggle.classList.toggle("blue");
}

function showOrange() {
	let orangeToggle = document.querySelector("#accordion-wrapper");
	orangeToggle.classList = " ";
	orangeToggle.classList.toggle("orange");
}

function showRed() {
	let redToggle = document.querySelector("#accordion-wrapper");
	redToggle.classList = " ";
	redToggle.classList.toggle("red");
}

function showGreen() {
	let greenToggle = document.querySelector("#accordion-wrapper");
	greenToggle.classList = " ";
	greenToggle.classList.toggle("green");
}

function showYellow() {
	let yellowToggle = document.querySelector("#accordion-wrapper");
	yellowToggle.classList = " ";
	yellowToggle.classList.toggle("yellow");
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.