diff --git a/assets/css/post_page.css b/assets/css/post_page.css
index f96433a..c9528fe 100644
--- a/assets/css/post_page.css
+++ b/assets/css/post_page.css
@@ -54,7 +54,7 @@ border-color: gray;
 border-width: 1px;
 border-radius: 20px;
 transition: all ease 0.2s;
-color: black;
+
 
 }
 
diff --git a/assets/css/screen.css b/assets/css/screen.css
index 706afe4..eab052b 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -26,10 +26,40 @@ production stylesheet in assets/built/screen.css
 
 /* 1. Global - Set up the things
 /* ---------------------------------------------------------- */
-@import "global.css";
+:root {
+    --body-bg-color: #f4f8fb;
+    --body-bg-color-full: none;
+    --body-bg-color-mixed: none;
+    --post-card-color: #fff ;
+    --post-card-shadow: rgba(39,44,49,0.10);
+    --post-card-hover:  rgba(39,44,49,0.15);
+    --title-text-color: none;
+    --text-color-full: color(var(--darkgrey) l(-5%)); 
+    --text-color-full-light: var(--darkgrey);
+    --text-color-transition: black;
+    
+  }
+  
+:root.dark-theme {
+    --body-bg-color: rgb(43, 42, 42);   
+    --body-bg-color-full:  #000;
+    --body-bg-color-mixed:  rgb(34, 31, 31);
+    --post-card-color:  rgb(20, 20, 20);
+    --post-card-shadow:  rgba(75, 73, 73, 0.466);
+   /* --post-card-hover:  rgba(167, 167, 167, 0.61); */
+    --post-card-hover: rgba(241, 234, 234, 0.315);
+    --darkgrey: white;
+    --title-text-color: #fff;
+    --text-color-full: white;
+    --text-color-transition: white;
+    --text-color-full-light: white;
+    
+  }
+
+
 
 body {
-    background: #f4f8fb;
+    background: var(--body-bg-color);
 }
 
 .img {
@@ -66,6 +96,11 @@ body {
 .outer {
     position: relative;
     padding: 0 4vw;
+    background-color: var(--body-bg-color-full);
+}
+
+aside.outer{
+    background-color: var(--body-bg-color-mixed);
 }
 
 /* Centered content container blocks */
@@ -393,15 +428,15 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     overflow: hidden;
     margin: 0 20px 40px;
     min-height: 300px;
-    background: #fff center center;
+    background: var(--post-card-color) center center;
     background-size: cover;
     border-radius: 5px;
-    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
+    box-shadow: var(--post-card-shadow) 8px 14px 38px, var(--post-card-hover) 1px 3px 8px;
     transition: all 0.5s ease;
 }
 
 .post-card:hover {
-    box-shadow: 0 0 1px rgba(39,44,49,0.10), 0 3px 16px rgba(39, 44, 49,0.07);
+    box-shadow: 0 0 1px var(--post-card-shadow), 0 3px 16px var(--post-card-hover);
     transition: all 0.3s ease;
     transform: translate3D(0, -1px, 0);
 }
@@ -444,6 +479,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 .post-card-title {
     margin-top: 0;
+    color: var(--title-text-color);
 }
 
 .post-card-content {
@@ -451,6 +487,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    color: var(--title-text-color);
 }
 
 .post-card-excerpt {
@@ -459,6 +496,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 .post-card-meta {
     padding: 0 25px 25px;
+    background: var(--body-bg-color-full);
+
 }
 
 .author-profile-image {
@@ -546,7 +585,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 .post-template .site-main,
 .page-template .site-main {
     padding-bottom: 4vw;
-    background: #fff;
+    background: var(--post-card-color);
 }
 
 .post-full {
@@ -560,6 +599,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     padding: 2vw 3vw 3vw;
     max-width: 1040px;
     text-align: center;
+    background-color: var(--post-card-color) ;
 }
 @media (max-width: 500px) {
     .post-full-header {
@@ -582,7 +622,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 .post-full-title {
     margin: 20px;
-    color: color(var(--darkgrey) l(-5%));
+    color:  var(--text-color-full);
 }
 
 .date-divider {
@@ -620,7 +660,8 @@ The first (most recent) post in the list is styled to be bigger than the others
     font-family: Arial;
     font-size: 1.4rem;
     line-height: 1.6em;
-    background: #fff;
+    background:  var(--post-card-color);
+    color:var(--title-text-color);
 }
 
 @media (max-width: 1170px) {
@@ -634,6 +675,109 @@ The first (most recent) post in the list is styled to be bigger than the others
     }
 }
 
+/* STYLING FOR TOGGLE THEME BUTTON*/
+
+.checkbox {
+    opacity: 0;
+    position: absolute;
+}
+
+.label {
+    background-color: skyblue;
+    border-radius: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content:center;
+    padding: 5px;
+    position: relative;
+    height: 24px;
+    width: 24px;
+    transform: scale(1.2);
+    
+}
+
+.gg-sun {
+    box-sizing: border-box;
+    position: fixed;
+    display: block;
+    color: #FFCC33;
+    width: 24px;
+    height: 24px;
+    background:
+        linear-gradient(to bottom,
+        currentColor 4px,transparent 0)
+        no-repeat 5px -6px/2px 6px,
+        linear-gradient(to bottom,
+        currentColor 4px,transparent 0)
+        no-repeat 5px 14px/2px 6px,
+        linear-gradient(to bottom,
+        currentColor 4px,transparent 0)
+        no-repeat -8px 5px/6px 2px,
+        linear-gradient(to bottom,
+        currentColor 4px,transparent 0)
+        no-repeat 14px 5px/6px 2px;
+    border-radius: 100px;
+    box-shadow: inset 0 0 0 2px;
+    border: 6px solid transparent;
+    transform: scale(0.7);
+}
+
+.gg-sun::after,
+.gg-sun::before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-right: 4px solid;
+    border-left: 4px solid;
+    left: -6px;
+    top: 5px;
+}
+.ball {
+    display: none;
+}
+.gg-sun::before {
+   transform: rotate(-45deg)
+}
+
+.gg-sun::after {
+    transform: rotate(45deg)
+} 
+
+        
+.checkbox:checked + .label {
+    background-color: black;
+    height: 24px;
+    width: 24px;
+    padding: 5px;
+   
+}
+
+.checkbox:checked + .label .gg-sun {
+    
+    display: none;
+    
+}
+.checkbox:checked + .label .ball {
+    border-radius: 50%;
+    position: absolute;
+    top: 6px;
+    left: 5px;
+    height: 12px;
+    width: 12px;
+    background-color: black;
+    display: block;
+    box-shadow: inset 0px 5px #FFFACD, inset 0px 5px 0.5px 0.5px #FFFACD;
+    -moz-box-shadow: inset 0px 5px #FFFACD, inset 0px 5px 0.5px 0.5px #FFFACD;
+    transform: rotate(110deg);
+    
+}
+
+
+
 .post-full-content:before {
     content: "";
     position: absolute;
@@ -643,7 +787,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: block;
     width: 20px;
     height: 200px;
-    background: rgba(39,44,49,0.15);
+    background: var(--post-card-hover);
     filter: blur(5px);
     transform: rotate(-5deg);
 }
@@ -657,7 +801,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: block;
     width: 20px;
     height: 200px;
-    background: rgba(39,44,49,0.15);
+    background: var(--post-card-hover);
     filter: blur(5px);
     transform: rotate(5deg);
 }
@@ -709,7 +853,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .post-full-content a {
-    color: #000;
+    color:  var(--text-color-transition);
     box-shadow: var(--blue) 0 -1px 0 inset;
 }
 
@@ -720,7 +864,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 .post-full-content strong,
 .post-full-content em {
-    color: color(var(--darkgrey) l(-5%));
+    color:var(--text-color-full);
 }
 
 .post-full-content small {
@@ -848,7 +992,7 @@ Usage (In Ghost editor):
     width: 1px;
     height: 30px;
     background: color(var(--lightgrey) l(+10%));
-    box-shadow: #fff 0 0 0 5px;
+    box-shadow: var(--post-card-color) 0 0 0 5px;
     transform: rotate(45deg);
 }
 
@@ -858,7 +1002,7 @@ Usage (In Ghost editor):
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6 {
-    color: color(var(--darkgrey) l(-5%));
+    color: var(--text-color-full);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
@@ -888,6 +1032,7 @@ Usage (In Ghost editor):
     margin: 0.5em 0 0.2em 0;
     font-size: 2.8rem;
     font-weight: 700;
+    color: var(--title-text-color);
 }
 @media (max-width: 500px) {
     .post-full-content h3 {
@@ -1021,7 +1166,7 @@ Usage (In Ghost editor):
 }
 
 .post-full-content table th {
-    color: var(--darkgrey);
+    color: var(--text-color-full-light);
     font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: 0.2px;
@@ -1154,6 +1299,10 @@ Usage (In Ghost editor):
 /* 7.2. Post Footer
 /* ---------------------------------------------------------- */
 
+.footer {
+    background-color: var(--body-bg-color-full);
+}
+
 .post-full-footer {
     display: flex;
     justify-content: space-between;
@@ -1181,7 +1330,7 @@ Usage (In Ghost editor):
 }
 
 .author-card-name a {
-    color: var(--darkgrey);
+    color: var(--text-color-full-light);
     font-weight: 700;
 }
 
@@ -1236,6 +1385,7 @@ Usage (In Ghost editor):
     flex-wrap: wrap;
     margin: 0 -20px;
     padding: 40px 0 0 0;
+    background-color: var(--body-bg-color-mixed);
 }
 
 .read-next-card {
@@ -1479,7 +1629,7 @@ Usage (In Ghost editor):
 }
 
 .floating-header-share-tw,
-.floating-header-share-fb,{
+.floating-header-share-fb{
     display: block;
     align-items: center;
     width: 60px;
@@ -1551,7 +1701,7 @@ Usage (In Ghost editor):
         font-size: 1.5rem;
     }
     .floating-header-share-tw,
-    .floating-header-share-fb,{
+    .floating-header-share-fb{
         width: 40px;
         height: 40px;
         line-height: 38px;
@@ -1921,3 +2071,16 @@ Usage (In Ghost editor):
         margin-left: 0;
     }
 }
+
+
+.tag_item{
+    color: var(--text-color-full-light);
+}
+
+.taglabel{
+    color: var(--text-color-full-light);
+}
+
+h4 span {
+    color: var(--text-color-transition);
+}
\ No newline at end of file
diff --git a/default.hbs b/default.hbs
index bb582ec..5bb3dc1 100644
--- a/default.hbs
+++ b/default.hbs
@@ -14,6 +14,7 @@
   {{!-- Styles'n'Scripts --}}
   <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
   <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
+  <link rel="stylesheet" type="text/css" href="{{asset "css/global.css"}}" />
   <link rel="stylesheet" type="text/css" href="{{asset "css/tab.css"}}" />
   <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
   <link rel="stylesheet" type="text/css" href="{{asset "css/head_tab.css"}}" />
@@ -74,7 +75,7 @@
   <a href="http://iq.opengenus.org/guide-to-writing-a-note-at-opengenus-iq/">Write at Opengenus IQ</a>
 </div>
 
-<body class="{{body_class}}">
+<body class="{{body_class}}" style="visibility: hidden;" onload="document.body.style.visibility='visible'">
 
   <div id="search_page" class="search_page search_page_hide">
     <div class="search_page_close search_toggle">&times</div>
diff --git a/page.hbs b/page.hbs
index fd16851..64b3295 100644
--- a/page.hbs
+++ b/page.hbs
@@ -23,16 +23,16 @@ into the {body} of the default.hbs template --}}
                 <h1 class="post-full-title">{{title}}</h1>
                 <h4><span>
 
-                        <a href="#" style="color: #1b1e21">
+                        <a href="#" >
                             <div data-network="twitter" class="st-custom-button fa fa-twitter-square "></div>
                         </a>
-                        <a href="#" style="color: #1b1e21">
+                        <a href="#" >
                             <div data-network="facebook" class="st-custom-button fa fa-facebook-square"></div>
                         </a>
-                        <a href="#" style="color: #1b1e21">
+                        <a href="#" >
                             <div data-network="linkedin" class="st-custom-button fa fa-linkedin-square"></div>
                         </a>
-                        <a href="#" style="color: #1b1e21">
+                        <a href="#" >
                             <div data-network="googleplus" class="st-custom-button fa fa-google-plus-square"></div>
                         </a>
                     </span>
diff --git a/partials/site-nav.hbs b/partials/site-nav.hbs
index 180752e..ce5eb88 100644
--- a/partials/site-nav.hbs
+++ b/partials/site-nav.hbs
@@ -32,6 +32,63 @@
         {{else}}  -->
             <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
       <!--  {{/if}} -->
+
+      <!-- Theme icon button -->
+          <div title="Theme" class="theme_toggle" style="padding-right: 2rem; padding-left: 1.5rem;">
+            <input type="checkbox" class="checkbox" id="chk"/>
+            <label class="label" for="chk">
+              <div class="gg-sun"></div>
+
+              <div class="ball"></div>
+            </label>
+             <script>
+              let dark_theme = localStorage.getItem('dark_theme');
+
+              const darkModeToggle = document.querySelector('#chk');
+              
+
+              const enableDarkMode = () => {
+                // 1. Add the class to the body
+                 document.documentElement.classList.add('dark-theme');  
+                // 2. Update darkMode in localStorage
+                localStorage.setItem('dark_theme', 'enabled');
+                darkModeToggle.setAttribute('checked', true);
+              }
+
+              const disableDarkMode = () => {
+                // 1. Remove the class from the body
+                document.documentElement.classList.remove('dark-theme'); 
+                // 2. Update darkMode and toggle in localStorage 
+                localStorage.setItem('dark_theme', null);
+                darkModeToggle.setAttribute('checked', false);
+              }
+              
+              // If the user already visited and enabled darkMode
+              
+              if (dark_theme === 'enabled') {
+                enableDarkMode();
+              }
+
+              // When someone clicks the button
+              darkModeToggle.addEventListener('click', () => {
+                // get their darkMode setting
+                dark_theme = localStorage.getItem('dark_theme');
+                
+                // if it not current enabled, enable it
+                if (dark_theme !== 'enabled') {
+                  enableDarkMode();
+                // if it has been enabled, turn it off  
+                } else {  
+                  disableDarkMode(); 
+                }
+              });
+      
+    
+    
+ 
+             </script>
+          </div>
+      	
     </div>
 
 </nav>
diff --git a/post.hbs b/post.hbs
index 30f64f1..411c9d0 100644
--- a/post.hbs
+++ b/post.hbs
@@ -48,7 +48,7 @@ into the {body} of the default.hbs template --}}
     <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
 
       <header class="post-full-header">
-        <h1 class="post-full-title" style="color:#292929; font-size:30px ; ">{{title}}</h1>
+        <h1 class="post-full-title" style="font-size:30px ; ">{{title}}</h1>
         <div id="global_message"
           style="cursor:pointer; background:rgb(181, 222, 250); padding-top:20px; padding-bottom:20px;">
           <a id='global_message_link' target="_blank" style="font-color: #a0a1a1; "></a>