New Chnages to Switch Theme

src/components/ThemeSwitcher.astro

@@ -11,6 +11,7 @@ interface Props extends HTMLAttributes<"div"> {
   darkBgClass?: string[];
   lightBgClass?: string[];
   rootExtraClass?: string;
+  onChange?: (mode: "light" | "dark" | "system") => void;
 }
 
 const {
@@ -22,6 +23,7 @@ const {
   lightBgClass = [],
   rootExtraClass = "",
   class: className,
+  onChange,
   ...rest
 }: Props = Astro.props;
 
@@ -91,7 +93,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
 }
 </style>
 
-<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass }}>
+<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass, onChange }}>
 (() => {
   const host = document.getElementById(containerId);
   if (!host) return;
@@ -137,6 +139,8 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
 
     localStorage.setItem(storageKey, mode);
     reflectUI(mode);
+
+    onChange?.(mode);
   }
 
   // Init