feature system preference option added

Author: ronak232

dark-mode-app/src/App.jsx

@@ -5,10 +5,15 @@ import { Toggle } from "./Components/Toggle/Toggle";
 function App() {
   const [isDark, setIsDark] = useState(true);
 
+  let themePreference = window.matchMedia(
+    "(prefers-color-scheme: dark)"
+  )?.matches;
+
   const body = document.body;
-  if (isDark) {
+
+  if (isDark && themePreference) {
     body.setAttribute("data-theme", "dark");
-    localStorage.getItem("theme", "dark");
+    localStorage.getItem("theme");
   } else {
     body.setAttribute("data-theme", "light");
   }
@@ -18,14 +23,14 @@ function App() {
   };
 
   useEffect(() => {
-    localStorage.setItem("theme", isDark ? "dark" : "light");
-  }, [isDark]);
+    localStorage.setItem("theme", themePreference ? "dark" : "light");
+  }, [themePreference]);
 
   return (
     <>
       <Toggle isChecked={isDark} handleChange={toggleDarkMode} />
       <div className="container">
-        <h1>{isDark ? "Dark Mode 🌝" : "Light Mode 🌞"}</h1>
+        <h1>{isDark ? "Dark Mode 🌑" : "Light Mode 🌞"}</h1>
       </div>
     </>
   );

dark-mode-app/src/Components/Toggle/Toggle.jsx

@@ -11,7 +11,7 @@ export const Toggle = ({ handleChange, isChecked }) => {
         onChange={handleChange}
         checked={isChecked}
       />
-      <label htmlFor="check">Dark Mode</label>
+      <label htmlFor="check"></label>
     </div>
   );
 };

dark-mode-app/src/Components/Toggle/toggle.css

@@ -35,7 +35,7 @@
   border-radius: 10px;
   margin-right: 10px;
   position: absolute;
-  left: 0px;
+  left: 10px;
 }
 
 .toggle-container .toggle:checked + label {