WIP: feat: add Dark mode

src/js/index.js

@@ -20,6 +20,7 @@ const filterInput = document.querySelector('#filter');
 const sortingInput = document.querySelector('#sorting');
 const tagsSelect = document.querySelector('#tags');
 const showExpired = document.querySelector('#expired');
+const darkModeButton = document.querySelector('#darkModeButton');
 
 const activateElements = els => Array.from(els).forEach(node => node.classList.add(ACTIVE_CLASS));
 const allowDifficultySelect = shouldAllow => sortingInput.querySelectorAll('.difficulty')
@@ -112,6 +113,16 @@ function lazyLoadStyleSheet() {
 	});
 }
 
+function toggleDarkMode() {
+	if (localStorage.getItem('theme') === 'dark') {
+		document.documentElement.setAttribute('theme', 'light');
+		localStorage.setItem('theme', 'light');
+	} else {
+		document.documentElement.setAttribute('theme', 'dark');
+		localStorage.setItem('theme', 'dark');
+	}
+}
+
 window.addEventListener('DOMContentLoaded', () => {
 	lazyLoadStyleSheet();
 	selectr = new Selectr('#tags', {
@@ -136,6 +147,12 @@ window.addEventListener('DOMContentLoaded', () => {
 	filterInput.addEventListener('input', cascade);
 	sortingInput.addEventListener('input', cascade);
 	showExpired.addEventListener('change', cascade);
+	darkModeButton.addEventListener('click', toggleDarkMode);
+
+	if (localStorage.getItem('theme') === 'dark') {
+		darkModeButton.checked = true;
+		document.documentElement.setAttribute('theme', 'dark');
+	}
 
 	cascade.call(window, true);
 });

src/pug/includes/body.pug

@@ -1,5 +1,9 @@
 .container
 
+	label.switch
+		input(type='checkbox')#darkModeButton
+		span.slider.round
+
 	section.main.flex
 		.flex.box.hero
 			.heading.flex

src/styl/imports/base.styl

@@ -15,7 +15,6 @@ $default-font-family-mono = Consolas, Menlo, Monaco, Lucida Console, Liberation
 html, body, :root
 	width 100%
 	height 100%
-	background #f5f7fb
 	font-family $default-font-family
 	text-rendering: optimizeLegibility
 	-webkit-font-smoothing antialiased

src/styl/imports/card.styl

@@ -7,9 +7,7 @@
 		padding 3rem
 		height auto
 		margin-bottom 4rem
-		background #FFF
 		border-radius 0 0 10px 10px
-		border 1px solid grey-color
 		border-top none
 
 		.title
@@ -37,7 +35,6 @@
 		p
 			font-size 1.6rem
 			line-height 1.4
-			color #222
 			justify-content flex-start
 			flex-wrap wrap
 
@@ -78,12 +75,10 @@
 						color tertiary-hover-color
 
 		a.btn
-			color tertiary-color
 			font-size 1.8rem
 			padding .4rem 2rem
 			margin-top 1.2rem
 			border-radius .6rem
-			border 2px solid tertiary-color
 			text-decoration none
 			display inline-block
 
@@ -102,7 +97,6 @@
 		width 100%
 		overflow hidden
 		border-radius 10px 10px 0 0
-		border 1px solid grey-color
 		background white-color
 
 	&:hover

src/styl/imports/dark-mode-button.styl

@@ -0,0 +1,69 @@
+@css {
+
+	/* The switch - the box around the slider */
+	.switch {
+		color: green;
+		position: absolute;
+		top: 50px;
+		right: 50px;
+		display: inline-block;
+		width: 60px;
+		height: 34px;
+	}
+
+	/* Hide default HTML checkbox */
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	/* The slider */
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #ccc;
+		-webkit-transition: .4s;
+		transition: .4s;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: "";
+		height: 26px;
+		width: 26px;
+		left: 4px;
+		bottom: 4px;
+		background-color: white;
+		-webkit-transition: .4s;
+		transition: .4s;
+	}
+
+	input:checked + .slider {
+		background-color: #2196F3;
+	}
+
+	input:focus + .slider {
+		box-shadow: 0 0 1px #2196F3;
+	}
+
+	input:checked + .slider:before {
+		-webkit-transform: translateX(26px);
+		-ms-transform: translateX(26px);
+		transform: translateX(26px);
+	}
+
+	/* Rounded sliders */
+	.slider.round {
+		border-radius: 34px;
+	}
+
+	.slider.round:before {
+		border-radius: 50%;
+	}
+
+}

src/styl/imports/selectr-theme.styl

@@ -8,6 +8,7 @@
 
 .selectr-options
 	overflow-y auto
+	color #000
 
 .selectr-options-container
 	border-radius 0px

src/styl/index.styl

@@ -1,5 +1,86 @@
 @require "imports/base"
 
+@import "imports/dark-mode-button"
+
+// use CSS variables to control switch between light and dark mode
+@css {
+	:root {
+		--body-color: #f5f7fb;
+		--controls-color: #fff;
+		--controls-text-color: #000;
+		--controls-border-color: #ededed;
+		--hero-url: url('/assets/img/tiny-grid.svg');
+		--card-bg-color: #FFF;
+		--card-text-color: #222;
+		--card-h1-color: #000;
+		--newsletter-bg-color: #fff;
+		--footer-bg-color: #153e68;
+		--card-border-color: #ededed;
+		--btn-color: #2868cb;
+	}
+
+	[theme="dark"] {
+		--body-color: #222;
+		--controls-color: #353535;
+		--controls-text-color: #fff;
+		--controls-border-color: #000;
+		--hero-url: url('/assets/img/tiny-grid-dark.svg');
+		--card-bg-color: #353535;
+		--card-text-color: #fff;
+		--card-h1-color: #fff;
+		--newsletter-bg-color: #191919;
+		--footer-bg-color: #222;
+		--card-border-color: #000;
+		--btn-color: #a2c6ff;
+	}
+
+	body {
+		background: var(--body-color);
+	}
+
+	section.main .controls {
+		background: var(--controls-color);
+		color: var(--controls-text-color);
+		border: 1px solid var(--controls-border-color);
+	}
+
+	section.main .hero {
+		background: var(--hero-url) repeat;
+	}
+
+	.item div.information {
+		background: var(--card-bg-color);
+		border: 1px solid var(--card-border-color);
+	}
+
+	.item div.information p {
+		color: var(--card-text-color);
+	}
+
+	.item .img-container {
+		border: 1px solid var(--card-border-color);
+	}
+
+	div.information .title h1 {
+		color: var(--card-h1-color);
+	}
+
+	div.information a.btn {
+		color: var(--btn-color);
+		border: 2px solid var(--btn-color);
+	}
+
+	section.newsletter {
+		background: var(--newsletter-bg-color);
+		border-top: 1px solid var(--card-border-color);
+	}
+
+	footer {
+		background: var(--footer-bg-color);
+	}
+
+}
+
 a
 	color link-color
 	transition .2s
@@ -54,10 +135,8 @@ section.main
 
 	.controls
 		flex-wrap wrap
-		background white-color
 		padding 0 2rem
 		border-radius 10px
-		border 1px solid grey-color
 		margin 4rem 2rem 0
 
 	.banner
@@ -67,7 +146,6 @@ section.main
 		color white
 
 	.hero
-		background url('/assets/img/tiny-grid.svg') repeat
 		background-size 120px
 
 		.heading
@@ -161,10 +239,6 @@ section.main
 
 		@import "imports/card"
 
-section.newsletter
-	background white-color
-	border-top 1px solid grey-color
-
 footer
 	font-size 1.8rem
 	margin 0 auto
@@ -173,7 +247,6 @@ footer
 	flex-flow column wrap
 	text-align center
 	color white-color
-	background primary-color
 	.item
 		margin-bottom 5px
 	.item#logo-footer