Selector de tema.
Patrón canónico de selector de tema para cis, cds, cochid y todos los sitios.
Verlo por niveles
Primero el componente, después la variación de marca y finalmente su uso dentro de una página.
Ver y copiar el código de este render
<button class="ui-sample btn btn--secondary ui-theme-toggle" data-theme-toggle type="button" aria-pressed="false"><span class="ui-theme-toggle__icon" aria-hidden="true">◐</span><span data-theme-label>Usar tema oscuro</span></button>Variaciones por marca y sitio
Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.
Compañía de Innovación de Santiago
Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.mdCambia en esta marca
- Navegación y contenido propios del servicio
- Acento reservado para acciones y datos
Permanece canónico
- Mark CIS y namebrand de tres líneas
- IBM Plex Sans, foco, espaciado y anatomía
Círculo de Santiago
Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.mdCambia en esta marca
- Mark circular y namebrand Círculo de Santiago en caja normal
- Contenido societario y navegación propia
Permanece canónico
- Misma estructura, orden de cuenta y footer
- Tipografía, foco y comportamiento canónicos
Comparación histórica recuperable
Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.
- Estado actual
- Selector de tema tiene 6 implementaciones observadas en 4 repositorios: cds/cis/periodismo2-frontend, cochid/cochid-cables, cochid/cochid-datos, cochid/cochid-lex.
- Cambio propuesto
- Publicar en r19 el contrato de Selector de tema para Patrón canónico de selector de tema para cis, cds, cochid y todos los sitios.
- Qué ocurre si respondes No
- No se adopta el contrato r19 de Selector de tema; las 6 implementaciones observadas permanecen sin migración.
Preparando comparación histórica…
Antes / r19
La comparación convierte una regla abstracta en una diferencia visible y verificable.
- Conserva el namebrand canónico y el contexto en una línea separada.
- Mantén cuenta, navegación y destino actual en lugares predecibles.
CISTítulo debajo del namebrandMenú distinto en esta página
- No inventes abreviaturas ni cambies mayúsculas del namebrand.
- No cambies navbar o footer entre páginas del mismo sitio.
Responsive
La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.
Cobertura
| Dimensión | Contrato |
|---|---|
| Propietario canónico | Sistema de diseño CIS · core/core-style |
| Consumidores | CIS, CDS, COCHID y todos los sitios |
| Dependencias | HTML nativo, cis-auth para sesión |
| Estado | candidato |
Evidencia de adopción
Patrón observado. 6 implementaciones observadas en 4 repositorios.
La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.
| Dato | Resultado |
|---|---|
| Clasificación | Patrón observado |
| Implementaciones | 6 implementaciones observadas |
| Repositorios | cds/cis/periodismo2-frontend, cochid/cochid-cables, cochid/cochid-datos, cochid/cochid-lex |
| Snapshot | kit/componentes/componentes-observados.json |
Consumidores observados
El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.
Estados
| Estado requerido |
|---|
| base |
| actual |
| móvil |
| sin sesión |
Accesibilidad
- Conserva nombre accesible, orden de lectura y foco visible.
- Funciona a 320 px, con zoom de 200% y texto largo.
- El color nunca es la única señal de estado o acción.
- El contenido esencial permanece disponible sin JavaScript.
Código HTML
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<button class="ui-sample btn btn--secondary ui-theme-toggle" data-theme-toggle type="button" aria-pressed="false"><span class="ui-theme-toggle__icon" aria-hidden="true">◐</span><span data-theme-label>Usar tema oscuro</span></button>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<button class="ui-sample btn btn--secondary ui-theme-toggle border border-slate-300 bg-white p-4 text-slate-950 border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" data-theme-toggle type="button" aria-pressed="false"><span class="ui-theme-toggle__icon" aria-hidden="true">◐</span><span data-theme-label>Usar tema oscuro</span></button>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { ButtonHTMLAttributes } from "react";
export interface ThemeToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
/** El tema oscuro está activo; define `aria-pressed`, el icono y el texto por defecto. */
pressed?: boolean;
/** Texto visible; por defecto, «Usar tema oscuro» o «Usar tema claro» según `pressed`. */
label?: string;
}
/**
* Botón que alterna entre el tema claro y el oscuro, en la barra superior o en las preferencias.
*
* `pressed` indica que el tema oscuro está activo. `chrome.js` se engancha de `data-theme-toggle` y `data-theme-label` para cambiar el tema y actualizar el texto en el navegador.
*
* @example <ThemeToggle pressed={tema === "dark"} onClick={alternarTema} />
*/
export function ThemeToggle({ pressed = false, label, className, type = "button", ...rest }: ThemeToggleProps) {
return (
<button
className={["btn btn--secondary ui-theme-toggle", className].filter(Boolean).join(" ")}
data-theme-toggle
type={type}
aria-pressed={pressed ? "true" : "false"}
{...rest}
>
<span className="ui-theme-toggle__icon" aria-hidden="true">{pressed ? "☀" : "◐"}</span>
<span data-theme-label>{label ?? (pressed ? "Usar tema claro" : "Usar tema oscuro")}</span>
</button>
);
}