diff --git a/webapp/src/App.css b/webapp/src/App.css
index 7259a952..a5ff5dde 100644
--- a/webapp/src/App.css
+++ b/webapp/src/App.css
@@ -1,39 +1,65 @@
-#root{
+#root {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
+ background-color: var(--background);
+ color: var(--text);
+
+ --shadow: rgba(0, 255, 192, 1);
+ --borders: #0F0F0F;
+ --background: #F0F0F0;
+ --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;
+ --borders: #F0F0F0;
+ --background: #0F0F0F;
+ --text: #F0F0F0;
}
-h1{
+h1 {
text-align: center;
}
-input, button, a{
+input,
+button,
+a {
appearance: none;
background-color: transparent;
- border: 0.13rem solid #0F0F0F;
+ border: 0.13rem solid var(--borders);
border-radius: 15px;
box-sizing: border-box;
- color: #0F0F0F;
+ color: var(--text);
padding: 1rem;
text-align: center;
text-decoration: none;
- transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
+ transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
will-change: transform;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
+ -webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
+ -moz-box-shadow: 10px 10px 6px 0px var(--shadow);
+ box-shadow: 5px 5px 6px 0px var(--shadow);
}
-input:hover, button:hover, a:hover {
- background-color: #00ffc0;
- -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0;
- box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0
+input:hover,
+button:hover,
+a:hover {
+ -webkit-box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
+ box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
}
diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css
index cbb4329b..44cbe801 100644
--- a/webapp/src/components/Nav/Nav.css
+++ b/webapp/src/components/Nav/Nav.css
@@ -1,33 +1,39 @@
-.logo{
- font-family: oswald,sans-serif;
- width: 100%;
- font-size: 5rem;
- font-weight: 700;
- margin: 0;
- text-shadow: 4px 4px 0 #00ffc0;
+.logo {
+ font-family: oswald, sans-serif;
+ width: 100%;
+ font-size: 5rem;
+ font-weight: 700;
+ margin: 0;
+ text-shadow: 4px 4px 0 var(--shadow);
}
-nav{
- width: 80vw;
- display: flex;
- flex-wrap: wrap;
- border: 3px solid #0F0F0F;
- border-radius: 1rem;
- padding: 1rem;
- margin: 1rem;
- justify-content: center;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
+nav {
+ width: 80vw;
+ display: flex;
+ flex-wrap: wrap;
+ border: 3px solid var(--borders);
+ border-radius: 1rem;
+ padding: 1rem;
+ margin: 1rem;
+ justify-content: center;
+ -webkit-box-shadow: 10px 10px 5px 0px var(--shadow);
+ -moz-box-shadow: 10px 10px 5px 0px var(--shadow);
+ box-shadow: 10px 10px 5px 0px var(--shadow);
}
-nav ul{
- display: flex;
- justify-content: center;
- flex-direction: row;
+nav ul {
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
}
-nav li{
- display: flex;
- flex-direction: row;
-}
\ No newline at end of file
+nav li {
+ display: flex;
+ flex-direction: row;
+}
+
+.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
index 59ec3610..9d0a3930 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -1,18 +1,43 @@
-import React from 'react';
+import React, { useState } from "react";
import { Link } from "react-router-dom";
-import './Nav.css';
+import "./Nav.css";
const Nav = () => {
- return(
-
- );
-}
+ // Definimos el estado para controlar el tema actual
+ const [isDarkTheme, setIsDarkTheme] = useState(false);
-export default Nav;
\ No newline at end of file
+ // Función para alternar entre temas claro y oscuro
+ const toggleTheme = () => {
+ 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 (
+
+ );
+};
+
+export default Nav;
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 352262e6..5e0efe38 100644
--- 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(
//
diff --git a/webapp/src/pages/Bateria/Bateria.css b/webapp/src/pages/Bateria/Bateria.css
index 7da203ed..33990a6c 100644
--- a/webapp/src/pages/Bateria/Bateria.css
+++ b/webapp/src/pages/Bateria/Bateria.css
@@ -6,11 +6,11 @@ body {
display: flex;
flex-direction: column;
justify-content: center;
- border: 3px solid #0F0F0F;
+ border: 3px solid var(--borders);
padding: 1rem;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
+ -webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
+ -moz-box-shadow: 10px 10px 6px 0px var(--shadow);
+ box-shadow: 10px 10px 5px 0px var(--shadow);
border-radius: 1rem;
}
@@ -28,12 +28,12 @@ body {
display: grid;
justify-content: center;
align-items: center;
- border: 3px solid #0F0F0F;
+ border: 3px solid var(--borders);
border-radius: 1rem;
padding: 1rem;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
+ -webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
+ -moz-box-shadow: 10px 10px 6px 0px var(--shadow);
+ box-shadow: 10px 10px 5px 0px var(--shadow);
}
.responsesContainer {
@@ -53,9 +53,8 @@ button{
.responsesContainer button {
appearance: none;
background-color: transparent;
- border: 0.13rem solid #0f0f0f;
+ border: 0.13rem solid var(--borders);
border-radius: 15px;
- color: #0f0f0f;
padding: 1rem;
text-align: center;
text-decoration: none;
@@ -74,7 +73,7 @@ button{
padding: 8px;
aspect-ratio: 1;
border-radius: 50%;
- background: #25b09b;
+ background: var(--shadow);
--_m:
conic-gradient(#0000 10%,#000),
linear-gradient(#000 0 0) content-box;
diff --git a/webapp/src/pages/Clasico/Clasico.css b/webapp/src/pages/Clasico/Clasico.css
index 2039ba2a..80023370 100644
--- a/webapp/src/pages/Clasico/Clasico.css
+++ b/webapp/src/pages/Clasico/Clasico.css
@@ -6,11 +6,11 @@ body {
display: flex;
flex-direction: column;
justify-content: center;
- border: 3px solid #0F0F0F;
+ border: 3px solid var(--borders);
padding: 1rem;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
+ -webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
+ -moz-box-shadow: 10px 10px 6px 0px var(--shadow);
+ box-shadow: 10px 10px 5px 0px var(--shadow);
border-radius: 1rem;
}
@@ -28,12 +28,12 @@ body {
display: grid;
justify-content: center;
align-items: center;
- border: 3px solid #0F0F0F;
+ border: 3px solid var(--borders);
border-radius: 1rem;
padding: 1rem;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
+ -webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
+ -moz-box-shadow: 10px 10px 6px 0px var(--shadow);
+ box-shadow: 10px 10px 5px 0px var(--shadow);
}
.responsesContainer {
@@ -53,9 +53,8 @@ button{
.responsesContainer button {
appearance: none;
background-color: transparent;
- border: 0.13rem solid #0f0f0f;
+ border: 0.13rem solid var(--borders);
border-radius: 15px;
- color: #0f0f0f;
padding: 1rem;
text-align: center;
text-decoration: none;
@@ -74,7 +73,7 @@ button{
padding: 8px;
aspect-ratio: 1;
border-radius: 50%;
- background: #25b09b;
+ background: var(--shadow);
--_m:
conic-gradient(#0000 10%,#000),
linear-gradient(#000 0 0) content-box;
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index 5ecb4c7c..16d8267c 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -78,7 +78,7 @@ const JuegoPreguntas = () => {
}
} else {
if (respuesta === respuestaSeleccionada) {
- return { backgroundColor: "#0F0F0F", color: "#F0F0F0" };
+ return { backgroundColor: "var(--text)", color: "var(--background)" };
}
}
return {};
diff --git a/webapp/src/pages/Stats/Stats.css b/webapp/src/pages/Stats/Stats.css
index 68b8b9c3..866c84cf 100644
--- a/webapp/src/pages/Stats/Stats.css
+++ b/webapp/src/pages/Stats/Stats.css
@@ -15,22 +15,8 @@ body {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
-h2 {
- font-size: 2rem;
- margin-bottom: 1.5rem;
- font-family: 'Arial', sans-serif;
- color: #333;
-}
-
-p {
- font-size: 1rem;
- margin-bottom: 1.5rem;
- color: #666;
-}
-
#usernameInput {
margin-bottom: 2rem;
-
}
#usernameInput input[type="text"] {
@@ -44,8 +30,8 @@ table {
border-radius: 15px;
border-collapse: collapse;
background-color: #f9f9f9;
- box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
- border: 1px solid rgba(0,255,192,1);
+ box-shadow: 5px 5px 6px 0px var(--shadow);
+ border: 1px solid var(--borders);
}
table th,
@@ -58,7 +44,7 @@ table th {
background-color: #eee;
font-weight: bold;
color: #333;
- box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
+ box-shadow: 5px 5px 6px 0px var(--shadow);
}
table td {
diff --git a/webapp/src/pages/WrongRoute/WrongRoute.css b/webapp/src/pages/WrongRoute/WrongRoute.css
index 0d301563..219fa1e9 100644
--- a/webapp/src/pages/WrongRoute/WrongRoute.css
+++ b/webapp/src/pages/WrongRoute/WrongRoute.css
@@ -41,7 +41,7 @@
transform: translateY(50%);
height: 160px;
width: 10rem;
- background-color: #00ffc0
+ background-color: orange
}
@keyframes drop {
@@ -92,7 +92,7 @@
font-size: 188px;
font-weight: 700;
margin: 0;
- text-shadow: 4px 4px 0 #00ffc0;
+ text-shadow: 4px 4px 0 orange;
}
.notfound h2 {
@@ -106,7 +106,6 @@
.notfound p {
font-family: lato,sans-serif;
- color: #000;
font-weight: 400;
margin-top: 20px;
margin-bottom: 25px
@@ -116,20 +115,19 @@
font-family: lato,sans-serif;
padding: 10px 30px;
display: inline-block;
- color: #000;
font-weight: 400;
text-transform: uppercase;
- -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px #00ffc0;
- box-shadow: 0 0 0 2px #000,2px 2px 0 2px #00ffc0;
+ -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
+ box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
text-decoration: none;
-webkit-transition: .2s all;
transition: .2s all
}
.notfound a:hover {
- background-color: #00ffc0;
- -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0;
- box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0
+ background-color: orange;
+ -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
+ box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
}
.notfound-social {
@@ -145,9 +143,9 @@
}
.notfound-social>a:hover {
- background-color: #00ffc0;
- -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0;
- box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0
+ background-color: orange;
+ -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
+ box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
}
@media only screen and (max-width: 480px) {