fernando
/
rimajon-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
Araozu 2020-12-25 18:58:41 -05:00
parent 0eeb11e253
commit c439c943af
4 changed files with 104 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
pnpm-lock.yaml
View File

@ -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:

30
src/App.vue
View File

@ -1,26 +1,50 @@
<template>
<router-view/>
<div style="display: none;">{{ modoColor }}</div>
</template>
<script lang="ts">
import {defineComponent, computed, watch} from "vue";
import { defineComponent, computed, watch } from "vue";
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) => {
store.commit(
"setModoColorUsuario",
ev.matches? "oscuro": "claro"
ev.matches ? "oscuro" : "claro"
);
};
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
}
}
});

31
src/styles/global.sass
View File

@ -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

14
src/views/Inicio/Inicio.vue
View File

@ -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
}
}
});