Adding Darkmode functionality with animations and icons

Gemfile

@@ -9,3 +9,4 @@ gem "jekyll-sitemap"
 gem "jekyll-feed"
 gem "jekyll-seo-tag"
 gem "kramdown-parser-gfm"
+gem "webrick", "~> 1.8"

Gemfile.lock

@@ -63,6 +63,7 @@ GEM
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     unicode-display_width (1.7.0)
+    webrick (1.9.1)
 
 PLATFORMS
   ruby
@@ -73,6 +74,7 @@ DEPENDENCIES
   jekyll-seo-tag
   jekyll-sitemap
   kramdown-parser-gfm
+  webrick (~> 1.8)
 
 BUNDLED WITH
    2.1.4

_includes/head.html

@@ -14,7 +14,25 @@
   <link rel="stylesheet" href="{{ site.github.url }}/assets/css/style.css">
   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
 
-  <!-- <script type="text/javascript" src="{{ site.github.url }}/assets/js/script.js" async></script> -->
+  <script type="text/javascript" src="{{ site.github.url }}/assets/js/script.js" defer></script>
+
+  <!-- Inline SVG sprite for icons -->
+  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol id="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="4"/>
+      <path d="M12 2v2"/>
+      <path d="M12 20v2"/>
+      <path d="m4.93 4.93 1.41 1.41"/>
+      <path d="m17.66 17.66 1.41 1.41"/>
+      <path d="M2 12h2"/>
+      <path d="M20 12h2"/>
+      <path d="m6.34 17.66-1.41 1.41"/>
+      <path d="m19.07 4.93-1.41 1.41"/>
+    </symbol>
+    <symbol id="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
+    </symbol>
+  </svg>
 
   <!-- Use Atom -->
   {% feed_meta %}

_includes/header.html

@@ -14,6 +14,13 @@
         {% endif %}
       {% endfor %}
     </nav>
+    <div class="Header-toggle">
+      <button id="theme-toggle" aria-label="Alternar tema" title="Alternar tema">
+        <span class="theme-icon" aria-hidden="true">
+          <svg class="icon"><use href="#sun"></use></svg>
+        </span>
+      </button>
+    </div>
   </div>
   <div class="Header-border">
     ==============================================================================================================================================================

assets/css/_footer.scss

@@ -13,7 +13,7 @@
     justify-content: space-between;
 
     a {
-      color: #333;
+      color: var(--text, #fff);
       opacity: 0.4;
 
       &:hover {

assets/css/_global.scss

@@ -1,9 +1,39 @@
+:root {
+  --bg: #{$background-color};
+  --text: #{$font-color};
+  --primary: #{$primary-color};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111;
+    --text: #eaeaea;
+    --primary: #ffb84d;
+  }
+}
+
+*, *::before, *::after {
+  transition: color .4s ease, background-color .4s ease, border-color .4s ease, stroke .4s ease, fill .4s ease;
+}
+
+html.dark {
+  --bg: #0f0f0f;
+  --text: #e9e9e9;
+  --primary: #ffb84d;
+}
+
+html.light {
+  --bg: #ffffff;
+  --text: #222222;
+  --primary: #{$primary-color};
+}
+
 html, body {
-  font-family: $body-font;
+  font-family: #{$body-font}, monospace;
   font-size: 16px;
   line-height: 1.5;
-  background-color: $background-color;
-  color: $font-color;
+  background-color: var(--bg, #{$background-color});
+  color: var(--text, #{$font-color});
 
   @media (max-width: $large-screen) {
     font-size: 14px;

assets/css/_header.scss

@@ -31,7 +31,7 @@
     }
 
     a {
-      color: #333;
+      color: var(--text, #fff);
       opacity: 0.4;
       margin-left: 1.5rem;
 
@@ -41,4 +41,46 @@
       }
     }
   }
+
+  &-toggle {
+    margin-left: 1rem;
+
+    button {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 1.4rem;
+      color: var(--text, #333);
+      display: inline-flex;
+      align-items: center;
+      padding: 0.25rem 0.5rem;
+      transition: color .18s ease, opacity .18s ease;
+
+      &:hover,
+      &:focus {
+        opacity: 0.9;
+        outline: none;
+      }
+
+      .theme-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+          width: 20px;
+          height: 20px;
+          color: var(--text, #333);
+          stroke: currentColor;
+          fill: none;
+          transition: transform .4s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
+          transform-origin: 50% 50%;
+        }
+
+        &.anim svg {
+          transform: rotate(22deg) scale(1.12);
+        }
+      }
+    }
+  }
 }

assets/js/script.js

@@ -1 +1,74 @@
-// Place JS here
+;(function () {
+	const STORAGE_KEY = 'poabitdevs-theme';
+	const darkClass = 'dark';
+	const btn = document.getElementById('theme-toggle');
+
+	if (!btn) return;
+
+	function systemPrefersDark() {
+		return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+	}
+
+	function applyTheme(isDark, explicit = false) {
+		const root = document.documentElement;
+		if (explicit) {
+			if (isDark) {
+				root.classList.add('dark');
+				root.classList.remove('light');
+			} else {
+				root.classList.add('light');
+				root.classList.remove('dark');
+			}
+		} else {
+			if (isDark) root.classList.add(darkClass);
+			else root.classList.remove(darkClass);
+		}
+
+		const use = btn.querySelector('.theme-icon use');
+		if (use) {
+			try {
+				use.setAttribute('href', '#' + (isDark ? 'moon' : 'sun'));
+			} catch (e) {
+				use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + (isDark ? 'moon' : 'sun'));
+			}
+		}
+
+		btn.setAttribute('aria-pressed', String(isDark));
+	}
+
+	function loadTheme() {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored === 'dark') return { isDark: true, explicit: true };
+		if (stored === 'light') return { isDark: false, explicit: true };
+		return { isDark: systemPrefersDark(), explicit: false };
+	}
+
+	const initial = loadTheme();
+	applyTheme(initial.isDark, initial.explicit);
+
+	btn.addEventListener('click', () => {
+		const isDark = document.documentElement.classList.toggle(darkClass);
+		if (isDark) {
+			document.documentElement.classList.remove('light');
+			document.documentElement.classList.add('dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+			document.documentElement.classList.add('light');
+		}
+		localStorage.setItem(STORAGE_KEY, isDark ? 'dark' : 'light');
+		applyTheme(isDark);
+
+		const icon = btn.querySelector('.theme-icon');
+		if (icon) {
+			icon.classList.add('anim');
+			setTimeout(() => icon.classList.remove('anim'), 320);
+		}
+	});
+
+	if (window.matchMedia) {
+		const mq = window.matchMedia('(prefers-color-scheme: dark)');
+		mq.addEventListener && mq.addEventListener('change', (e) => {
+			if (!localStorage.getItem(STORAGE_KEY)) applyTheme(e.matches);
+		});
+	}
+})();