From 31333452c4274be0bc9abbdf963777d05da92fa3 Mon Sep 17 00:00:00 2001
From: Neil Brommer <neil@neilbrommer.com>
Date: Wed, 3 Jan 2018 13:48:57 -0800
Subject: [PATCH] Better handle dark mode

---
 css/main.css | 39 +++++++++++++++++++++++----------------
 index.html   | 15 ---------------
 js/main.js   | 46 ++++++++++++++++++++++------------------------
 3 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/css/main.css b/css/main.css
index bf715e1..aeccec3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -49,34 +49,41 @@ li.col-md-6 {
 	height: 100%;
 }
 
-.jumbo-dark {
+.dark-mode {
+	color: white;
+	background-color: #343a40;
+}
+
+.dark-mode .jumbotron {
 	background-color: #2b3136;
 }
 
-.a-dark {
+.dark-mode a:not(.navbar-brand):not(.nav-link) {
 	color: var(--main-light-color) !important;
 }
 
-.a-dark:hover {
+.dark-mode a:not(.navbar-brand):not(.nav-link):hover {
 	color: white !important;
 }
 
+.dark-mode .card {
+	background-color: #343a40;
+	border-color: rgba(255, 255, 255, 0.125);
+}
+
+.dark-mode .form-control {
+	background-color: rgb(81, 89, 107);
+	border-color: rgb(60, 66, 80);
+}
+
+.dark-mode .form-control:focus {
+	box-shadow: 0 0 0 .2rem rgba(255,255,255,.5);
+}
+
+/* for transitioning to/from dark mode */
 .transition {
 	-webkit-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out;
 	-moz-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out;
 	-o-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out;
 	transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out;
 }
-
-.card.bg-dark {
-	border-color: rgba(255, 255, 255, 0.125);
-}
-
-.dark.form-control {
-	background-color: rgb(81, 89, 107);
-	border-color: rgb(60, 66, 80);
-}
-
-.dark.form-control:focus {
-	box-shadow: 0 0 0 .2rem rgba(255,255,255,.5);
-}
diff --git a/index.html b/index.html
index 2e9c0a3..1d6d2cc 100644
--- a/index.html
+++ b/index.html
@@ -97,11 +97,6 @@
 		</div>
 	</nav>
 
-	<!-- try to prevent flickering -->
-	<script>
-		checkTheme();
-	</script>
-
 
 	<div class="container">
 		<div class="jumbotron">
@@ -112,11 +107,6 @@
 			</p>
 		</div>
 
-		<!-- try to prevent flickering -->
-		<script>
-			checkTheme();
-		</script>
-
 		<div class="card-columns">
 			<div class="card">
 				<h4 class="card-header">Snippets</h4>
@@ -165,11 +155,6 @@
 				</div>
 			</div>
 		</div>
-
-		<!-- try to prevent flickering -->
-		<script>
-			checkTheme();
-		</script>
 	</div>
 
 </body>
diff --git a/js/main.js b/js/main.js
index 4830a13..2705589 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 var theme = window.localStorage.getItem("theme");
 if (theme != null && theme == "true")
-	$("body").addClass("bg-dark");
+	$("body").addClass("dark-mode");
 
 $(document).ready(function () {
 	$("#btnTheme").click(function () {
@@ -22,16 +22,13 @@ function checkTheme() {
 }
 
 function transitionDark() {
-	$("body").addClass("transition bg-dark text-white");
-	$(".card").addClass("transition bg-dark text-white");
-	$(".jumbotron").addClass("transition jumbo-dark text-white");
-	$(".form-control").addClass("transition dark");
-	$("a:not(.navbar-brand):not(.nav-link)").addClass("transition a-dark");
+	$(".card").addClass("transition");
+	$(".jumbotron").addClass("transition");
+	$(".form-control").addClass("transition");
+	$("a:not(.navbar-brand):not(.nav-link)").addClass("transition");
+	$("body").addClass("transition dark-mode");
 
-	setInterval(function () {
-		$("a:not(.navbar-brand):not(.nav-link)").removeClass("transition");
-		$(".form-control").removeClass("transition");
-	}, 250);
+	setTimeout(endTransition, 250);
 
 	$("#btnTheme").removeClass("btn-dark").addClass("transition btn-light");
 	$("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-sun"));
@@ -40,16 +37,13 @@ function transitionDark() {
 }
 
 function transitionLight() {
-	$("body").addClass("transition").removeClass("bg-dark text-white");
-	$(".card").addClass("transition").removeClass("bg-dark text-white");
-	$(".jumbotron").addClass("transition").removeClass("jumbo-dark text-white");
-	$(".form-control").addClass("transition").removeClass("dark");
-	$("a:not(.navbar-brand):not(.nav-link)").addClass("transition").removeClass("a-dark");
+	$(".card").addClass("transition");
+	$(".jumbotron").addClass("transition");
+	$(".form-control").addClass("transition");
+	$("a:not(.navbar-brand):not(.nav-link)").addClass("transition");
+	$("body").addClass("transition").removeClass("dark-mode");
 
-	setInterval(function () {
-		$("a:not(.navbar-brand):not(.nav-link)").removeClass("transition");
-		$(".form-control").removeClass("transition");
-	}, 500);
+	setTimeout(endTransition, 250);
 
 	$("#btnTheme").removeClass("btn-light").addClass("transition btn-dark");
 	$("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-moon"));
@@ -57,12 +51,16 @@ function transitionLight() {
 	window.localStorage.setItem("theme", "false");
 }
 
+function endTransition() {
+	$("body").removeClass("transition");
+	$(".card").removeClass("transition");
+	$(".jumbotron").removeClass("transition");
+	$("a:not(.navbar-brand):not(.nav-link)").removeClass("transition");
+	$(".form-control").removeClass("transition");
+}
+
 function setDark() {
-	$("body").addClass("bg-dark text-white");
-	$(".card").addClass("bg-dark text-white");
-	$(".jumbotron").addClass("jumbo-dark text-white");
-	$(".form-control").addClass("dark");
-	$("a:not(.navbar-brand):not(.nav-link)").addClass("a-dark");
+	$("body").addClass("dark-mode");
 
 	$("#btnTheme").removeClass("btn-dark").addClass("btn-light");
 	$("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-sun"));