made default theme dark and added saving the theme to localstorage

assets/css/style.css

@@ -10,16 +10,84 @@
 # General
 --------------------------------------------------------------*/
 :root {
+  color-scheme: dark;
   --highlight: #ffb727;
+  --highlight-alt: #ffc85a;
+
   --background: #fff;
+
+  --border: var(--background);
+
+  --btn-bg: var(--highlight);
+  --btn-bg-hover: #ffc550;
+  --btn-bg-hover-2: #f3a200;
+
   --text-color: #444;
-  --text-color-alt: #fff;
+  --text-color-alt: var(--background);
   --text-color-alt-2: #eee;
+
+  --section-title-color: #3b434a;
+  --section-title-color-back: #3b434a17;
+
+  --progress-text-color: #3b434a;
+  --progress-background: #e6e8eb;
+
+  --resume-time-background: #eef0f2;
+  --resume-border: #82909c;
+  --resume-btn-border: var(--highlight);
+  --resume-btn-hover: var(--background);
+
+  --skill-title: #111;
+  --skill-icon-bg: #fff4df;
+
+  --contact-title-icon-bg: #fff6e4;
+  --contact-title: #777;
+  --contact-box-shadow: rgba(214, 215, 216, 0.6);
+  --contact-icon: #687683;
+  --contact-icon-border: #dde1e4;
+}
+
+body.dark {
+  --highlight: #ffbc35;
+  --highlight-alt: #ffc859;
+
+  --background: rgb(24, 26, 27);
+
+  --border: #303436;
+
+  --btn-bg: #b57800;
+  --btn-bg-hover: #f3a200;
+  --btn-bg-hover-2: #f3a200;
+
+  --text-color: rgb(189, 183, 175);
+  --text-color-alt: #e8e6e5;
+  --text-color-alt-2: #e8e6e5;
+
+  --section-title-color: #beb8b0;
+  --section-title-color-back: #beb8b017;
+
+  --progress-text-color: #beb8b0;
+  --progress-background: #252829;
+
+  --resume-time-background: #202325;
+  --resume-border: #50565a;
+  --resume-btn-border: #a76f00;
+  --resume-btn-hover: var(--text-color-alt);
+
+  --skill-title: #dddad6;
+  --skill-icon-bg: #462e00;
+
+  --contact-title-icon-bg: #432d00;
+  --contact-title: #9d9488;
+  --contact-box-shadow: rgba(45, 50, 52, 0.6);
+  --contact-icon: #9e9589;
+  --contact-icon-border: #393d40;
 }
 
 body {
   font-family: "Open Sans", sans-serif;
   color: var(--text-color);
+  background: var(--background);
   overflow-x: hidden;
 }
 
@@ -29,7 +97,7 @@ a {
 }
 
 a:hover {
-  color: #ffc85a;
+  color: var(--highlight-alt);
   text-decoration: none;
 }
 
