From 9ed6c5642aae46aad7387fb4fa6093d78b984388 Mon Sep 17 00:00:00 2001
From: Chris W <cawatson1993@gmail.com>
Date: Tue, 17 Oct 2023 13:57:25 -0600
Subject: [PATCH] light/dark logo

---
 public/toggle-theme.js      |  2 ++
 src/components/Header.astro | 11 +++++++++++
 tailwind.config.cjs         |  1 +
 3 files changed, 14 insertions(+)

diff --git a/public/toggle-theme.js b/public/toggle-theme.js
index 23ad32e..3c99f9e 100644
--- a/public/toggle-theme.js
+++ b/public/toggle-theme.js
@@ -24,6 +24,8 @@ function setPreference() {
 }
 
 function reflectPreference() {
+  document.firstElementChild.classList.remove("light", "dark");
+  document.firstElementChild.classList.add(themeValue);
   document.firstElementChild.setAttribute("data-theme", themeValue);
 
   document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 0aef3c1..696fb0f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,6 +6,9 @@ import LinkButton from "./LinkButton.astro";
 import logoPNG from "/assets/logo.png";
 import logoSVG from "/assets/logo.svg";
 
+import logoLightPNG from "/assets/logo-light.png";
+import logoLightSVG from "/assets/logo-light.svg";
+
 export interface Props {
   activeNav?: "posts" | "tags" | "about" | "search";
 }
@@ -25,6 +28,14 @@ const { activeNav } = Astro.props;
               alt="AstroPaper Logo"
               width={LOGO_IMAGE.width}
               height={LOGO_IMAGE.height}
+              class="hidden dark:block"
+            />
+            <img
+              src={LOGO_IMAGE.svg ? logoLightSVG : logoLightPNG}
+              alt="AstroPaper Logo"
+              width={LOGO_IMAGE.width}
+              height={LOGO_IMAGE.height}
+              class="block dark:hidden"
             />
           ) : (
             SITE.title
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 38b212c..bf26d34 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -10,6 +10,7 @@ function withOpacity(variableName) {
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  darkMode: "class",
   theme: {
     // Remove the following screen breakpoint or add other breakpoints
     // if one breakpoint is not enough for you