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/ */