Acabo de publicar un tema que he estado refinando durante un tiempo, ahora disponible como código abierto bajo la licencia MIT: una apariencia limpia y moderna construida en torno a superficies translúcidas de vidrio esmerilado (cabecera, barra lateral, búsqueda) con un esquema de colores claro y oscuro diseñado específicamente para ello, sin colores codificados en el código; todo está vinculado a las propiedades CSS personalizadas de Discourse, por lo que funciona desde el principio con conmutación automática entre modo claro y oscuro.
Repositorio: GitHub - terraboss/discourse-terraglass · GitHub
Características
- Superficies de vidrio esmerilado: la cabecera, la barra lateral/menú hamburguesa y el campo de búsqueda de la cabecera/desplegable son semitransparentes con un desenfoque de fondo, tanto la opacidad como la intensidad del desenfoque son configurables
- Esquemas de colores claros y oscuros separados y diseñados específicamente (no solo un único esquema invertido), verificados contra el contraste WCAG AA para texto y elementos de la interfaz
- Previsualizaciones de enlaces estilo X/Twitter con un borde fino y esquinas redondeadas
- Etiquetas con forma de bandera o flecha, estilo etiqueta
- Inserciones de video fijas en formato 16:9 en todos los dispositivos
- Lista de temas con filas alternadas (zebra) y un estado de resaltado al pasar el cursor sutil
- Redondeo de esquinas configurable en botones, tarjetas, modales y campos de entrada
- Contorno de foco accesible que utiliza el propio color de texto del esquema, por lo que permanece visible tanto en modo claro como en oscuro
- Todo lo anterior es una configuración del tema: desactiva o ajusta lo que no quieras
Instalación
Personalizar → Temas → Instalar → Desde un repositorio git:
https://github.com/terraboss/discourse-terraglass
Esto también te permitirá realizar una “Verificación de actualizaciones” con un solo clic en el futuro.
Problema conocido
backdrop-filter (el desenfoque detrás de la barra lateral, el menú hamburguesa y el panel de búsqueda) no se renderiza en cada combinación de navegador/Discourse, aunque la transparencia en sí funciona de manera fiable y se degrada elegantemente por sí sola. Lo estoy siguiendo aquí: backdrop-filter blur has no effect on .menu-panel — si alguien ha encontrado esto o tiene ideas, me encantaría escucharlas.
Se agradece la retroalimentación, feliz de recibir solicitudes de funciones o informes de errores en el repositorio.