Agregada opcion en pagina de inicio para escoger tema claro/oscuro

pnpm-lock.yaml

@@ -9,7 +9,7 @@ devDependencies:
   '@vue/cli-plugin-router': 4.5.6_@vue+cli-service@4.5.6
   '@vue/cli-plugin-typescript': 4.5.6_aad4367e7c82e10ca22fc4a15cb1f747
   '@vue/cli-plugin-vuex': 4.5.6_@vue+cli-service@4.5.6
-  '@vue/cli-service': 4.5.6_3c24ad0de21a253f90051e57049d7938
+  '@vue/cli-service': 4.5.6_8e8338fac4ad2dba956e9bf9e1d38725
   '@vue/compiler-sfc': 3.0.0_vue@3.0.0
   phosphor-vue: 1.0.0_vue@3.0.0
   pug: 2.0.4
@@ -17,7 +17,7 @@ devDependencies:
   sass: 1.26.11
   sass-loader: 8.0.2_sass@1.26.11
   typescript: 3.9.7
-lockfileVersion: 5.1
+lockfileVersion: 5.2
 packages:
   /@babel/code-frame/7.10.4:
     dependencies:
@@ -1020,7 +1020,7 @@ packages:
       cssnano: 4.1.10
       cssnano-preset-default: 4.0.7
       postcss: 7.0.35
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     peerDependencies:
       webpack: ^4.0.0
@@ -1046,7 +1046,7 @@ packages:
       chalk: 1.1.3
       error-stack-parser: 2.0.6
       string-width: 2.1.1
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     peerDependencies:
       webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
@@ -1358,12 +1358,12 @@ packages:
     dependencies:
       '@babel/core': 7.11.6
       '@vue/babel-preset-app': 4.5.6_vue@3.0.0
-      '@vue/cli-service': 4.5.6_3c24ad0de21a253f90051e57049d7938
+      '@vue/cli-service': 4.5.6_8e8338fac4ad2dba956e9bf9e1d38725
       '@vue/cli-shared-utils': 4.5.6
       babel-loader: 8.1.0_d2a654c8b7ff226093b38eb7b56a78a8
       cache-loader: 4.1.0_webpack@4.44.2
       thread-loader: 2.1.3_webpack@4.44.2
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0-0
@@ -1372,7 +1372,7 @@ packages:
       integrity: sha512-jkeXIpvxg2Og+6igsck6qBMFwFN5poqbgDL7JEQP94DPRMAGt+AOoEz6Ultwvykd9lRDD/xLmzZ2MTeXvrpq4A==
   /@vue/cli-plugin-router/4.5.6_@vue+cli-service@4.5.6:
     dependencies:
-      '@vue/cli-service': 4.5.6_3c24ad0de21a253f90051e57049d7938
+      '@vue/cli-service': 4.5.6_8e8338fac4ad2dba956e9bf9e1d38725
       '@vue/cli-shared-utils': 4.5.6
     dev: true
     peerDependencies:
@@ -1382,7 +1382,7 @@ packages:
   /@vue/cli-plugin-typescript/4.5.6_aad4367e7c82e10ca22fc4a15cb1f747:
     dependencies:
       '@types/webpack-env': 1.15.3
-      '@vue/cli-service': 4.5.6_3c24ad0de21a253f90051e57049d7938
+      '@vue/cli-service': 4.5.6_8e8338fac4ad2dba956e9bf9e1d38725
       '@vue/cli-shared-utils': 4.5.6
       '@vue/compiler-sfc': 3.0.0_vue@3.0.0
       cache-loader: 4.1.0_webpack@4.44.2
@@ -1392,7 +1392,7 @@ packages:
       ts-loader: 6.2.2_typescript@3.9.7
       tslint: 5.20.1_typescript@3.9.7
       typescript: 3.9.7
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       yorkie: 2.0.0
     dev: true
     optionalDependencies:
