Generador de temas para la app Herdr: crea y descarga tu tema, con revisión de contraste

Con este generador creas un tema para la app de escritorio Herdr, el archivo que va en ~/.config/herdr-app/themes/. Eliges los colores de la terminal, los 16 colores ANSI y, si quieres, los de la interfaz; ves el resultado en una vista previa y una revisión de contraste te avisa qué combinaciones se leen mal. Al final descargas el JSON o un paquete .zip con instaladores para Mac, Linux y Windows. Todo ocurre en tu navegador: no se envía nada.

Pegar el JSON de un tema

Terminal

Los 16 colores ANSI

Los que usan los programas para su texto: del 0 al 7, los normales; del 8 al 15, sus versiones brillantes.

Colores de la interfaz (opcional)

Marca la casilla de los que quieras fijar. Los que dejes sin marcar no van en el archivo: la app los calcula a partir de los colores de la terminal.

Vista previa aproximada: la app real tiene más detalles, y los colores de la interfaz que no fijes los calcula a su manera.

Contraste

    Descargar

    Archivo: alto-contraste.json 

      
    Este tema es para la app de escritorio, no para el herdr de terminal, que usa otro formato (la sección [theme] de su config.toml). Si no sabes cuál tienes, la guía de la Herdr app explica la diferencia.
    Cómo instalar el tema
    • Con el paquete .zip: descomprímelo. En Mac o Linux, abre una terminal en esa carpeta y ejecuta sh instalar.sh. En Windows, abre PowerShell en la carpeta y ejecuta powershell -ExecutionPolicy Bypass -File .\instalar.ps1. Los dos copian el tema a la carpeta themes de la app y, si ya había uno con el mismo nombre, guardan una copia del anterior.
    • Con la orden para la terminal (Mac y Linux): el botón «Copiar la orden» copia un bloque que crea la carpeta y escribe el archivo. Pégalo en la app Terminal y pulsa Enter.
    • A mano: copia el .json a ~/.config/herdr-app/themes/ (en Windows, %USERPROFILE%\.config\herdr-app\themes\). En el Finder de la Mac la carpeta .config está oculta: usa Cmd+Shift+G y escribe ~/.config/herdr-app.
    Después, en Herdr, abre Settings → Look y elige tu tema en la lista: los archivos nuevos de themes/ aparecen solos. Si no lo ves, cierra la app y vuelve a abrirla. Herdr acomoda cada tema en la lista Dark o Light según su fondo y lo usa solo con esa apariencia: si tu computadora está en modo claro, un tema oscuro no se verá hasta que pongas Appearance en Dark (y al revés con un tema claro). Si usas otra carpeta para la app con HERDR_APP_HOME o XDG_CONFIG_HOME, los instaladores la respetan.
    Si usas el diseño Terminals
    Herdr trae tres diseños de ventana: Herdr, Terminals y Herdr 98. El normal, Herdr, toma todos sus colores del tema. Terminals, en cambio, fija en su archivo (layouts/terminals.json) el fondo, el texto, los bordes y el fondo de los paneles, y esos colores ganan a cualquier tema: con él, tu tema solo cambia los colores ANSI y el cursor, y el fondo sigue gris. Herdr 98 también trae su propio aspecto.
    La solución es una copia de Terminals sin esos colores fijos. El paquete trae diseno-terminals.py, que la crea con el nombre terminals- seguido del nombre de tu tema y la deja usando ese tema; si la copia ya existe, solo le cambia el tema. El diseño Terminals original no se toca, y como la copia es tuya, las actualizaciones de Herdr no la modifican.
    • Mac y Linux: sh instalar.sh --terminals instala el tema y crea la copia. También puedes usar el botón «Copiar la orden para el diseño Terminals» y pegarla en la terminal.
    • Windows: después de instalar.ps1, ejecuta python diseno-terminals.py en la carpeta del paquete.
    • Después: en Settings → Look, en la fila Layout, elige la miniatura nueva, terminals- y el nombre de tu tema, no la de Terminals.
    El script necesita Python 3. En la Mac viene con las Command Line Tools de Xcode, que ya tienes si usas git o Homebrew; si no, macOS ofrece instalarlas la primera vez que escribes python3.
    Qué colores lleva un tema
    • background y foreground: el fondo y el texto de las terminales. En la app de escritorio, a diferencia del herdr de terminal, el tema sí pinta el fondo de las terminales.
    • selection y cursor: el fondo del texto seleccionado y el color del cursor. El cursor es opcional.
    • ansi: la lista de 16 colores que usan los programas: ls pinta las carpetas con el azul (4), Git las líneas nuevas con el verde (2) y las borradas con el rojo (1), y muchos programas usan el 8 para los textos apagados.
    • colors (opcional): los de la interfaz: canvas y chrome (fondos y barras laterales), surface (tarjetas), selected (fila elegida), border, accent, los textos foreground, muted y dim, y los estados de los agentes: working, blocked (te necesita), done, idle y unknown. Lo que no pongas, la app lo deriva de los colores de la terminal.
    Todos los colores van en formato #rrggbb. El generador acepta también la forma corta #rgb y la convierte. Si abres un tema con claves que no conoce, las quita y te avisa.
    La revisión de contraste
    Cada combinación se mide con la fórmula de contraste de WCAG 2.2 y se compara con un mínimo: 4.5:1 para el texto (el nivel AA para texto normal) y 3:1 para el cursor, los estados de los agentes y el texto apagado, que funcionan como iconos. Los colores de la interfaz que no fijaste se estiman, y la lista lo indica. Si algún color ANSI queda por debajo de 4.5:1, el paquete trae en el LEEME la línea "minimum_contrast": 4.5 para el settings.json de la app: con ella, Herdr cambia por casi blanco o casi negro el texto que no llegue a ese contraste. Para comprobar un par de colores suelto, usa el convertidor de colores con contraste WCAG.
    Los temas de ejemplo
    • Alto contraste (oscuro y claro): los hicimos para decodigo.com. En el oscuro, todas las combinaciones que revisa la herramienta pasan de 6.9:1; en el claro, de 5.5:1. La guía de la Herdr app muestra el oscuro aplicado.
    • Homebrew: la paleta del perfil Homebrew de Terminal.app, de la colección iTerm2-Color-Schemes (licencia MIT), con la interfaz en verdes oscuros. Conserva sus azules oscuros, por eso la revisión marca varios colores ANSI.
    • Atom One Dark: el tema que trae la propia app (licencia Apache 2.0), sin colores de interfaz. Sirve para ver cuáles calcula Herdr por su cuenta. Se carga con el nombre mi-atom-one-dark para no chocar con el original.
    Crear y revisar un tema en Python
    Un tema es un JSON pequeño, así que también puedes generarlo con un script. Este valida lo mínimo que pide Herdr, mide el contraste y guarda el archivo:
    import json