@@ -58,7 +126,7 @@ h6 {
   right: 15px;
   bottom: 15px;
   z-index: 996;
-  background: var(--highlight);
+  background: var(--btn-bg);
   width: 40px;
   height: 40px;
   border-radius: 4px;
@@ -72,7 +140,7 @@ h6 {
 }
 
 .back-to-top:hover {
-  background: #ffc550;
+  background: var(--btn-bg-hover);
   color: var(--text-color-alt);
 }
 
@@ -126,7 +194,8 @@ h6 {
 }
 
 .navbar a,
-.navbar a:focus {
+.navbar a:focus,
+.navbar li > i {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -149,10 +218,12 @@ h6 {
 }
 
 .navbar a:hover,
+.navbar li > i:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover > a {
   color: var(--highlight);
+  cursor: pointer;
 }
 
 .navbar .dropdown ul {
@@ -165,7 +236,7 @@ h6 {
   z-index: 99;
   opacity: 0;
   visibility: hidden;
-  background: #fff;
+  background: var(--background);
   box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
   transition: 0.3s;
   border-radius: 4px;
@@ -227,7 +298,7 @@ h6 {
 * Mobile Navigation 
 */
 .mobile-nav-toggle {
-  color: #fff;
+  color: var(--background);
   font-size: 28px;
   cursor: pointer;
   display: none;
@@ -272,7 +343,7 @@ h6 {
   left: 15px;
   padding: 10px 0;
   border-radius: 10px;
-  background-color: #fff;
+  background-color: var(--background);
   overflow-y: auto;
   transition: 0.3s;
 }
@@ -303,7 +374,7 @@ h6 {
   z-index: 99;
   opacity: 1;
   visibility: visible;
-  background: #fff;
+  background: var(--background);
   box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 }
 
@@ -443,7 +514,7 @@ section {
   text-transform: uppercase;
   margin-bottom: 20px;
   padding-bottom: 0;
-  color: #3b434a;
+  color: var(--section-title-color);
   position: relative;
   z-index: 2;
 }
@@ -451,7 +522,7 @@ section {
 .section-title span {
   position: absolute;
   top: 30px;
-  color: #3b434a17;
+  color: var(--section-title-color-back);
   left: 0;
   right: 0;
   z-index: 1;
@@ -581,7 +652,7 @@ section {
   display: block;
   font-weight: 700;
   font-family: "Raleway", sans-serif;
-  color: #3b434a;
+  color: var(--progress-text-color);
 }
 
 .progress .skill .val {
@@ -590,7 +661,7 @@ section {
 }
 
 .progress-bar-wrap {
-  background: #e6e8eb;
+  background: var(--progress-background);
 }
 
 .progress-bar {
@@ -614,13 +685,13 @@ section {
   font-weight: 700;
   margin-top: 20px;
   margin-bottom: 20px;
-  color: #3b434a;
+  color: var(--section-title-color);
 }
 
 .resume .resume-item {
   padding: 0 0 20px 20px;
   margin-top: -2px;
-  border-left: 2px solid #82909c;
+  border-left: 2px solid var(--resume-border);
   position: relative;
 }
 
@@ -635,7 +706,7 @@ section {
 
 .resume .resume-item h5 {
   font-size: 16px;
-  background: #eef0f2;
+  background: var(--resume-time-background);
   padding: 5px 15px;
   display: inline-block;
   font-weight: 600;
@@ -663,25 +734,25 @@ section {
   border-radius: 50px;
   left: -9px;
   top: 0;
-  background: white;
+  background: var(--background);
   border: 2px solid var(--highlight);
 }
 
 .resume .resume-item.secondary::before {
-  border-color: #82909c;
+  border-color: var(--resume-border);
 }
 
-.btn {
+.resume .btn {
   font-size: 20px;
-  border-color: var(--highlight);
+  border-color: var(--resume-btn-border);
   color: var(--highlight);
-  transition: background-color 1s;
+  transition: 0.3s;
 }
 
-.btn:hover {
-  transition: background-color, color, border-color;
-  color: #fff;
-  background-color: var(--highlight);
+.resume .btn:hover {
+  transition: 0.3s;
+  color: var(--resume-btn-hover);
+  background-color: var(--btn-bg);
 }
 
 /*--------------------------------------------------------------
@@ -691,11 +762,11 @@ section {
   padding: 30px;
   position: relative;
   overflow: hidden;
-  background: #fff;
+  background: var(--background);
   box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
   transition: all 0.3s ease-in-out;
   text-align: center;
-  border: 1px solid #fff;
+  border: 1px solid var(--border);
 }
 
 .skills .icon {
@@ -706,7 +777,8 @@ section {
   border-radius: 50%;
   width: 72px;
   height: 72px;
-  background: #fff4df;
+  background: var(--skill-icon-bg);
+  transition: 0.3s;
 }
 
 .skills .icon i {
@@ -722,7 +794,7 @@ section {
 }
 
 .skills .title a {
-  color: #111;
+  color: var(--skill-title);
   transition: 0.3s;
 }
 
@@ -772,7 +844,7 @@ section {
 
 .testimonials .testimonial-item {
   text-align: center;
-  color: #fff;
+  color: var(--text-color-alt);
 }
 
 .testimonials .testimonial-item .testimonial-img {
@@ -786,7 +858,7 @@ section {
   font-size: 20px;
   font-weight: bold;
   margin: 10px 0 5px 0;
-  color: #fff;
+  color: var(--text-color-alt);
 }
 
 .testimonials .testimonial-item h4 {
@@ -817,7 +889,7 @@ section {
 .testimonials .testimonial-item p {
   font-style: italic;
   margin: 0 auto 15px auto;
-  color: #eee;
+  color: var(--text-color-alt-2);
   line-height: 2;
 }
 
@@ -862,7 +934,7 @@ section {
   text-transform: uppercase;
   color: var(--text-color);
   transition: all 0.3s ease-in-out;
-  border: 2px solid #fff;
+  border: 2px solid var(--border);
 }
 
 .portfolio #portfolio-flters li:hover,
@@ -897,9 +969,9 @@ section {
 
 .portfolio .portfolio-item .portfolio-info h4 {
   font-size: 18px;
-  color: #fff;
+  color: var(--background);
   font-weight: 600;
-  color: #fff;
+  color: var(--background);
   margin-bottom: 0px;
 }
 
@@ -915,7 +987,7 @@ section {
   right: 40px;
   font-size: 24px;
   top: calc(50% - 18px);
-  color: #fff;
+  color: var(--background);
   transition: 0.3s;
 }
 
@@ -958,7 +1030,7 @@ section {
   .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
-  background-color: #fff;
+  background-color: var(--background);
   opacity: 1;
   border: 1px solid var(--highlight);
 }
@@ -1012,7 +1084,7 @@ section {
 --------------------------------------------------------------*/
 .pricing .box {
   padding: 20px;
-  background: #fff;
+  background: var(--background);
   text-align: center;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
   border-radius: 5px;
@@ -1086,7 +1158,7 @@ section {
   display: inline-block;
   padding: 8px 35px;
   border-radius: 4px;
-  color: #fff;
+  color: var(--background);
   transition: none;
   font-size: 14px;
   font-weight: 400;
@@ -1096,11 +1168,11 @@ section {
 }
 
 .pricing .btn-buy:hover {
-  background: #ffc85a;
+  background: var(--highlight-alt);
 }
 
 .pricing .featured h3 {
-  color: #fff;
+  color: var(--background);
   background: var(--highlight);
 }
 
@@ -1114,7 +1186,7 @@ section {
   font-size: 14px;
   padding: 1px 0 3px 0;
   background: var(--highlight);
-  color: #fff;
+  color: var(--background);
 }
 
 /*--------------------------------------------------------------
@@ -1123,7 +1195,7 @@ section {
 .contact .info-box {
   color: var(--text-color);
   text-align: center;
-  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
+  box-shadow: 0 0 30px var(--contact-box-shadow);
   padding: 20px 0 30px 0;
 }
 
@@ -1132,12 +1204,12 @@ section {
   color: var(--highlight);
   border-radius: 50%;
   padding: 15px;
-  background: #fff6e4;
+  background: var(--contact-title-icon-bg);
 }
 
 .contact .info-box h3 {
   font-size: 20px;
-  color: #777777;
+  color: var(--contact-title);
   font-weight: 700;
   margin: 10px 0;
 }
@@ -1158,13 +1230,13 @@ section {
 .contact .social-links a {
   font-size: 18px;
   display: inline-block;
-  color: #687683;
+  color: var(--contact-icon);
   line-height: 1;
   margin: 0 8px;
   transition: 0.3s;
   padding: 14px;
   border-radius: 50px;
-  border: 1px solid #dde1e4;
+  border: 1px solid var(--contact-icon-border);
 }
 
 .contact .email a {
@@ -1174,106 +1246,9 @@ section {
 }
 
 .contact .social-links a:hover {
-  color: #fff;
-  border-color: var(--highlight);
-  background: var(--highlight);
-}
-
-.contact .php-email-form {
-  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
-  padding: 27px;
-}
-
-.contact .php-email-form .validate {
-  display: none;
-  color: red;
-  margin: 0 0 15px 0;
-  font-weight: 400;
-  font-size: 13px;
-}
-
-.contact .php-email-form .error-message {
-  display: none;
-  color: #fff;
-  background: #ed3c0d;
-  text-align: left;
-  padding: 15px;
-  font-weight: 600;
-}
-
-.contact .php-email-form .error-message br + br {
-  margin-top: 25px;
-}
-
-.contact .php-email-form .sent-message {
-  display: none;
-  color: #fff;
-  background: #18d26e;
-  text-align: center;
-  padding: 15px;
-  font-weight: 600;
-}
-
-.contact .php-email-form .loading {
-  display: none;
-  background: #fff;
-  text-align: center;
-  padding: 15px;
-}
-
-.contact .php-email-form .loading:before {
-  content: "";
-  display: inline-block;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  margin: 0 10px -6px 0;
-  border: 3px solid #18d26e;
-  border-top-color: #eee;
-  animation: animate-loading 1s linear infinite;
-}
-
-.contact .php-email-form input,
-.contact .php-email-form textarea {
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 14px;
-}
-
-.contact .php-email-form input::focus,
-.contact .php-email-form textarea::focus {
-  background-color: var(--highlight);
-}
-
-.contact .php-email-form input {
-  padding: 10px 15px;
-}
-
-.contact .php-email-form textarea {
-  padding: 12px 15px;
-}
-
-.contact .php-email-form button[type="submit"] {
-  background: var(--highlight);
-  border: 0;
-  padding: 10px 24px;
-  color: #fff;
-  transition: 0.4s;
-  border-radius: 5px;
-}
-
-.contact .php-email-form button[type="submit"]:hover {
-  background: #ffc85a;
-}
-
-@keyframes animate-loading {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+  color: var(--text-color-alt-2);
+  border-color: var(--btn-bg);
+  background: var(--btn-bg);
 }
 
 /*--------------------------------------------------------------
@@ -1283,7 +1258,7 @@ section {
   background: url("../img/footer-bg.jpg") top center no-repeat;
   background-size: cover;
   background-position: center center;
-  color: var(--background);
+  color: var(--text-color-alt-2);
   font-size: 14px;
   text-align: center;
   padding: 80px 0;
@@ -1307,7 +1282,7 @@ section {
 #footer h3 {
   font-size: 36px;
   font-weight: 700;
-  color: #fff;
+  color: var(--text-color-alt-2);
   position: relative;
   font-family: "Satisfy", serif;
   padding: 0;
@@ -1328,8 +1303,8 @@ section {
 #footer .social-links a {
   font-size: 18px;
   display: inline-block;
-  background: var(--highlight);
-  color: #fff;
+  background: var(--btn-bg);
+  color: var(--text-color-alt-2);
   line-height: 1;
   padding: 8px 0;
   margin-right: 4px;
@@ -1341,8 +1316,8 @@ section {
 }
 
 #footer .social-links a:hover {
-  background: #f3a200;
-  color: #fff;
+  background: var(--btn-bg-hover-2);
+  color: var(--text-color-alt-2);
   text-decoration: none;
 }
 

assets/js/main.js

@@ -276,4 +276,19 @@
             clickable: true,
         },
     });
+    if (localStorage.getItem("theme") == "light") {
+        toggleDarkMode();
+    }
 })();
+
+function toggleDarkMode() {
+    let dark_indicator = document.querySelector("#navbar i");
+    dark_indicator.classList.toggle("bi-moon-stars-fill");
+    dark_indicator.classList.toggle("bi-sun-fill");
+
+    document.body.classList.toggle("dark");
+
+    let theme = document.body.classList.contains("dark") ? "dark" : "light";
+    document.documentElement.style.setProperty("color-scheme", theme);
+    localStorage.setItem("theme", theme);
+}

index.html

@@ -40,7 +40,7 @@
   ======================================================== -->
 </head>
 
-<body>
+<body class="dark">
 
     <!-- ======= Header ======= -->
     <header id="header" class="fixed-top d-flex justify-content-center
@@ -54,7 +54,8 @@
                 <li><a class="nav-link scrollto" href="#skills">Skills</a></li>
                 <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
                 <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
-                <li><button onclick="toggleDarkMode()">Dark</button> </li>
+                <li><i class="dark-mode bi icon-white bi-sun-fill" onClick="toggleDarkMode(event)"></i>
+                </li>
             </ul>
             <i class="bi bi-list mobile-nav-toggle"></i>
         </nav><!-- .navbar -->