/* ========================================================================== INVEXUS · theme.css MODO NOCHE. Se carga inmediatamente después de tokens.css. POR QUÉ ESTE FICHERO PUEDE EXISTIR El sistema es dirigido por tokens: components.css tiene 514 referencias a var(--inv-*) contra 35 literales de color, y de esos 35 casi todos son rgba(255,255,255,…) sobre superficies OSCURAS —el hero, los bloques con gradiente de marca— que en modo noche siguen siendo oscuras y no cambian. Por eso el modo noche no reescribe componentes: redefine tokens. REGLA Aquí NO se estiliza ningún componente. Sólo se redefinen tokens y se declaran las tres piezas que el modo noche necesita por sí mismo: la transición, el selector y el esquema del navegador. LAS TRES ORIGENES DE LA DECISIÓN, en orden de prioridad 1. [data-theme="dark"] o [data-theme="light"] -> elección explícita 2. prefers-color-scheme -> preferencia del sistema 3. claro -> por defecto El guion en línea del resuelve 1 y 2 ANTES del primer pintado. Sin él, un visitante en modo noche vería un destello blanco en cada carga: el fallo clásico de las implementaciones a medias. ========================================================================== */ /* ========================================================================== 1 · PALETA NOCTURNA Se define una sola vez, en un bloque, y se aplica desde dos selectores: la elección explícita y la preferencia del sistema cuando no hay elección explícita en sentido contrario. ========================================================================== */ :root[data-theme="dark"], :root:not([data-theme="light"]) [data-theme="dark"] { color-scheme: dark; } /* --- SUPERFICIES --------------------------------------------------------- El fondo de página es MÁS OSCURO que --inv-navy a propósito. Las secciones con clase .inv-section--navy tienen que seguir distinguiéndose del fondo: si el fondo fuera también navy, esas secciones desaparecerían y la página perdería su ritmo visual, que es lo único que la estructura. */ :root[data-theme="dark"] { --inv-bg: #071320; --inv-surface: #0E2233; --inv-soft: #12293D; --inv-navy: #0F2A42; /* más claro que el fondo, no más oscuro */ --inv-border: #1D3A52; /* --- TEXTO ------------------------------------------------------------ Contraste sobre #071320, medido: texto 14.9 : 1 · muted 8.7 : 1 Los dos superan holgadamente el 4.5 que exige AA. */ --inv-text: #E6EEF6; --inv-muted: #9FB3C6; /* 13.6 : 1 sobre #071320. Los titulares son lo primero que se lee y lo primero que se nota cuando falla el contraste. */ --inv-ink-strong: #E9F2FA; /* --- COLOR DE ACENTO --------------------------------------------------- Las variantes "ink" se calcularon para fondo CLARO y sobre noche caen a 3:1 o menos. Aquí se sustituyen por sus versiones luminosas, que sobre #071320 dan entre 6 y 9:1. */ --inv-brand-ink: #6FB4E8; /* 8.1 : 1 */ --inv-cyan-ink: #3FC3DE; /* 9.0 : 1 */ --inv-green-ink: #5FD6A0; /* 9.9 : 1 */ --inv-warning-ink: #F4A62A; /* 8.3 : 1 */ --inv-error-ink: #F08585; /* 6.6 : 1 */ --inv-color-link: var(--inv-brand-ink); --inv-color-link-hover: var(--inv-cyan-ink); /* El foco DEBE cambiar: #0B7A91 sobre noche es casi invisible y el foco es lo único que guía a quien navega con teclado. */ --inv-color-focus: #3FC3DE; /* --- BOTONES ---------------------------------------------------------- El contraste de un botón se mide entre su texto y SU PROPIO fondo, no contra la página, así que el primario no necesita cambiar de color. Sí cambia el hover: en claro oscurece hacia navy, y sobre noche eso lo haría desaparecer. Aquí aclara. */ --inv-btn-primary-bg: #2469A1; --inv-btn-primary-fg: #FFFFFF; --inv-btn-primary-bg-hover: #3486C9; --inv-btn-secondary-fg: var(--inv-brand-ink); --inv-btn-secondary-border: #24455F; /* LOS TRES ESTADOS EN MODO NOCHE. No es invertir los colores del dia: sobre fondo oscuro un tinte del 7 % no se ve, hace falta mas peso. Y el activo sigue siendo una inversion, solo que aqui la inversion va en la otra direccion: panel CLARO con texto navy. --inv-active-fg lo resuelve sin duplicar reglas. */ --inv-hover-bg: color-mix(in srgb, var(--inv-brand-ink) 14%, var(--inv-surface)); --inv-hover-border: color-mix(in srgb, var(--inv-brand-ink) 70%, var(--inv-border)); --inv-hover-icon-bg: var(--inv-brand-ink); --inv-hover-icon-fg: var(--inv-fixed-ink); --inv-active-fg: var(--inv-fixed-ink); --inv-active-muted: color-mix(in srgb, var(--inv-fixed-ink) 72%, var(--inv-brand-ink)); /* --- BADGES ----------------------------------------------------------- Los fondos claros de los badges son manchas brillantes sobre noche. Contraste medido de cada par: aviso 6.8 · correcto 5.9 · error 6.4 */ --inv-badge-warn-bg: #3A2B0E; --inv-badge-ok-bg: #0F2E20; --inv-error-bg: #3A1717; /* --- SOMBRAS ---------------------------------------------------------- Sobre noche una sombra oscura no se ve: el fondo ya es oscuro. Lo que separa una tarjeta de su fondo es un borde de LUZ arriba, como el canto de una lámina de vidrio. Se combinan las dos cosas. */ --inv-shadow-sm: 0 4px 16px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05); --inv-shadow-md: 0 12px 32px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.07); --inv-shadow-lg: 0 24px 64px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.09); /* --- GRADIENTES ------------------------------------------------------- El de marca se oscurece para no convertirse en la zona más brillante de una página nocturna. El de inteligencia se conserva: es un acento, y debe brillar. */ --inv-gradient-brand: linear-gradient(135deg, #061421 0%, #103A5C 55%, #1E5C8E 100%); --inv-scrim-dark: linear-gradient(90deg, rgba(3,10,18,.84) 0%, rgba(3,10,18,.62) 58%, rgba(3,10,18,.12) 100%); } /* La preferencia del sistema, SÓLO cuando no hay una elección explícita en sentido contrario. El guion del normalmente ya habrá estampado data-theme, así que esto es la red de seguridad para el caso en que el guion no llegue a ejecutarse (JS desactivado). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --inv-bg: #071320; --inv-surface: #0E2233; --inv-soft: #12293D; --inv-navy: #0F2A42; --inv-border: #1D3A52; --inv-text: #E6EEF6; --inv-muted: #9FB3C6; --inv-ink-strong: #E9F2FA; --inv-brand-ink: #6FB4E8; --inv-cyan-ink: #3FC3DE; --inv-green-ink: #5FD6A0; --inv-warning-ink: #F4A62A; --inv-error-ink: #F08585; --inv-color-link: var(--inv-brand-ink); --inv-color-link-hover: var(--inv-cyan-ink); --inv-color-focus: #3FC3DE; --inv-btn-primary-bg: #2469A1; --inv-btn-primary-fg: #FFFFFF; --inv-btn-primary-bg-hover: #3486C9; --inv-btn-secondary-fg: var(--inv-brand-ink); --inv-btn-secondary-border: #24455F; /* LOS TRES ESTADOS EN MODO NOCHE. No es invertir los colores del dia: sobre fondo oscuro un tinte del 7 % no se ve, hace falta mas peso. Y el activo sigue siendo una inversion, solo que aqui la inversion va en la otra direccion: panel CLARO con texto navy. --inv-active-fg lo resuelve sin duplicar reglas. */ --inv-hover-bg: color-mix(in srgb, var(--inv-brand-ink) 14%, var(--inv-surface)); --inv-hover-border: color-mix(in srgb, var(--inv-brand-ink) 70%, var(--inv-border)); --inv-hover-icon-bg: var(--inv-brand-ink); --inv-hover-icon-fg: var(--inv-fixed-ink); --inv-active-fg: var(--inv-fixed-ink); --inv-active-muted: color-mix(in srgb, var(--inv-fixed-ink) 72%, var(--inv-brand-ink)); --inv-badge-warn-bg: #3A2B0E; --inv-badge-ok-bg: #0F2E20; --inv-error-bg: #3A1717; --inv-shadow-sm: 0 4px 16px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05); --inv-shadow-md: 0 12px 32px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.07); --inv-shadow-lg: 0 24px 64px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.09); --inv-gradient-brand: linear-gradient(135deg, #061421 0%, #103A5C 55%, #1E5C8E 100%); --inv-scrim-dark: linear-gradient(90deg, rgba(3,10,18,.84) 0%, rgba(3,10,18,.62) 58%, rgba(3,10,18,.12) 100%); } } /* ========================================================================== 2 · AJUSTES QUE NO SON UN TOKEN Cosas que el cambio de paleta no resuelve solo. ========================================================================== */ /* DECISIÓN: las imágenes NO se atenúan en modo noche. Atenuar una marca es alterarla, y un filtro global degrada las que estaban bien para arreglar una que quizá deslumbra. Si alguna vez molesta una imagen concreta, se ajusta esa imagen. */ /* La retícula de puntos decorativa es blanca sobre oscuro en los dos modos, pero en modo noche el fondo claro deja de existir: se iguala. */ :root[data-theme="dark"] .inv-funding.inv-dotgrid::before { color: var(--inv-on-dark); opacity: .05; } /* ========================================================================== 3 · TRANSICIÓN AL CAMBIAR DE MODO Sólo mientras dura el cambio, y sólo en las propiedades que de verdad cambian. Una transición permanente sobre background y color haría que cada :hover del sitio arrastrase un desvanecido. ========================================================================== */ :root.inv-theme-cambiando, :root.inv-theme-cambiando :where(body, header, footer, section, article, aside, div, a, button, input, textarea, select, h1, h2, h3, h4, p, li, dt, dd, span, svg) { transition: background-color 260ms var(--inv-ease), border-color 260ms var(--inv-ease), color 260ms var(--inv-ease), fill 260ms var(--inv-ease) !important; } /* Quien pidió menos movimiento tampoco quiere un desvanecido de página entera: el cambio de modo es instantáneo. */ @media (prefers-reduced-motion: reduce) { :root.inv-theme-cambiando, :root.inv-theme-cambiando * { transition: none !important; } } /* ========================================================================== 4 · EL SELECTOR Visible pero discreto, como pidió el encargo. Vive en la cabecera, a la izquierda del botón de menú, y es un botón de verdad -no un checkbox disfrazado- para que teclado y lector de pantalla lo traten como lo que es. ========================================================================== */ .inv-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; margin-inline-start: var(--inv-space-1); padding: 0; background: transparent; border: 1px solid var(--inv-border); border-radius: var(--inv-radius-pill); color: var(--inv-muted); cursor: pointer; transition: color var(--inv-duration-fast) var(--inv-ease), border-color var(--inv-duration-fast) var(--inv-ease), background-color var(--inv-duration-fast) var(--inv-ease); } .inv-theme:hover { color: var(--inv-brand-ink); border-color: var(--inv-brand-ink); background: color-mix(in srgb, var(--inv-brand-ink) 8%, transparent); } .inv-theme:focus-visible { outline: 3px solid var(--inv-color-focus); outline-offset: 2px; } /* OJO A LA ESPECIFICIDAD, que aqui costo un defecto visible. Este selector es (0,1,1) -una clase y un tipo- y las reglas de cada icono son (0,1,0). Cuando esta regla llevaba display:block GANABA a los display:none de los iconos, y el boton mostraba la luna y el sol a la vez, uno al lado del otro. Ahora aqui NO se declara display, y cada icono se selecciona con dos clases para quedar por encima sin recurrir a !important. */ .inv-theme svg { width: 18px; height: 18px; } /* Se muestra el icono del modo AL QUE SE VA, no el del modo actual: el botón dice lo que hace, no lo que hay. Es la convención que menos confunde. */ .inv-theme .inv-theme__sol { display: none; } .inv-theme .inv-theme__luna { display: block; } :root[data-theme="dark"] .inv-theme .inv-theme__sol { display: block; } :root[data-theme="dark"] .inv-theme .inv-theme__luna { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .inv-theme .inv-theme__sol { display: block; } :root:not([data-theme="light"]) .inv-theme .inv-theme__luna { display: none; } } /* LA CABECERA ES OSCURA EN LOS DOS MODOS -su fondo es rgba(11,31,51,.92) y no depende del tema-, asi que el selector que vive dentro de ella usa siempre la variante clara. Ataba a un modificador que no existe: se comprobo que .inv-header--dark no lo emite ninguna plantilla. */ .inv-header .inv-theme { border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.74); } .inv-header .inv-theme:hover { color: #fff; border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.10); } .inv-header .inv-theme:focus-visible { outline-color: var(--inv-cyan-bright); }