simple-dark-light-toggle 1.0.0

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "simple-dark-light-toggle",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "A React component to toggle between light and dark modes, styled with Tailwind CSS.",
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  }
+}

package/src/DarkLightToggle.js

@@ -0,0 +1,44 @@
+"use client"
+import { useState, useEffect } from 'react';
+
+const DarkLightToggle = () => {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    useEffect(() => {
+        if (localStorage.getItem('theme') === 'dark') {
+            setIsDarkMode(true);
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            setIsDarkMode(false);
+            document.documentElement.classList.remove('dark');
+        }
+    }, []);
+
+    const toggleTheme = () => {
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        }
+        else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        setIsDarkMode(!isDarkMode);
+    };
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white"
+        >
+            {isDarkMode ? (
+                <span>🌙</span>
+            ) : (
+                <span>🌞</span>
+            )}
+        </button>
+    );
+};
+
+export default DarkLightToggle;

package/src/index.js

@@ -0,0 +1 @@
+export { default } from './DarkLightToggle';