add dark mode

sdgniser · Dec 20, 2024 · f5708e2 · f5708e2
1 parent f4580b3
commit f5708e2
Show file tree

Hide file tree

Showing 11 changed files with 468 additions and 39 deletions.
diff --git a/images/n_logo.svg b/images/n_logo.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 
 <head>
     <meta name="generator" content="Coding Club">
@@ -15,6 +15,7 @@
 </head>
 
 <body id="body">
+    <a id="theme-switch">☀️</a>
     <!-- navigation -->
     <nav>
         <svg id="nav-open" viewbox="0 0 20 20">
@@ -28,7 +29,7 @@
             </path>
         </svg>
         <div class="logo logo-1">
-            <img src="images/n_logo.png" alt="niser logo" id="niser-logo">
+            <img src="images/n_logo.svg" alt="niser logo" id="niser-logo">
         </div>
         <ul>
             <li><a href="#about" class="scroll">about&nbsp;us</a></li>
@@ -37,6 +38,8 @@
             <li><a href="#team" class="scroll">team</a></li>
             <!-- <li><a href="#news" class="scroll">news</a></li> -->
             <li><a href="#contact" class="scroll">contact&nbsp;us</a></li>
+            <!-- <li><a id="theme-switch">☀️</a></li> -->
+            <!-- <li><a id="theme-switch">🌙</a></li> -->
         </ul>
         <div class="logo logo-2">
             <img src="images/cc_logo.png" alt="cc logo">

