Merge pull request #64 from ShrillShrestha/dark-mode

Add toggle to switch to dark mode

.gitignore

@@ -3,3 +3,4 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+.bundle

_includes/header.html

@@ -19,6 +19,7 @@
         crossorigin="anonymous"></script>
     <script src="https://jsxss.com/assets/xss.js"
         crossorigin="anonymous"></script>
+    <script defer src="{{ base.url | prepend: site.url }}/assets/js/darkmode.js"></script>
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -29,4 +30,4 @@
     <link lang='sass' rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
     <link rel='icon' href='{{ site.url }}/assets/img/favicon.ico' type='image/x-icon' />
     <title>{{ site.title }}</title>
-</head>
+</head>

_includes/navbar.html

@@ -9,6 +9,13 @@
                 <a class="nav-link" href="{{ site.url }}/blog">Blog</a>                
                 <a class="nav-link" href="{{ site.url }}/cv/resume.pdf">Resume</a>
             </div>
-        </a>        
+            <div class="nav-toogle">
+              <span class='nav-span'> Dark Mode </span>
+              <label class="switch">
+                <input type="checkbox" id="check-mode" onclick="darkmode()">
+                <span class="slider round"></span>
+              </label>
+            </div>
+        </a>
     </div>
-</header>
+</header>

_sass/all.scss

@@ -5,6 +5,7 @@
 @import 'profile';
 @import 'page';
 @import 'variables';
+@import 'variables_dark';
 
 .card-container {
     display: grid;
@@ -73,30 +74,32 @@ h2 {
 }
 
 a {
-  color: black;
+
+    color: inherit;
 }
 
 .info {
-  p {
-    margin-top: 5px;
-    margin: 0px;
-    text-align: left;
-  }
-
-  .title {
-    font-size: 500;
-    font-weight: bold;
-  }
-
-  .location {
-    font-size: medium;
-    font-weight: 400;
-  }
+    p {
+        margin-top: 5px;
+        margin: 0px;
+        text-align: left;
+    }
+
+    .title {
+        font-size: 500;
+        font-weight: bold;
+    }
+
+    .location {
+        font-size: medium;
+        font-weight: 400;
+    }
+
+    .dates {
+        font-size: small;
+        color: inherit;
+    }
 
-  .dates {
-    font-size: small;
-    color: #404040;
-  }
 }
 
 .icon {
@@ -109,3 +112,12 @@ a {
     width: 100%;
   }
 }
+
+.darkmode {
+  background: $dark_background !important;
+  color: $dark_font_color;
+}
+
+.alt-background {
+  background: $alt_card_background;
+}

_sass/navbar.scss

@@ -25,7 +25,24 @@
     font-weight: 400;
 }
 
-a {
+
+.nav-toogle {
+  position: absolute;
+  color: white;
+  top: 70px;
+  right: 10px;
+  z-index: 999;
+  margin-right: .5rem;
+  display: flex;
+  align-items: center;
+}
+
+.nav-span {
+  padding-right: 5px;
+}
+
+a{
+
     transition: 0.5s;
 }
 
@@ -47,7 +64,7 @@ a:hover, a:focus {
 
 .nav-logo img {
     margin-left: 1rem;
-    width: calc(100px + 6vw); 
+    width: calc(100px + 6vw);
 }
 
 .nav-content nav {
@@ -57,3 +74,64 @@ a:hover, a:focus {
     padding-top: 0px;
     padding-right: 0px;
 }
+
+/* Darkmode toogle bar */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin: 0;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.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);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

_sass/variables_dark.scss

@@ -0,0 +1,3 @@
+$dark_background: #181818;
+$dark_font_color: white;
+$alt_card_background: #C0C0C0;

assets/js/darkmode.js

@@ -0,0 +1,30 @@
+let imode = localStorage.getItem("isDark");
+
+let toogleStatus = document.getElementById('check-mode');
+let bodyElement = document.getElementsByTagName('body')[0];
+let navLogo = document.getElementsByClassName('nav-logo')[0];
+let cards = document.getElementsByClassName('card');
+
+if(imode == "true"){
+  toogleStatus.checked = true;
+  darkmode()
+}
+
+function darkmode(){
+  if(toogleStatus.checked){
+    bodyElement.className += " " + "darkmode";
+    navLogo.className += " " + "darkmode";
+    for(let i = 0; i < cards.length; i++){
+      cards[i].className += " " + "alt-background";
+    }
+    localStorage.setItem("isDark", true);
+  }else{
+    bodyElement.classList.remove('darkmode');
+    navLogo.classList.remove('darkmode');
+    for(let i = 0; i < cards.length; i++){
+      cards[i].classList.remove('alt-background');
+    }
+    localStorage.setItem("isDark", false);
+  }
+}
+