Firefox - Forzar el color de los botones en las páginas

Noviembre 2016


Problema


Los campos de texto suelen tener un fondo blanco y el texto suele ser de color negro. Lo mismo es con el botón "Buscar" en las páginas Web.

El problema es cuando se utiliza un tema obscuro para el escritorio y una letra de color claro. En este caso el texto y el campo pueden ser del mismo color y no se podrá distinguir nada.

Esto hace que sea imposible navegar en algunas páginas Web.

Solución


Con el archivo UserContent.css de Firefox, ya era posible personalizar los elementos "input" y "textarea", pero era necesario retocar el archivo cada vez que se cambiaba de tema.

Aquí vamos a aplicar los colores definidos por el mismo sistema: por lo que el contraste entre el texto y los colores de fondo será suficiente para ver con claridad.

Para ello, basta con utilizar los colores CSS de entorno: estos son como "variables de entorno de los colores".

De este modo, el color de los botones y los campos en una página web dependerán de tema del escritorio elegido, y no del impuesto por la página Web.

Procedimiento


Abre tu carpeta de perfil de Firefox
Dirígete a la carpeta Chrome y crea allí el archivo userChrome.css

Ábrelo con un editor de texto y pega allí:

input, textarea {   
   color: WindowText !important;  
   background: Window !important;  
  }


Guarda, cierra Firefox y reinícialo

Y listo!

En adelante asi el tema sea claro u oscuro, las etiquetas < input > y < textarea > (campos de texto y botones) tendrán un contraste elevado y no habrá problemas de visualización.

Los colores WindowText y Window son los que determina los colores de las ventanas y de la fuente de escritura del sistema operativo.

Ejemplo


Tema claro:

Tema oscuro:



Consulta también :
El documento «Firefox - Forzar el color de los botones en las páginas» de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.