import re
from pathlib import Path

HEX = re.compile(r"^#[0-9a-f]{6}$")

tema = {
    "background": "#000000",
    "foreground": "#ffffff",
    "selection": "#0055b3",
    "cursor": "#ffd700",
    "ansi": ["#3a3a3a", "#ff5c5c", "#3dff6e", "#ffd700", "#66b3ff", "#ff80ff", "#00e5e5", "#e6e6e6",
             "#a6a6a6", "#ff8080", "#7dff9e", "#ffff66", "#99ccff", "#ffb3ff", "#66ffff", "#ffffff"],
    "colors": {"chrome": "#000000", "foreground": "#ffffff", "muted": "#e6e6e6",
               "working": "#ffd700", "blocked": "#ff5c5c", "done": "#00e5e5", "idle": "#3dff6e"},
}


def validar(t):
    """Lo mínimo que pide Herdr: background, foreground, selection y 16 colores ANSI, todos #rrggbb."""
    for clave in ("background", "foreground", "selection"):
        assert HEX.match(t[clave]), f"{clave}: {t[clave]!r} no es #rrggbb"
    assert len(t["ansi"]) == 16 and all(HEX.match(c) for c in t["ansi"]), "ansi: hacen falta 16 colores #rrggbb"
    assert all(HEX.match(c) for c in t.get("colors", {}).values()), "colors: todos deben ser #rrggbb"


def contraste(a, b):
    """Cociente de contraste de WCAG 2.2 entre dos colores #rrggbb."""
    def lum(h):
        c = [int(h[i:i + 2], 16) / 255 for i in (1, 3, 5)]
        c = [x / 12.92 if x <= 0.04045 else ((x + 0.055) / 1.055) ** 2.4 for x in c]
        return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
    l1, l2 = sorted((lum(a), lum(b)), reverse=True)
    return (l1 + 0.05) / (l2 + 0.05)


validar(tema)
fondo = tema["background"]
print(f"Texto sobre el fondo: {contraste(tema['foreground'], fondo):.2f}:1")
bajos = [i for i, c in enumerate(tema["ansi"][1:], 1) if contraste(c, fondo) < 4.5]
print("ANSI bajo 4.5:1:", bajos or "ninguno")
for estado in ("working", "blocked", "done", "idle"):
    print(f"  {estado:8} {contraste(tema['colors'][estado], tema['colors']['chrome']):5.2f}:1")

# En tu equipo: Path.home() / ".config" / "herdr-app" / "themes"
destino = Path("/tmp/herdr-app/themes")
destino.mkdir(parents=True, exist_ok=True)
archivo = destino / "alto-contraste.json"
archivo.write_text(json.dumps(tema, indent=2) + "\n", encoding="utf-8")
print("Guardado:", archivo, f"({archivo.stat().st_size} bytes)")
    $ python3 herdr_tema.pyTexto sobre el fondo: 21.00:1
ANSI bajo 4.5:1: ninguno
  working  14.97:1
  blocked   6.94:1
  done     13.34:1
  idle     15.73:1
Guardado: /tmp/herdr-app/themes/alto-contraste.json (556 bytes)
    Otras herramientas para desarrolladores: el convertidor de colores, el convertidor de JSON, YAML y TOML y el probador de expresiones regulares. Todas, en decodigo.com/herramientas.
    Formato del tema, colores de la interfaz, minimum_contrast, carpeta de la app y variables HERDR_APP_HOME y XDG_CONFIG_HOME: la guía de archivos defaults/AGENTS.md y docs/security.md del repositorio herdrdev/herdr-app, versión 0.1.12. Contraste: WCAG 2.2. Comprobamos que los cuatro temas de ejemplo, generados con esta herramienta, se cargan en Herdr 0.1.12 y aparecen en Settings → Look, que los instaladores del paquete los copian a la carpeta de la app y que la copia del diseño Terminals que crea diseno-terminals.py aparece en la fila Layout y se pinta con el tema.
    decodigo.com
    Código listo para usar: ejemplos en Java, Python, Go, Rust y JavaScript, cursos, guías, herramientas en línea y noticias de tecnología.