Theme Selector

by Codi Bezouka-Smith

HTML

<div id="app">
	<div id="selector">
		<p href="#" class="circle"></p>
	</div>
</div>

SCSS

@mixin flex ($direction, $align, $justify) {
	align-items: $align;
	display: flex;
	flex-direction: $direction;
	justify-content: $justify;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

body  {
	height: 100vh;
}

#app {
	background: rgb(255, 255, 255);
	height: 100%;
	padding: 10px;
	
	&.dark {
		background: rgb(26, 26, 26);
		
		#selector {
			@include flex(row, center, flex-end);
			background: rgb(255, 255, 255);
			
			.circle {
				background: rgb(0, 0, 0);
			}
		}
	}
	
	#selector {
		@include flex(row, center, flex-start);
		background: rgb(0, 0, 0);
		border-radius: 20px;
		cursor: pointer;
		height: 30px;
		padding: 5px;
		width: 50px;
		.circle {
			background: rgb(255, 255, 255);
			border-radius: 10px;
			height: 20px;
			width: 20px;
		}
	}
}

JavaScript

const fns = {
	app: {
		classList: () => { return fns.app.el().classList },
		el: () => { return document.getElementById('app') },
	},
	circle: {
		el: () => { return document.querySelector('.circle') },
	},
	selector: {
		el: () => { return document.getElementById('selector') },
	},
}

fns.selector.el().addEventListener('click', () => {
	fns.app.classList().toggle('dark')
})