Update ToggleTheme component to switch between light and dark themes

src/components/ToggleTheme.astro

@@ -4,12 +4,11 @@
 
 <label class="cursor-pointer grid place-items-center">
   <input type="checkbox" id="themeToggle" value="synthwave" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
-  <svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
-  <svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+  <svg id="svgLight" class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
+  <svg id="svgDark" class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
 </label>
 
 <script>
-
   const htmlElement = document.documentElement;
   let dataTheme = localStorage.getItem("data-theme");
   if (!dataTheme) {
@@ -26,12 +25,20 @@
     return 'light';
   })();
 
+  const svgLight = document.getElementById('svgLight');
+  const svgDark = document.getElementById('svgDark');
+
   if (theme === 'light') {
     htmlElement.classList.remove('dark');
     htmlElement.classList.add('light');
   } else {
     htmlElement.classList.remove('light');
     htmlElement.classList.add('dark');
+    svgDark?.classList.add('col-start-1')
+    svgDark?.classList.remove('col-start-2')
+    svgLight?.classList.add('col-start-2')
+    svgLight?.classList.remove('col-start-1')
+
   }
 
   window.localStorage.setItem('theme', theme || '');