Ya funciona correctamente

Arquisoft · Mar 9, 2024 · 9bc3f12 · 9bc3f12
1 parent f3e95b7
commit 9bc3f12
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 77 deletions.
diff --git a/webapp/src/App.css b/webapp/src/App.css
@@ -14,6 +14,14 @@
   --text: #0F0F0F;
 }
 
+/* Estilos para el tema oscuro */
+#root[data-theme="light"] {
+  --shadow: rgba(0, 255, 192, 1);
+  --borders: #0F0F0F;
+  --background: #F0F0F0;
+  --text: #0F0F0F;
+}
+
 /* Estilos para el tema oscuro */
 #root[data-theme="dark"] {
   --shadow: orange;

diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css
@@ -32,67 +32,8 @@ nav li {
   flex-direction: row;
 }
 
-.slider-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 50px;
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-  }
-
-  .switch input { 
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
-
-  input:checked + .slider {
-    background-color: #2196F3;
-  }
-
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(26px);
-  }
-
-  .slider.round {
-    border-radius: 34px;
-  }
-
-  .slider.round:before {
-    border-radius: 50%;
-  }
-
+.theme-toggle{
+  width: 5%;
+  height: 10%;
+  margin-left: 90%;
+}
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
@@ -8,25 +8,22 @@ const Nav = () => {
 
   // Función para alternar entre temas claro y oscuro
   const toggleTheme = () => {
-    const root = document.getElementById('root');
+    const root = document.getElementById("root");
     const currentTheme = root.getAttribute("data-theme");
     const newTheme = currentTheme === "light" ? "dark" : "light";
     root.setAttribute("data-theme", newTheme);
+    setIsDarkTheme((prev) => !prev);
   };
 
   return (
     <nav>
-      <div className="slider-container">
-        <label className="switch">
-          <input
-            type="checkbox"
-            id="theme-toggle"
-            onChange={toggleTheme}
-            checked={isDarkTheme}
-          />
-          <span className="slider round"></span>
-        </label>
-      </div>
+      <input
+        type="checkbox"
+        class="theme-toggle"
+        onChange={toggleTheme}
+        checked={isDarkTheme}
+        value="Texto dentro del input"
+      />
       <h1 className="logo">WIQ!</h1>
       <ul>
         <li>

diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -4,7 +4,10 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+var r = document.getElementById('root');
+r.setAttribute("data-theme", "light")
+const root = ReactDOM.createRoot(r);
+
 root.render(
   //<React.StrictMode>
     <App />