Tip: Arregla tus temas oscuros en Xfce (gtk) y Firefox

Más de alguna vez hemos querido utilizar algún tema oscuro, pero tarde o temprano encontramos algún inconveniente. Actualmente estoy utilizando Xfce con XMonad como gestor de ventanas. Así pues, configuro la apariencia desde la aplicación que Xfce trae para ello. Buscando, me topé con un tema oscuro bastante interesante: Xfce-dusk. Lo probé un tiempo y todo parecía perfecto hasta que me topé con lo siguiente:

SS que muestra letra blanca sobre fondo blanco en el input de búsqueda de Google
Así pues: Google súper útil no viendo lo que estamos buscando

Si bien, aún es utilizable es muy incómodo así que me puse a revisar como arreglarlo. Resulta que el problema es que al aplicar un tema gtk+, se aplica a todos los programas que lo utilicen, y bueno Firefox no es la excepción. Eso no sería problema pues normalmente las cajas de texto (como los email en texto plano) mantienen la lógica del tema gtk, vale decir: fondo negro y letras blancas:

SS que muestra como en GMail (texto plano) se respetan las configuraciones del tema
Sólo funciona en texto plano, en “texto enriquecido” se ve el fondo blanco y letras negras (como si no hubiera tema)

El asunto es que a veces algunos sitios no respetan estos estándares (como la primera imagen) y nos vemos obligados a encontrar alguna forma de lidiar con ellos. Así, me encontré con 4 soluciones que les detallo a continuación:

  1. Utilizar Stylish con Midnight Surfing o Light text on black background,
  2. Crear un estilo ad-hoc de Stylish (sugiero empezar por Google y Facebook),
  3. Modificar el tema gtk, u
  4. Olvidarnos de utilizar un tema oscuro :P

Finalmente me decidí por la tercera. Descarté la primera, porque intentaba abarcar demasiado (aunque sin duda para otra persona podría ser sumamente útil). Suponer que es posible modificar los estilos para toda la web sin romper nada no me parece plausible, aunque lo que alcancé a probar lo hacía bastante bien. Lo segundo es una buena alternativa si navegas por una cantidad limitada de sitios y los puedes identificar mejor, pero también significaba aprender un poco mejor cono funciona Stylish y aprender como sobreponer los estilos “propios” a los de la página web (pista: utiliza !important como condenado aunque sepas que es mala práctica). Esto último por supuesto es un tema que merece un artículo propio.

Decidí modificar el tema gtk porque imaginé que el problema de que algunos desarrolladores no respetaran estándares no pasaría sólo en Firefox y seguramente me toparía con el problema nuevamente. Así que decidí que en vez de utilzar el texto blanco, utilizaría un color intermedio entre negro y blanco para que contraste independientemente del fondo. Contrario a lo que me imaginaba, modificar un tema no es tan difícil como parecía (especialmente los gtk3 porque es básicamente CSS).

Lo primero entonces, es copiar el tema original a ~/.themes y cambiar el nombre. En mi caso le puse Xfce-dusk-fix. Dentro de esa carpeta deberíamos encontrar dos carpetas gtk-2.0 y gtk-3.0, cada una con un archivo: gtkrc y gtk.css respectivamente.

En el primero (gtkrc) hay que buscar las siguientes líneas (los [...] significa que hay código irrelevante):

[text]
GtkEntry::cursor_color = "#fcfcfc"
GtkEntry::secondary_cursor_color = "#fcfcfc"
GtkTextView::cursor_color = "#fcfcfc"
GtkTextView::secondary_cursor_color = "#fcfcfc"

[…]

text[ACTIVE] = "#fcfcfc"
[…]
text[NORMAL] = "#fcfcfc"
[/text]

Y cambiarlas a:

[text]
GtkEntry::cursor_color = "#777777"
GtkEntry::secondary_cursor_color = "#777777"
GtkTextView::cursor_color = "#777777"
GtkTextView::secondary_cursor_color = "#777777"

[…]

text[ACTIVE] = "#777777"
[…]
text[NORMAL] = "#777777"
[/text]

En el segundo archivo (gtk.css), sólo hay que cambiar 4 líneas (no vienen juntas, así que a buscarlas):

[css]
@define-color text_active #fcfcfc;
[…]
@define-color text_normal #fcfcfc;
[…]
-GtkWidget-cursor-color : #fcfcfc;
-GtkWidget-secondary-cursor-color: #fcfcfc;
[/css]

Por:

[css]
@define-color text_active #777777;
[…]
@define-color text_normal #777777;
[…]
-GtkWidget-cursor-color : #777777;
-GtkWidget-secondary-cursor-color: #777777;
[/css]

Una advertencia… no se pongan creativos e intenten cambiar todos los #fcfcfc por #777777 porque si no romperán todo.

Si quieren sencillamente descargar los archivos del tema Xfce-dusk ya modificado, lo pueden hacer desde el gist que cree para ello.

Los resultados finales son los siguientes:

Cualquier pregunta o comentario ya saben donde ;)

Nota final: Luego de utilizar un tiempo esta combinación, quizá no es mala idea buscar un tono de gris que esté más cerca del blanco, pues me queda la sensación que a pesar de que #777777 está justo en la mitad, su contraste con blanco es notablemente mejor que con el negro (en ocasiones cuesta un poco leerlo). Si alguien tiene alguna mejor idea, o ha probado con otro tono, que me cuente :)

Referencias:

4 thoughts on “Tip: Arregla tus temas oscuros en Xfce (gtk) y Firefox

  1. Amigo grax de verdad me sirvió mucho , además de que soy nuevo , pues aun no le agarro bien la onda a Linux , y no se si me puedas ayudar con otra cosa que seria como ejecutar este tipo de lenguaje en Linux por favor , yo tengo ubuntu 12.10 con XFCE y es para el medidor de batería que no me aparece por ningún lado y al parecer tengo que instalar este plugin y aun no se como espero me puedas ayudar

    $ tar jxvf xfce4-battery-plugin-1.0.5.tar.bz2
    $ cd xfce4-battery-plugin-1.0.5
    $ ./configure –disable-dependency-tracking –prefix=/opt/xfce4
    $ make
    $ su -c “make install-strip”

    Me gusta

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s