restart portfolio

resources/js/app.js

@@ -0,0 +1,29 @@
+import '../css/app.css'
+import Alpine from 'alpinejs'
+
+window.Alpine = Alpine
+
+Alpine.start()
+
+
+
+if (!localStorage.theme) localStorage.theme = 'systeme';
+
+// si le theme est systeme on regarde si le systeme est en dark ou light et on met une class dark ou light sur le html
+if (localStorage.theme === 'systeme') {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+// si le theme est light on met la class light sur le html
+if (localStorage.theme === 'light') {
+  document.documentElement.classList.remove('dark')
+}
+
+// si le theme est dark on met la class dark sur le html
+if (localStorage.theme === 'dark') {
+  document.documentElement.classList.add('dark')
+}  

resources/js/compte.js

@@ -1 +0,0 @@
-import '../css/compte.css'

resources/js/form.js

@@ -1 +0,0 @@
-import '../css/form.css'

resources/js/index.js

@@ -1,51 +0,0 @@
-import '../css/index.css'
-
-const toggleBtn = document.getElementById("toggle-btn");
-const body = document.querySelector("body");
-const text = document.getElementById("text");
-const mini_nav = document.getElementById("mini-nav");
-const mini_nav_depli = document.getElementById("nav");
-
-let darkmode = localStorage.getItem("dark-mode");
-
-const enableDarkMode=() =>{
-    body.classList.add("dark-mode-theme");
-    mini_nav.classList.add("nav-dark");
-    mini_nav_depli.classList.add("nav-dark");
-    mini_nav.classList.remove("nav-light");
-    mini_nav_depli.classList.remove("nav-light");
-
-    toggleBtn.classList.add("dark-mode-toggle");
-    toggleBtn.style.color = "rgb(177, 177, 177)";
-
-    text.innerHTML="sombre";
-    localStorage.setItem("dark-mode" , "enabled")
-}
-
-const disableDarkMode= () =>{
-    body.classList.remove("dark-mode-theme");
-    mini_nav.classList.remove("nav-dark");
-    mini_nav_depli.classList.remove("nav-dark");
-    mini_nav.classList.add("nav-light");
-    mini_nav_depli.classList.add("nav-light");
-
-    toggleBtn.classList.remove("dark-mode-toggle");
-    toggleBtn.style.color = "rgb(83, 83, 83)";
-
-    text.innerHTML="claire";
-    localStorage.setItem("dark-mode" , "disabled")
-}
-
-
-if(darkmode === "enabled"){
-    enableDarkMode()
-}
-
-toggleBtn.onclick = function(){
-    darkmode = localStorage.getItem("dark-mode");
-    if(darkmode === "enabled"){
-        disableDarkMode()
-    } else {
-        enableDarkMode()
-    }
-}