Deshabilitar el estilo del sistema para los elementos de entrada de formulario de Firefox

13

Yo uso un tema oscuro en Lubuntu llamado Dorian . Estoy bastante feliz con eso. Sin embargo, Firefox parece heredar ciertos colores del sistema para sus elementos de entrada de formulario, lo que los hace muy difíciles de ver.

Por ejemplo:

Ejemplo de casillas de verificación Ejemplo de botones

Si cambio el color de primer plano, también debería cambiar el color de fondo de los cuadros de texto, que está bien ahora, pero es claro sobre oscuro. Ejemplo de cuadro de texto

Me imagino resolviendo esto de varias maneras:

  1. Agregue una hoja de estilo personalizada para Firefox para revertir los cambios. (Utilizo Stylish , por lo que es trivial de implementar. Sin embargo, CSS con elementos de formulario parece complicado).
  2. Modificaciones a Dorian (creo que puede personalizar un tema GTK para programas particulares).
  3. Deshabilite el complemento de Firefox Ubuntu-Firefox .
  4. Encuentre una configuración en Firefox para evitar la carga de colores del sistema para los elementos de entrada.
  5. Instala Dorian Theme para Firefox . (Soy reacio a esto, ya que Dorian no se actualiza activamente y Firefox lo hace constantemente).

Por supuesto, también agradezco otras soluciones en las que no he pensado.

firefox themes gtk sondra.kinsey
fuente
Re. "Sin embargo, CSS con elementos de formulario parece complicado" puede obtener orientación haciendo clic con el botón derecho en los elementos problemáticos y seleccionando "Inspeccionar elemento" en el menú contextual.
DK Bose

Respuestas:

19

Las soluciones basadas en CSS son difíciles de entender, en mi experiencia. El de la respuesta de Michael funcionó en algunos sitios, pero no en todos.

En Firefox 60, hay una solución más fácil. Vaya about:configy establezca el siguiente valor de cadena: widget.content.gtk-theme-override=Adwaita:light

(Debe hacer clic con el botón derecho y seleccionar Nuevo -> Cadena. Buscar gtk-theme-overrideno encontrará nada porque la configuración no está allí de forma predeterminada).

Crédito a Martin Stránský: https://bugzilla.mozilla.org/show_bug.cgi?id=1283086#c7

John Lindgren
fuente
3
A diferencia de muchas configuraciones de Firefox, tuve que reiniciar Firefox para que esto surta efecto. Así que no se preocupe si no tiene efecto de inmediato. Funciona perfecto sin embargo!
Bryan Head
Los usuarios de KDE pueden establecer este valor en un nombre de tema de KDE, como "brisa" u "oxígeno".
Pistos
3

Puede probar la extensión Contraste de texto para temas oscuros .

Además, esta solución CSS más antigua todavía parece funcionar, aunque eso es probablemente lo que está utilizando ahora.

Redsandro
fuente
El segundo enlace ("solución CSS") ya no funciona. ¿Podría dar más detalles sobre la solución CSS? ¿Es posible cambiar la hoja de estilo de agente de usuario global de Firefox sin el uso de extensiones?
Michael Martin-Smucker
Lo siento, no lo se. Cambié a Chrome porque encontré que el estilo de Firefox es peculiar a veces, especialmente en un escritorio oscuro.
Redsandro
1
Me gusta esto porque me permite elegir para qué sitios quiero forzar los colores estándar
smac89
2

También uso un tema oscuro (Adapta Nokto), y también me he encontrado con algunos sitios web que cambian el color del texto en las entradas, pero supongo que el color de fondo será blanco (lo que da lugar a texto completamente ilegible).

Exploré la opción CSS y encontré esta explicación de cómo configurar estilos de usuario predeterminados sin necesidad de extensiones de navegador. Resumen:

  1. Su perfil de Firefox necesitará un userContent.cssarchivo en el lugar correcto. Puedes crearlo así:

    • Cambia los directorios a tu perfil de Firefox:
      cd ~/.mozilla/firefox/<your profile>/
    • Haga un directorio "chrome" si no existe
      mkdir chrome
    • Cree un archivo CSS en este nuevo directorio
      touch chrome/userContent.css

  2. Edite el userContent.cssarchivo recién creado para incluir los estilos base que desea aplicar a todas las páginas.

  3. Reinicia Firefox para ver los cambios.

Para empezar, agregué esto a mi archivo CSS:

input, textarea {
  background-color: #fff;
  color: #222;
}

Esto supone cierta familiaridad con CSS. Si es nuevo para usted, esto está diciendo:

  • Encuentra todos los elementos inputy textareaen la página
  • Hacer el fondo blanco ( #fffes una abreviatura de código hexadecimal para blanco)
  • Haga que el texto sea de color gris oscuro ( #222)

Hay muchos otros elementos que puede desear diseñar, como buttony select, y puede ser más específico con sus entradas, como input[type=checkbox].

Esto no deshabilita exactamente el uso del tema de su sistema, pero al menos le permite anularlo y proporcionar a los sitios web valores predeterminados más cercanos a lo que esperan.

Michael Martin-Smucker
fuente