@@ -1408,13 +1408,13 @@ packages:
       integrity: sha512-zr/N1hX5gQQjR2BBFJdZPXatyKC9Scaw8vRDUhu6AE8phcQqf81DhRRVHICss9mMt7DTLKEHHjcYgFrotjEaew==
   /@vue/cli-plugin-vuex/4.5.6_@vue+cli-service@4.5.6:
     dependencies:
-      '@vue/cli-service': 4.5.6_3c24ad0de21a253f90051e57049d7938
+      '@vue/cli-service': 4.5.6_8e8338fac4ad2dba956e9bf9e1d38725
     dev: true
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0-0
     resolution:
       integrity: sha512-cWxj0jIhhupU+oFl0mc1St3ig9iF5F01XKwAhKEbvvuHR97zHxLd29My/vvcRwojZMy4aY320oJ+0ljoCIbueQ==
-  /@vue/cli-service/4.5.6_3c24ad0de21a253f90051e57049d7938:
+  /@vue/cli-service/4.5.6_8e8338fac4ad2dba956e9bf9e1d38725:
     dependencies:
       '@intervolga/optimize-cssnano-plugin': 1.0.6_webpack@4.44.2
       '@soda/friendly-errors-webpack-plugin': 1.7.1_webpack@4.44.2
@@ -1469,7 +1469,7 @@ packages:
       url-loader: 2.3.0_file-loader@4.3.0+webpack@4.44.2
       vue-loader: 15.9.3_2caee5c6214e69e94882edccc4bf5105
       vue-style-loader: 4.1.2
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-bundle-analyzer: 3.9.0
       webpack-chain: 6.5.1
       webpack-dev-server: 3.11.0_webpack@4.44.2
@@ -1481,7 +1481,6 @@ packages:
     optionalDependencies:
       vue-loader-v16: /vue-loader/16.0.0-beta.8
     peerDependencies:
-      '@vue/cli-service': '*'
       '@vue/compiler-sfc': ^3.0.0-beta.14
       less-loader: '*'
       pug-plain-loader: '*'
@@ -1588,7 +1587,7 @@ packages:
   /@vue/preload-webpack-plugin/1.1.2_e19cda6b5f21e6c518504c22be752ae4:
     dependencies:
       html-webpack-plugin: 3.2.0_webpack@4.44.2
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>=6.0.0'
@@ -1600,12 +1599,14 @@ packages:
   /@vue/reactivity/3.0.0:
     dependencies:
       '@vue/shared': 3.0.0
+    dev: false
     resolution:
       integrity: sha512-mEGkztGQrAPZRhV7C6PorrpT3+NtuA4dY2QjMzzrW31noKhssWTajRZTwpLF39NBRrF5UU6cp9+1I0FfavMgEQ==
   /@vue/runtime-core/3.0.0:
     dependencies:
       '@vue/reactivity': 3.0.0
       '@vue/shared': 3.0.0
+    dev: false
     resolution:
       integrity: sha512-3ABMLeA0ZbeVNLbGGLXr+pNUwqXILOqz8WCVGfDWwQb+jW114Cm8djOHVVDoqdvRETQvDf8yHSUmpKHZpQuTkA==
   /@vue/runtime-dom/3.0.0:
@@ -1613,6 +1614,7 @@ packages:
       '@vue/runtime-core': 3.0.0
       '@vue/shared': 3.0.0
       csstype: 2.6.13
+    dev: false
     resolution:
       integrity: sha512-f312n5w9gK6mVvkDSj6/Xnot1XjlKXzFBYybmoy6ahAVC8ExbQ+LOWti1IZM/adU8VMNdKaw7Q53Hxz3y5jX8g==
   /@vue/shared/3.0.0:
@@ -2107,7 +2109,7 @@ packages:
       mkdirp: 0.5.5
       pify: 4.0.1
       schema-utils: 2.7.1
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>= 6.9'
@@ -2475,7 +2477,7 @@ packages:
       mkdirp: 0.5.5
       neo-async: 2.6.2
       schema-utils: 2.7.1
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>= 8.9.0'
@@ -3009,7 +3011,7 @@ packages:
       p-limit: 2.3.0
       schema-utils: 1.0.0
       serialize-javascript: 4.0.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-log: 2.0.0
     dev: true
     engines:
@@ -3165,7 +3167,7 @@ packages:
       postcss-value-parser: 4.1.0
       schema-utils: 2.7.1
       semver: 6.3.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>= 8.9.0'
@@ -3313,6 +3315,7 @@ packages:
     resolution:
       integrity: sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
   /csstype/2.6.13:
+    dev: false
     resolution:
       integrity: sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
   /cyclist/1.0.1:
@@ -4056,7 +4059,7 @@ packages:
     dependencies:
       loader-utils: 1.4.0
       schema-utils: 2.7.1
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>= 8.9.0'
@@ -4667,7 +4670,7 @@ packages:
       tapable: 1.1.3
       toposort: 1.0.7
       util.promisify: 1.0.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>=6.9'
@@ -5816,7 +5819,7 @@ packages:
       loader-utils: 1.4.0
       normalize-url: 1.9.1
       schema-utils: 1.0.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-sources: 1.4.3
     dev: true
     engines:
@@ -8264,7 +8267,7 @@ packages:
       serialize-javascript: 4.0.0
       source-map: 0.6.1
       terser: 4.8.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-sources: 1.4.3
       worker-farm: 1.7.0
     dev: true
@@ -8284,7 +8287,7 @@ packages:
       serialize-javascript: 4.0.0
       source-map: 0.6.1
       terser: 4.8.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-sources: 1.4.3
     dev: true
     engines:
@@ -8323,7 +8326,7 @@ packages:
       loader-runner: 2.4.0
       loader-utils: 1.4.0
       neo-async: 2.6.2
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>= 6.9.0 <7.0.0 || >= 8.9.0'
@@ -8681,7 +8684,7 @@ packages:
       loader-utils: 1.4.0
       mime: 2.4.6
       schema-utils: 2.7.1
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     engines:
       node: '>= 8.9.0'
@@ -8810,7 +8813,7 @@ packages:
       loader-utils: 1.4.0
       vue-hot-reload-api: 2.3.4
       vue-style-loader: 4.1.2
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
     dev: true
     peerDependencies:
       cache-loader: '*'
@@ -8857,6 +8860,7 @@ packages:
       '@vue/compiler-dom': 3.0.0
       '@vue/runtime-dom': 3.0.0
       '@vue/shared': 3.0.0
+    dev: false
     resolution:
       integrity: sha512-ZMrAARZ32sGIaYKr7Fk2GZEBh/VhulSrGxcGBiAvbN4fhjl3tuJyNFbbbLFqGjndbLoBW66I2ECq8ICdvkKdJw==
   /vuex-persist/3.1.3_vuex@4.0.0-beta.4:
@@ -8944,7 +8948,7 @@ packages:
       mime: 2.4.6
       mkdirp: 0.5.5
       range-parser: 1.2.1
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-log: 2.0.0
     dev: true
     engines:
@@ -8984,7 +8988,7 @@ packages:
       strip-ansi: 3.0.1
       supports-color: 6.1.0
       url: 0.11.0
-      webpack: 4.44.2_webpack@4.44.2
+      webpack: 4.44.2
       webpack-dev-middleware: 3.7.2_webpack@4.44.2
       webpack-log: 2.0.0
       ws: 6.2.1
@@ -9023,7 +9027,7 @@ packages:
     dev: true
     resolution:
       integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  /webpack/4.44.2_webpack@4.44.2:
+  /webpack/4.44.2:
     dependencies:
       '@webassemblyjs/ast': 1.9.0
       '@webassemblyjs/helper-module-context': 1.9.0
@@ -9053,7 +9057,6 @@ packages:
       node: '>=6.11.5'
     hasBin: true
     peerDependencies:
-      webpack: '*'
       webpack-cli: '*'
       webpack-command: '*'
     peerDependenciesMeta:

src/App.vue

@@ -1,5 +1,6 @@
 <template>
     <router-view/>
+    <div style="display: none;">{{ modoColor }}</div>
 </template>
 
 <script lang="ts">
