Cómo aplicar el tema GNOME/libadwaita a Firefox

Hace al menos dos o tres años que uso el tema de GNOME para Firefox y así tengo el navegador acorde con el look del escritorio. De hecho, una vez aplicado, prácticamente parece una app nativa de lo bien hecho que está gracias a las modificaciones en CSS. Esta maravilla es obra de Rafael Mardojai, el cual se encarga de mantener y actualizar el código original creado por Luna Kurame. A día de hoy se puede apreciar que emula perfectamente el diseño libadwaita.

Hay que aplicarlo con el código obtenido de GitHub. Aunque se ofrece con un script de instalación yo prefiero usar la manera manual, tanto para ahorrarme posibles errores (los he sufrido varias veces) como para mantenerlo en buen estado. Creo que la manera más rápida y cómoda es desde la terminal, siguiendo las instrucciones oficiales, así que vamos allá.

Instalación

En primer lugar abrimos una pestaña nueva en Firefox y vamos a la dirección about:support, que nos lleva a un menú interno. Nos dirigimos a Configuración básica de la aplicación > Directorio de perfil y hacemos clic en Abrir directorio. Esto debe ser así porque el nombre de dicho perfil varía de un usuario a otro y nos aseguramos de abrir la carpeta correcta.

Tras el paso anterior, Archivos debería abrirse para mostrar la carpeta que buscamos. La ruta suele ser ./mozilla/firefox/nombredelperfil. Los nombres de perfil son una serie de números y letras que parecen aleatorios. Una vez ahí hacemos clic derecho y abrimos una ventana de terminal para empezar a instalar.

Creamos una carpeta llamada chrome

mkdir -p chrome

y entramos en ella.

cd chrome

Descargamos el tema de GitHub con la línea:

git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git

Ahora, antes de proceder a instalarlo, necesitamos crear un par de archivos CSS:

[[ -s userChrome.css ]] || echo >> userChrome.css

[[ -s userContent.css ]] || echo >> userContent.css

Y añadimos sus correspondientes líneas para importar el tema y hacerlo funcionar:

sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css

sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css

Una vez hecho ya podemos aplicarlo. Volvemos al directorio de nuestro perfil con la orden

cd ..

y aplicamos el tema

ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js

Sólo tenemos que reiniciar Firefox para comprobar cómo empieza a vestirse de GNOME. Ahora vamos a pulir un par de detalles.

Primero nos dirigimos al menú de Firefox > Más herramientas > Personalizar la barra de herramientas, y arrastramos el botón de Nueva pestaña hacia un lado de la barra de direcciones (como en la imagen de este post). Esto es necesario tanto para la integración visual como para el siguiente paso.

Vamos hacer que la barra de pestañas se oculte cuando sólo hay una abierta. Debemos ir a la barra de direcciones, meter la ruta about:config y buscar la función

gnomeTheme.hideSingleTab

La marcamos como Booleano y le damos al botón + para aplicar el cambio. Debería aparecer marcada como True.

Haremos el mismo proceso con el parche para los bordes angulados (un error gráfico que puede aparecer con la ventana sin maximizar). Para solucionarlo en las sesiones con Wayland activamos la línea

layers.acceleration.force-enabled

y si tenemos X11 sería

mozilla.widget.use-argb-visuals

Actualizar el tema

Por norma general, con cada versión de Firefox sale una actualización del tema con algunas mejoras y parches. La actualización la hago de manera gráfica porque me resulta más sencillo:

1. Descargo el paquete de la actualización cuando esté disponible
2. Lo descomprimo y me meto en la carpeta del tema
3. Copio/corto su contenido
4. Pego los archivos en ./mozilla/firefox/nombredelperfil/chrome/firefox-gnome-theme (la carpeta del perfil es la de la instalación)
5. Acepto sobreescribir todo
6. Reinicio Firefox

Para ver más opciones del tema, ver el README del proyecto.