diff --git a/js/app.js b/js/app.js
@@ -5,6 +5,31 @@ const elem = selector => {
 const today = new Date()
 document.getElementById('year').innerHTML = today.getFullYear()
 
+$('#theme-switch').click(function () {
+  darkModeSwitcher()
+})
+
+var darkMode = false;
+document.documentElement.setAttribute('data-theme', ['dark', 'light'][darkMode]);
+if (darkMode) {
+  $('#theme-switch').html('🌙')
+} else {
+  $('#theme-switch').html('☀️')
+}
+
+function darkModeSwitcher () {
+
+    document.documentElement.setAttribute('data-theme', ['dark', 'light'][+darkMode]);
+    darkMode = !darkMode;
+
+    if (darkMode) {
+      $('#theme-switch').html('🌙')
+    } else {
+      $('#theme-switch').html('☀️')
+    }
+
+}
+
 // PROJECTS SECTION --------------------
 $(function () {
   $.getJSON('data/projects.json', function (data) {
@@ -282,11 +307,11 @@ $(window).scroll(function () {
   // NAVIGATION
   if (wScroll > introHeight) {
     nav.classList.add('alone')
-    $('#niser-logo').attr("src", "images/n_logo_color.png")
+    // $('#niser-logo').attr("src", "images/n_logo_color.png")
   }
   if (wScroll < introHeight) {
     nav.classList.remove('alone')
-    $('#niser-logo').attr("src", "images/n_logo.png")
+    // $('#niser-logo').attr("src", "images/n_logo.png")
   }
 
   // LANDING ELEMENTS

diff --git a/style/main.min.css b/style/main.min.css
diff --git a/style/main.scss b/style/main.scss
@@ -5,7 +5,10 @@ $bold : 'Circular Std',
 sans-serif;
 $yellow: #F7941D;
 $yellow-dark: #e48209;
-$yellow-tr: #f7951d9e;
+// $yellow-tr: #f7951d9e;
+// $yellow-tr: #b46c13;
+$yellow-tr: #FABD73;
+$dark: #414a4d;
 
 %is-not-showingX {
   transform: translateX(20px);
@@ -36,6 +39,25 @@ $yellow-tr: #f7951d9e;
   cursor: default;
 }
 
+html {
+  scroll-behavior: smooth;
+  --section-title: #414a4d;
+  --text-color: #89807A;
+  --about-text: #272727;
+}
+
+html[data-theme='dark'] {
+  // background: #0a061a;
+  --d2: #0f091f;
+  background-color: #080618;
+  opacity: 1;
+  background-image:  linear-gradient(var(--d2) 3.2px, transparent 3.2px), linear-gradient(90deg, var(--d2) 3.2px, transparent 3.2px), linear-gradient(var(--d2) 1.6px, transparent 1.6px), linear-gradient(90deg, var(--d2) 1.6px, #080618 1.6px);
+  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
+  background-position: -3.2px -3.2px, -3.2px -3.2px, -1.6px -1.6px, -1.6px -1.6px;--section-title: #fff;
+  --text-color: #ccc;
+  --about-text: #eee;
+}
+
 @import 'sections/nav';
 @import 'sections/intro';
 @import 'sections/about';
@@ -45,14 +67,10 @@ $yellow-tr: #f7951d9e;
 @import 'sections/news';
 @import 'sections/footer';
 
-html {
-  scroll-behavior: smooth;
-}
-
 body {
   font-family: 'Poppins', "Roboto Slab", serif;
   font-size: 1.3125rem;
-  color: #89807A;
+  color: var(--text-color);
   font-weight: 400;
   overflow-x: hidden;
 }
@@ -62,6 +80,14 @@ body {
   color: #fff;
 }
 
+#theme-switch {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  font-size: 3rem;
+  z-index: 999;
+}
+
 .text {
   font-size: 2rem;
   color: #fff;
@@ -77,7 +103,7 @@ a {
   font-family: $bold;
   line-height: 1;
   font-size: 3rem;
-  color: #414A4D;
+  color: var(--section-title);
   text-transform: uppercase;
   position: relative;
   margin-bottom: 30px;

diff --git a/style/sections/_about.scss b/style/sections/_about.scss
@@ -61,6 +61,6 @@
         position: relative;
     }
     .section--about .section__content p {
-        color: #272727
+        color: var(--about-text)
     }
 }
diff --git a/style/sections/_blogs.scss b/style/sections/_blogs.scss
@@ -1,17 +1,56 @@
+html {
+    --dark-back: #111a1d;
+    --dark-back-text-title: rgb(247, 148, 29);
+    --dark-back-text: #eee;
+    --dark-btn-hover: #e48209;
+  }
+
+html[data-theme='dark'] {
+    // --dark-back-text: #111a1d;
+    // --dark-back: #F7941D;
+    // --dark-back-text-title: #111a1d;
+    // --dark-btn-hover: #000;
+    --dark-back-text: #c5d3d8;
+    --dark-back: #F7941D;
+    --dark-back-text-title: #ffffff;
+    --dark-btn-hover: #000;
+  }
+
 .section--blogs {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: #111a1d;
+    background: var(--dark-back);
     padding: 3rem 0;
-    color: #eee;
+    color: var(--dark-back-text);
 
     .section__title {
-        color: $yellow;
+        color: var(--dark-back-text-title);
 
     }
 }
 
+html[data-theme='dark'] .section--blogs, html[data-theme='dark'] footer {
+        --s: 48px; /* control the size*/
+        // --c1: #f7941d;
+        // --c2: #ee8c15;
+        --c1: #080618;
+        --c2: #0f0c28;
+
+        --c:var(--c1) 0 25%,#0000 0;
+        --p:0 0/calc(3*var(--s)) calc(2*var(--s));
+        background:
+          conic-gradient(from -45deg at 75% 62.5%,var(--c)) var(--p),
+          conic-gradient(from 135deg at 25% 37.5%,var(--c)) var(--p),
+          repeating-conic-gradient(from 90deg,var(--c),var(--c2) 0 50%)
+           0 0/var(--s) var(--s);
+}
+
+html[data-theme='dark'] footer {
+    --c1: #f7941d;
+        --c2: #ee8c15;
+}
+
 .blogs {
     width: 80%;
     margin: 3rem 0;
@@ -42,7 +81,7 @@
 }
 
 .blog-date {
-    color: $yellow;
+    color: var(--dark-back-text-title);
 }
 
 .blog-abstract {
@@ -51,16 +90,16 @@
 
 .blog-author {
     margin-top: 5px;
-    color: $yellow;
+    color: var(--dark-back-text-title);
 }
 
 .blog-btn {
-    background: $yellow;
+    background: var(--dark-back-text-title);
     padding: 3px 8px;
-    color: #000;
+    color: var(--dark-back);
     transition: background .1s ease-in-out;
     &:hover {
-        background: $yellow-dark;
+        background: var(--dark-btn-hover);
     }
 }
 

diff --git a/style/sections/_footer.scss b/style/sections/_footer.scss
@@ -1,15 +1,27 @@
+html {
+    --footer-text: #D1C9C1;
+    // --footer-back: #111a1d;
+    --footer-social: #a49b92;
+}
+
+html[data-theme='dark'] {
+    --footer-text: #111a1d;
+    // --footer-back: #222;
+    --footer-social: #111a1d;
+}
+
 footer {
     text-align: center;
     padding: 30px 0;
-    color: #D1C9C1;
+    color: var(--footer-text);
     display: flex;
     flex-direction: column;
     justify-content: center;
     background: #111a1d;
     align-items: center ;
 
     h2.section__title {
-        color: $yellow;
+        color: var(--footer-text);
     }
     p {
         justify-self: end;
@@ -27,12 +39,12 @@ footer {
     svg {
         width: 30px;
         height: 30px;
-        fill: #a49b92;
+        fill: var(--footer-social);
         transition: fill .1s ease-in-out;
         cursor: pointer;
     }
     a:hover svg{
-        fill: $yellow;
+        fill: var(--dark-btn-hover);
     }
 }
 
diff --git a/style/sections/_nav.scss b/style/sections/_nav.scss
@@ -1,3 +1,17 @@
+html {
+    --nav-text:#ffffff82;
+    --nav-text-alone:#181818;
+    --nav-back-alone:#fff;
+    --nav-logo-fill: #0066ff;
+}
+
+html[data-theme='dark'] {
+    --nav-text:#ffffff82;
+    --nav-text-alone:#eee;
+    --nav-back-alone:#0f091f;
+    --nav-logo-fill:#fff;
+}
+
 nav {
     position: fixed;
     top: 0;
@@ -11,8 +25,8 @@ nav {
     display: flex;
     justify-content: space-evenly;
     &.alone {
-        color: #181818;
-        background: #fff;
+        color: var(--nav-text-alone);
+        background:var(--nav-back-alone);
         box-shadow: 0 3px 20px rgba(0, 0, 0, 0.322);
     }
     svg {
@@ -80,6 +94,7 @@ nav {
         height: 100%;
     }
     &.logo-1 {
+        fill: #eee;
         padding: 10px;
     }
 }
@@ -88,7 +103,7 @@ nav ul {
     display: flex;
     list-style: none;
     justify-content: space-around;
-    max-width: 450px;
+    // max-width: 450px;
     margin: auto 0;
     transition: .5s ease-in
 }

diff --git a/style/sections/_projects.scss b/style/sections/_projects.scss
@@ -1,3 +1,13 @@
+html {
+    --carousel-back: #eee;
+    --carousel-text: #222;
+}
+
+html[data-theme='dark'] {
+    --carousel-back: #1c182e;
+    --carousel-text: #eee;
+}
+
 .section--projects {
     text-align: center;
     padding: 6rem 1rem;
@@ -74,7 +84,7 @@
     .carousel__caption {
         position: relative;
         z-index: 10;
-        background: #eee;
+        background: var(--carousel-back);
         font-family: $bold;
         line-height: 1.5;
         font-weight: 700;
@@ -85,7 +95,7 @@
 
 
 .carousel__title {
-    color: #222;
+    color: var(--carousel-text);
     font-size: 1.5rem;
 }
 
@@ -107,7 +117,7 @@
 
 #controls-container {
     font-size: 2rem;
-    color: #222;
+    color: var(--carousel-text);
     display: flex;
     button {
         all: unset;