@@ -9,7 +10,7 @@ import { useStore } from "vuex";
 export default defineComponent({
     setup() {
         const store = useStore();
-        const modoColor = computed<string>(() => store.state.modoColor);
+        const modoColorUsuario = computed<string>(() => store.state.modoColorUsuario);
 
         const query = window.matchMedia("(prefers-color-scheme: dark)");
         const funActualizarMediaQuery = (ev: MediaQueryListEvent | MediaQueryList) => {
@@ -21,6 +22,29 @@ export default defineComponent({
         query.addEventListener("change", funActualizarMediaQuery);
         funActualizarMediaQuery(query);
 
+        watch(modoColorUsuario, (v) => {
+            console.log("Modo actualizado");
+            if (v === "oscuro") {
+                document.body.className = "tema-oscuro";
+            } else if (v === "claro") {
+                document.body.className = "tema-claro";
+            } else {
+                document.body.className = "tema-automatico";
+            }
+        });
+
+        (() => {
+            const modo = localStorage.getItem("modoColorUsuario");
+            if (modo === "claro" || modo === "oscuro") {
+                store.commit("setModoColorUsuario", modo);
+            } else {
+                store.commit("setModoColorUsuario", "");
+            }
+        })();
+
+        return {
+            modoColor: modoColorUsuario
+        }
     }
 });
 

src/styles/global.sass

@@ -21,6 +21,37 @@ body
   --color-mesa-1: #E3F2FD
   --color-mesa-2: #90CAF9
 
+.tema-claro
+  --color-fondo: #ffffff
+  --color-texto: #151515
+  --color-fondo-transparente: rgba(255, 255, 255, 0.8)
+  --color-borde: gray
+  --color-texto-carta-roja: #b71c1c
+  --color-fondo-carta-roja: #ffffff
+  --color-fondo-dragon-rojo: #ffffff
+  --color-fondo-dragon-verde: #ffffff
+  --color-fondo-dragon-azul: #ffffff
+  --color-fondo-reyes: #ffffff
+  --color-texto-reyes: #2E7D32
+
+  --color-mesa-1: #E3F2FD
+  --color-mesa-2: #90CAF9
+
+.tema-oscuro
+  --color-fondo: #151515
+  --color-texto: #dedede
+  --color-fondo-transparente: rgba(21, 21, 21, 0.85)
+  --color-borde: #c1c1c1
+  --color-texto-carta-roja: #dedede
+  --color-fondo-carta-roja: #b71c1c
+  --color-fondo-dragon-rojo: #b71c1c
+  --color-fondo-dragon-verde: #2E7D32
+  --color-fondo-dragon-azul: #1565C0
+  --color-fondo-reyes: #2E7D32
+  --color-texto-reyes: #ffffff
+
+  --color-mesa-1: #004D40
+  --color-mesa-2: #003027
 
 @media (prefers-color-scheme: dark)
   .tema-automatico

src/views/Inicio/Inicio.vue

@@ -15,6 +15,10 @@ div
     div(v-else)
         p Conectando al servidor...
 
+    p Modo de color: {{ modoColor }}
+    button(@click="cambiarModoColor('claro')") Cambiar a claro
+    button(@click="cambiarModoColor('oscuro')") Cambiar a oscuro
+
     br
     p
         router-link(to="/ayuda/") Ayuda
@@ -43,6 +47,7 @@ export default defineComponent({
 
         const idUsuario = computed(() => store.state.idUsuario);
         const nombreUsuario = computed(() => store.state.nombreUsuario);
+        const modoColor = computed(() => store.state.modoColor);
 
         onMounted(async () => {
             if (idUsuario.value && nombreUsuario.value) {
@@ -91,10 +96,17 @@ export default defineComponent({
             }
         });
 
+        const cambiarModoColor = (modo: string) => {
+            localStorage?.setItem("modoColorUsuario", modo);
+            store.commit("setModoColorUsuario", modo);
+        };
+
         return {
             datosVerificados,
             idUsuario,
-            nombreUsuario
+            nombreUsuario,
+            modoColor,
+            cambiarModoColor
         }
     }
 });