From 1f99fc17f5d4effb28bc3cfbdcd9894e12630ca6 Mon Sep 17 00:00:00 2001
From: Guoqi Sun <hi@guoqi.dev>
Date: Tue, 4 Feb 2025 14:49:56 +0800
Subject: [PATCH] fix: fix dark mode switching bug

---
 src/components/react/theme-toggle.tsx | 1 +
 src/styles/globals.css                | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
index 1aac37a..5b6719c 100644
--- a/src/components/react/theme-toggle.tsx
+++ b/src/components/react/theme-toggle.tsx
@@ -31,6 +31,7 @@ export function ThemeToggle() {
       onClick={handleToggleClick}
       aria-label="Toggle theme"
       title="Toggle theme"
+      className="cursor-pointer"
     >
       <Sun className="dark:hidden" />
       <Moon className="hidden dark:block" />
diff --git a/src/styles/globals.css b/src/styles/globals.css
index dcb243f..545b8cb 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 
 /* Theme toggle effect */
 /* https://theme-toggle.rdsx.dev/ */