/* ===================================================================== PEACHY · LA PIEL Los colores de toda la aplicacion, en un solo sitio. POR QUE ESTE ARCHIVO. Hasta hoy cada pagina repetia la paleta a mano. Diez copias del mismo color: cambiar el melocoton eran diez ediciones, y tener dos modos habrian sido veinte paletas. Aqui hay una. COMO ESTA ESCRITO. Primero los PAPELES —el fondo, el texto, la marca— que son lo que de verdad cambia entre claro y oscuro. Debajo, los nombres de siempre (--negro, --hueso, --arena...) apuntando a esos papeles. Eso no es un capricho: el CSS de las nueve paginas ya esta escrito con los nombres viejos, y reescribirlo entero para renombrar un color habria sido arriesgar cientos de reglas que hoy funcionan. Asi el modo claro sale de cambiar diez lineas, no mil. OJO CON LOS NOMBRES. En modo claro '--negro' vale casi blanco y '--hueso' casi negro. Suena raro y lo es: los nombres dicen el color que tenian el dia que se escribieron, no el papel que hacen. Lo que manda es el papel. COMO SE ELIGE EL MODO. Manda el sistema, salvo que la persona diga otra cosa: entonces manda ella. Eso son las tres reglas de abajo, en ese orden. PAPEL.HTML NO ENTRA AQUI. Esa pagina es una hoja para imprimir: es blanca siempre, tambien de noche, porque el papel es blanco. ===================================================================== */ /* ---------- 1. De noche: lo de siempre, y lo que sale si nadie dice nada ---------- */ :root{ /* los papeles */ --fondo: #0D0D0D; /* el suelo de la pagina */ --texto: #F7F5F2; /* lo que se lee */ --suave: #CDBBA9; /* lo que se lee, pero pesa menos */ --marca: #E7B58F; /* el melocoton: titulos, bordes vivos, botones */ --superficie: #141414; /* cajas, filas, tarjetas */ --borde: #232323; /* las rayas */ --accion: #D53A24; /* SOLO acciones. Ni estado, ni enlace, ni adorno */ --mudo: #6B655E; /* lo apagado, lo deshabilitado */ /* ENCIMA DEL ROJO. Este no cambia entre claro y oscuro, y es a proposito. El rojo es el unico color de la paleta que se queda igual de oscuro en los dos modos: no se aclara en claro ni se apaga en oscuro. Si el texto de encima usara --negro, como hacen los botones melocoton, en modo oscuro saldria negro sobre rojo. Encima del rojo el texto es claro siempre. */ --sobre-accion: #FFFFFF; /* los estados */ --bien: #9FC79F; --ojo: #E3C77A; --mal: #E08D8D; --si-conviene: #6FB98A; --con-cuidado: #D9A441; --no-puede: #D46A72; /* los nombres de siempre, apuntando a su papel */ --negro: var(--fondo); --hueso: var(--texto); --arena: var(--suave); --melo: var(--marca); --caja: var(--superficie); --linea: var(--borde); --acento: var(--accion); --apagado: var(--mudo); --gris: var(--mudo); --verde: var(--bien); --ambar: var(--ojo); --rojo: var(--mal); --conviene: var(--si-conviene); --cuidado: var(--con-cuidado); --nopuede: var(--no-puede); color-scheme: dark; } /* ---------- 2. De dia ---------- No es la paleta de noche del reves. Sobre un fondo claro, el melocoton y el arena de la marca se quedan en nada: hay que bajarlos hasta que se lean. Los tonos siguen siendo los mismos, mas tostados. */ @media (prefers-color-scheme: light){ :root:not([data-piel="oscuro"]){ --fondo: #F7F5F2; --texto: #1A1310; --suave: #7A6A5B; --marca: #A8613A; --superficie: #FFFFFF; --borde: #E4DCD3; --accion: #C93A22; --mudo: #8B837A; --bien: #45785A; --ojo: #8A6414; --mal: #B4443F; --si-conviene: #2F7D55; --con-cuidado: #8A6414; --no-puede: #B4443F; color-scheme: light; } } /* ---------- 3. Si ella lo ha dicho, manda ella ---------- Va la ultima para poder ganarle a las dos de arriba. */ :root[data-piel="claro"]{ --fondo: #F7F5F2; --texto: #1A1310; --suave: #7A6A5B; --marca: #A8613A; --superficie: #FFFFFF; --borde: #E4DCD3; --accion: #C93A22; --mudo: #8B837A; --bien: #45785A; --ojo: #8A6414; --mal: #B4443F; --si-conviene: #2F7D55; --con-cuidado: #8A6414; --no-puede: #B4443F; color-scheme: light; } /* ---------- el logo ---------- ES UNA IMAGEN DE UN SOLO COLOR, hueso, dibujada para fondo oscuro. Sobre el fondo claro desaparece. No se cambia la imagen: se le baja el brillo a cero, que en un dibujo de un solo color equivale a repintarlo oscuro. */ @media (prefers-color-scheme: light){ :root:not([data-piel="oscuro"]) .logo{ filter:brightness(0); opacity:.86 } } :root[data-piel="claro"] .logo{ filter:brightness(0); opacity:.86 } :root[data-piel="oscuro"] .logo{ filter:none; opacity:1 } /* ---------- zonas oscuras siempre ---------- Hay sitios que llevan una foto o un video detras, con su velo oscuro encima: la portada de la web y la pantalla de entrar. Esos son oscuros en los dos modos, y el texto de encima tiene que ser claro siempre. En vez de repintar regla por regla, aqui se vuelven a poner los colores oscuros dentro de esa zona. Todo lo de dentro los hereda y no hay que tocar ni una regla mas. En modo oscuro esto no cambia nada: son los mismos valores. OJO: hay que repetir tambien los nombres de siempre (--hueso, --arena...) escritos enteros. No vale dejarlos apuntando a los papeles: el navegador resuelve ese apunte una sola vez, arriba en :root, y alli el papel todavia es el claro. Aqui abajo ya seria tarde. */ .sobre-foto{ --fondo:#0D0D0D; --negro:#0D0D0D; --texto:#F7F5F2; --hueso:#F7F5F2; --suave:#CDBBA9; --arena:#CDBBA9; --marca:#E7B58F; --melo:#E7B58F; --superficie:#141414; --caja:#141414; --borde:#232323; --linea:#232323; --accion:#D53A24; --acento:#D53A24; --mudo:#6B655E; --apagado:#6B655E; --gris:#6B655E; --bien:#9FC79F; --verde:#9FC79F; --ojo:#E3C77A; --ambar:#E3C77A; --mal:#E08D8D; --rojo:#E08D8D; --si-conviene:#6FB98A; --conviene:#6FB98A; --con-cuidado:#D9A441; --cuidado:#D9A441; --no-puede:#D46A72; --nopuede:#D46A72; /* El color del texto tambien se pone aqui, escrito entero. El color se hereda ya resuelto desde el , que esta fuera de esta zona: si no se vuelve a decir aqui, todo lo de dentro seguiria heredando el color oscuro del modo claro y se perderia sobre la foto. */ color: #F7F5F2; color-scheme: dark; }