feat: update Toggle component to use 'data-checked' prop and adding theme toggle functionality, default to dark mode

src/components/Toggle/toggle.astro

@@ -1,14 +1,16 @@
 ---
+import { boolean } from 'astro:schema';
+
 export interface Props {
-    checked?: boolean;
+    'data-checked': boolean;
     name?: string;
     id: string;
 }
 
-const { checked = false, name = 'toggle', id} = Astro.props;
+const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.props;
 ---
 
-<toggle-switch data-checked={checked} data-name={name} id={id}>
+<toggle-switch data-checked={dataChecked} data-name={name} id={id}>
     <div class="toggle">
         <div class="toggle-switch"></div>
     </div>

src/pages/index.astro

@@ -10,7 +10,7 @@ import {
 } from '../components/Icons/index.ts';
 import Notification from '../components/Notifications/notification.astro';
 
-const initialChecked = false;
+const initialChecked = true;
 ---
 
 <Layout>
@@ -196,12 +196,22 @@ const initialChecked = false;
     const toggle = document.getElementById('my-toggle') as any;
     const stateLabel = document.getElementById('toggle-state');
 
-    toggle?.addEventListener('change', (e: CustomEvent) => {
+    // Défaut: thème sombre
-        const { checked, name } = e.detail;
+    if (!document.documentElement.hasAttribute('data-theme')) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+    if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
 
-        if (stateLabel) {
+    toggle?.addEventListener('change', (e: CustomEvent) => {
-            stateLabel.textContent = `State: ${checked ? 'Checked' : 'Unchecked'}`;
+      const { checked } = e.detail;
-        }
+
+      if (checked) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
+      } else {
+        document.documentElement.setAttribute('data-theme', 'light');
+        if (stateLabel) stateLabel.textContent = 'Thème : Clair';
+      }
     });
 </script>
 
@@ -211,6 +221,7 @@ const initialChecked = false;
     background-color: var(--nds-background);
     color: var(--nds-text);
   }
+  
   main {
     max-width: 900px;
     margin: 0 auto;