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

src/components/Icons/code/svgs/code-16.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.22222 5.77778L3 8L5.22222 10.2222M10.7778 5.77778L13 8L10.7778 10.2222M9.11111 3.55556L6.88889 12.4444" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/code/svgs/code-24.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7 8L3 12L7 16M17 8L21 12L17 16M14 4L10 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/code/svgs/code-32.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.77778 10.2222L3 16L8.77778 21.7778M23.2222 10.2222L29 16L23.2222 21.7778M18.8889 4.44444L13.1111 27.5556" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/help/svgs/help-16.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" stroke="currentColor"/>
 <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.5"/>
 <path d="M9.5 6.5L11.5 4.5M4.5 11.5L6.5 9.5M6.5 6.5L4.5 4.5M11.5 11.5L9.5 9.5" stroke="currentColor"/>

src/components/Icons/help/svgs/help-24.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5"/>
 <path d="M12 15.6C13.9882 15.6 15.6 13.9882 15.6 12C15.6 10.0118 13.9882 8.4 12 8.4C10.0118 8.4 8.39999 10.0118 8.39999 12C8.39999 13.9882 10.0118 15.6 12 15.6Z" stroke="currentColor" stroke-width="1.5"/>
 <path d="M14.7 9.3L18.3 5.7M5.7 18.3L9.3 14.7M9.3 9.3L5.7 5.7M18.3 18.3L14.7 14.7" stroke="currentColor" stroke-width="1.5"/>

src/components/Icons/help/svgs/help-32.svg

@@ -1,5 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z" stroke="currentColor"olor" stroke-width="1.5"/>
+<path d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z" stroke="currentColor" stroke-width="1.5"/>
-<path d="M16 21.2C18.8719 21.2 21.2 18.8719 21.2 16C21.2 13.1281 18.8719 10.8 16 10.8C13.1281 10.8 10.8 13.1281 10.8 16C10.8 18.8719 13.1281 21.2 16 21.2Z" stroke="currentColor"olor" stroke-width="1.5"/>
+<path d="M16 21.2C18.8719 21.2 21.2 18.8719 21.2 16C21.2 13.1281 18.8719 10.8 16 10.8C13.1281 10.8 10.8 13.1281 10.8 16C10.8 18.8719 13.1281 21.2 16 21.2Z" stroke="currentColor" stroke-width="1.5"/>
-<path d="M19.9 12.1L25.1 6.89999M6.89999 25.1L12.1 19.9M12.1 12.1L6.89999 6.89999M25.1 25.1L19.9 19.9" stroke="currentColor"olor" stroke-width="1.5"/>
+<path d="M19.9 12.1L25.1 6.89999M6.89999 25.1L12.1 19.9M12.1 12.1L6.89999 6.89999M25.1 25.1L19.9 19.9" stroke="currentColor" stroke-width="1.5"/>
-</svg>

src/components/Icons/link/svgs/link-16.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.57143 4.57143L9.71429 3.42857C10.2857 2.85714 11.4286 2.85714 12 3.42857L12.5714 4C13.1429 4.57143 13.1429 5.71429 12.5714 6.28571L9.71429 9.14286C9.14286 9.71429 8 9.71429 7.42857 9.14286M7.42857 11.4286L6.28571 12.5714C5.71429 13.1429 4.57143 13.1429 4 12.5714L3.42857 12C2.85714 11.4286 2.85714 10.2857 3.42857 9.71429L6.28571 6.85714C6.85714 6.28571 8 6.28571 8.57143 6.85714" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/link/svgs/link-24.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.0286 5.82857L15.0857 3.77143C16.1143 2.74286 18.1714 2.74286 19.2 3.77143L20.2286 4.8C21.2571 5.82857 21.2571 7.88571 20.2286 8.91429L15.0857 14.0571C14.0571 15.0857 12 15.0857 10.9714 14.0571M10.9714 18.1714L8.91429 20.2286C7.88571 21.2571 5.82857 21.2571 4.8 20.2286L3.77143 19.2C2.74286 18.1714 2.74286 16.1143 3.77143 15.0857L8.91429 9.94286C9.94286 8.91429 12 8.91429 13.0286 9.94286" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/link/svgs/link-32.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.4857 7.08571L20.4571 4.11429C21.9429 2.62857 24.9143 2.62857 26.4 4.11429L27.8857 5.6C29.3714 7.08571 29.3714 10.0571 27.8857 11.5429L20.4571 18.9714C18.9714 20.4571 16 20.4571 14.5143 18.9714M14.5143 24.9143L11.5429 27.8857C10.0571 29.3714 7.08571 29.3714 5.6 27.8857L4.11429 26.4C2.62857 24.9143 2.62857 21.9429 4.11429 20.4571L11.5429 13.0286C13.0286 11.5429 16 11.5429 17.4857 13.0286" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/upload/svgs/upload-16.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 6.66667V12.6667M6 8.66667L8 6.66667L10 8.66667M11.6667 10C12.6793 10 13.3333 9.17933 13.3333 8.16667C13.3333 7.76575 13.2018 7.37589 12.9591 7.05681C12.7164 6.73772 12.3757 6.50701 11.9893 6.4C11.9299 5.65231 11.62 4.94651 11.1098 4.39673C10.5996 3.84695 9.91885 3.48531 9.17767 3.37029C8.43649 3.25526 7.67817 3.39357 7.02533 3.76286C6.37248 4.13215 5.86326 4.71082 5.58 5.40533C4.98362 5.24002 4.34599 5.31838 3.80738 5.62319C3.26878 5.928 2.87332 6.43428 2.708 7.03067C2.54268 7.62705 2.62105 8.26468 2.92586 8.80328C3.23067 9.34189 3.73695 9.73735 4.33333 9.90267" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/upload/svgs/upload-24.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 10V19M9 13L12 10L15 13M17.5 15C19.019 15 20 13.769 20 12.25C19.9999 11.6486 19.8028 11.0638 19.4387 10.5852C19.0745 10.1066 18.5636 9.76051 17.984 9.6C17.8948 8.47846 17.43 7.41977 16.6647 6.59509C15.8994 5.77042 14.8783 5.22796 13.7665 5.05543C12.6547 4.88289 11.5173 5.09036 10.538 5.64429C9.55872 6.19822 8.79489 7.06624 8.37 8.108C7.47543 7.86002 6.51898 7.97757 5.71107 8.43478C4.90317 8.892 4.30998 9.65143 4.062 10.546C3.81402 11.4406 3.93157 12.397 4.38878 13.2049C4.846 14.0128 5.60543 14.606 6.5 14.854" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Icons/upload/svgs/upload-32.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16 13.3333V25.3333M12 17.3333L16 13.3333L20 17.3333M23.3333 20C25.3587 20 26.6667 18.3587 26.6667 16.3333C26.6666 15.5315 26.4037 14.7518 25.9182 14.1136C25.4327 13.4754 24.7514 13.014 23.9787 12.8C23.8598 11.3046 23.24 9.89302 22.2196 8.79346C21.1992 7.69389 19.8377 6.97062 18.3553 6.74057C16.873 6.51052 15.3563 6.78714 14.0507 7.52572C12.745 8.26429 11.7265 9.42165 11.16 10.8107C9.96723 10.48 8.69197 10.6368 7.61477 11.2464C6.53756 11.856 5.74664 12.8686 5.416 14.0613C5.08536 15.2541 5.24209 16.5294 5.85171 17.6066C6.46133 18.6838 7.4739 19.4747 8.66667 19.8053" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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;