light/dark logo

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);

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

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