NeilBrommer/Personal-Site
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Better handle dark mode

Browse source
This commit is contained in:
Neil Brommer 2018-01-03 13:48:57 -08:00
parent d679942eac
commit 31333452c4
3 changed files with 45 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
css/main.css
View file

@ -49,34 +49,41 @@ li.col-md-6 {
height: 100%; height: 100%;
} }
.jumbo-dark { .dark-mode {
color: white;
background-color: #343a40;
}
.dark-mode .jumbotron {
background-color: #2b3136; background-color: #2b3136;
} }
.a-dark { .dark-mode a:not(.navbar-brand):not(.nav-link) {
color: var(--main-light-color) !important; color: var(--main-light-color) !important;
} }
.a-dark:hover { .dark-mode a:not(.navbar-brand):not(.nav-link):hover {
color: white !important; 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 { .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; -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; -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; -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; 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);
}

15
index.html
View file

@ -97,11 +97,6 @@
</div> </div>
</nav> </nav>
<!-- try to prevent flickering -->
<script>
checkTheme();
</script>
<div class="container"> <div class="container">
<div class="jumbotron"> <div class="jumbotron">
@ -112,11 +107,6 @@
</p> </p>
</div> </div>
<!-- try to prevent flickering -->
<script>
checkTheme();
</script>
<div class="card-columns"> <div class="card-columns">
<div class="card"> <div class="card">
<h4 class="card-header">Snippets</h4> <h4 class="card-header">Snippets</h4>
@ -165,11 +155,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- try to prevent flickering -->
<script>
checkTheme();
</script>
</div> </div>
</body> </body>

46
js/main.js
View file

@ -1,6 +1,6 @@
var theme = window.localStorage.getItem("theme"); var theme = window.localStorage.getItem("theme");
if (theme != null && theme == "true") if (theme != null && theme == "true")
$("body").addClass("bg-dark"); $("body").addClass("dark-mode");
$(document).ready(function () { $(document).ready(function () {
$("#btnTheme").click(function () { $("#btnTheme").click(function () {
@ -22,16 +22,13 @@ function checkTheme() {
} }
function transitionDark() { function transitionDark() {
$("body").addClass("transition bg-dark text-white"); $(".card").addClass("transition");
$(".card").addClass("transition bg-dark text-white"); $(".jumbotron").addClass("transition");
$(".jumbotron").addClass("transition jumbo-dark text-white"); $(".form-control").addClass("transition");
$(".form-control").addClass("transition dark"); $("a:not(.navbar-brand):not(.nav-link)").addClass("transition");
$("a:not(.navbar-brand):not(.nav-link)").addClass("transition a-dark"); $("body").addClass("transition dark-mode");
setInterval(function () { setTimeout(endTransition, 250);
$("a:not(.navbar-brand):not(.nav-link)").removeClass("transition");
$(".form-control").removeClass("transition");
}, 250);
$("#btnTheme").removeClass("btn-dark").addClass("transition btn-light"); $("#btnTheme").removeClass("btn-dark").addClass("transition btn-light");
$("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-sun")); $("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-sun"));
@ -40,16 +37,13 @@ function transitionDark() {
} }
function transitionLight() { function transitionLight() {
$("body").addClass("transition").removeClass("bg-dark text-white"); $(".card").addClass("transition");
$(".card").addClass("transition").removeClass("bg-dark text-white"); $(".jumbotron").addClass("transition");
$(".jumbotron").addClass("transition").removeClass("jumbo-dark text-white"); $(".form-control").addClass("transition");
$(".form-control").addClass("transition").removeClass("dark"); $("a:not(.navbar-brand):not(.nav-link)").addClass("transition");
$("a:not(.navbar-brand):not(.nav-link)").addClass("transition").removeClass("a-dark"); $("body").addClass("transition").removeClass("dark-mode");
setInterval(function () { setTimeout(endTransition, 250);
$("a:not(.navbar-brand):not(.nav-link)").removeClass("transition");
$(".form-control").removeClass("transition");
}, 500);
$("#btnTheme").removeClass("btn-light").addClass("transition btn-dark"); $("#btnTheme").removeClass("btn-light").addClass("transition btn-dark");
$("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-moon")); $("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-moon"));
@ -57,12 +51,16 @@ function transitionLight() {
window.localStorage.setItem("theme", "false"); 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() { function setDark() {
$("body").addClass("bg-dark text-white"); $("body").addClass("dark-mode");
$(".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");
$("#btnTheme").removeClass("btn-dark").addClass("btn-light"); $("#btnTheme").removeClass("btn-dark").addClass("btn-light");
$("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-sun")); $("#themeText").replaceWith($("<span>").attr("id", "themeText").addClass("fas fa-sun"));