Hace unos meses escribí un artículo en el que explicaba cómo cambiar temporalmente el diseño de cualquier componente del navegador Vivaldi. Temporalmente. Y componentes del navegador. Hoy voy a explicar cómo hacer retoques a las páginas web, y para ello aprovecharemos la capacidad que tiene uBlock Origin, instalado en Firefox y Chromium por defecto en algunas distribuciones Linux, de hacer cambios «cosméticos». Lo hace como todo, inyectando información a las páginas web, pero todo local.

Para hacer estos cambios, es necesario saber HTML y CSS, y también cómo usar las herramientas del desarrollador. Básicamente vamos a indicar qué cambios hacer a qué páginas web y sobre qué elementos, y el resultado puede ser como el de la captura de cabecera: obtener nuestro propio tema oscuro para LinuxAdictos. Puede quedar mejor, pero también habría que hacer mucho más trabajo con los selectores (más información, en MDN).

Pasos a seguir para modificar el CSS con uBlock

Antes de continuar, he de decir que yo las pruebas las he hecho con uBlock Origin, pero debería funcionar también en cualquier extensión de este tipo que tenga ese apartado de «cosméticos». Es éste el que hace modificaciones en el CSS y el que nos permitirá incluir nuestras propias reglas. No funciona, por ejemplo, en la opción nativa de Vivaldi, pero sí en la de Brave si se sabe cómo añadirlas.

Explicado lo anterior, esto es lo que he añadido para que se vea lo de la captura de cabecera:

linuxadictos.com##html:style(color:white !important; background-color:black !important)
linuxadictos.com##h1,h2,h3,h4,h5,h6:style(color:white !important;)
linuxadictos.com##a:style(color:white !important;)

Del código:

• ## es lo que indica que lo de detrás es un selector. Si lo que queremos seleccionar es un ID, tendrá que haber tres almohadillas, pero porque la tercera es la del ID. En estos casos, todo son selectores de etiquetas, y las etiquetas no llevan nada delante. Para más información, una vez más os remito al enlace de MDN.
• Las etiquetas son las selecciones, y en estos ejemplos está todo (html), las etiquetas de título (h1-6) y las de los enlaces (a).
• Para indicar un estilo, luego tenemos que poner :style.
• Las reglas van entre paréntesis, y no entre llaves como se escriben en CSS real.

Y eso sería todo, aunque se puede complicar mucho más si se quieren hacer más y mejores cambios. Como las reglas están en una extensión que se encarga de hacer cambios en las páginas web, al llegar a esas reglas aplicará los cambios. Y ya se me olvidaba, que nada de lo descrito sirve si no indicamos dónde van estos cambios: van en la configuración de la extensión y en el apartado «Mis filtros». Un poco lo mismo en Brave.

¿Hay alguna web cuyo diseño no te gusta? Ahora tienes la solución.