Added Dark and Light mode and text animation (#3)

* Added Dark and Light mode and text animation * Revert to bird logo for twitter and fix up some blog titles --------- Co-authored-by: vr-varad <varadgupta21#gmail.com> Co-authored-by: sabaimran <narmiabas@gmail.com>
khoj-ai · Jun 18, 2024 · fc7ab10 · fc7ab10
1 parent 311aad2
commit fc7ab10
Show file tree

Hide file tree

Showing 10 changed files with 827 additions and 1,044 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -14,12 +14,12 @@ import { SITE_TITLE } from '../consts';
 		<div class="social-links">
 			<a href="https://twitter.com/khoj_ai" target="_blank">
 				<span class="sr-only">Follow Khoj on Twitter</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M9.5,6.8l5.8-6.2h-1.4l-5,5.4l-4-5.4H0l6.2,8.2L0,15.5h1.4l5.4-5.9l4.4,5.9H16L9.5,6.8z M2.1,1.6h2.2l9.7,12.9h-2.2L2.1,1.6z"
-					></path></svg
-				>
+				<img
+					class="share-button"
+					src="/icons/twitter.svg"
+					width={32}
+					height={32}
+				/>
 			</a>
 			<a href="https://github.com/khoj-ai/khoj" target="_blank">
 				<span class="sr-only">Go to Khoj's GitHub repo</span>

diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
@@ -45,6 +45,15 @@
 
       const isDark = element.classList.contains("dark");
       localStorage.setItem("theme", isDark ? "dark" : "light");
+
+      const rootStyles = getComputedStyle(document.documentElement);
+      const lightBackgroundColor = rootStyles.getPropertyValue('--background-color-light').trim();
+      const darkBackgroundColor = rootStyles.getPropertyValue('--background-color-dark').trim();
+      if (isDark) {
+          document.body.style.backgroundColor = darkBackgroundColor;
+      } else {
+          document.body.style.backgroundColor = lightBackgroundColor;
+      }
     }
 
     document.getElementById("themeToggle").addEventListener("click", handleToggleClick);