Cambiar el fondo de la nueva pestaña de Firefox

Siempre uso el tema de personas oscuras o el tema oscuro compacto predeterminado que viene incluido con Firefox y no me gusta que el color de fondo predeterminado sea blanco cuando abro una nueva pestaña. Utilicé un complemento que me permitió personalizar nuevas pestañas, pero ahora se ha ido con Firefox 57 ...

Entonces, ¿cómo puedo hacer para cambiar el nuevo fondo de pestañas?

Creo que esto también puede interesar a otros. Hasta ahora conozco un par de complementos para lograr eso y una forma de hacerlo sin complementos (ya que parece que muchos de ellos están desapareciendo día a día), aquí vamos:

1. Personalizar sobre: ​​newtab (consulte el punto 3 a continuación)

   Este es un complemento específico para la tarea, no solo le permite cambiar el color de fondo, sino también elegir una imagen de fondo y también cambiar su tamaño y alinearlo como desee ... ¡genial!

2. Elegante (consulte el punto 3 a continuación)

   Stylish es un complemento con un espectro más amplio de funcionalidad; te permite personalizar el propio Firefox siempre que administres / instales temas y máscaras para muchos sitios web populares como Google, Facebook, YouTube y muchos otros ... Creo que es excesivo si solo lo necesitas para la tarea que estamos tratando aquí .

3. Ninguno de los anteriores funcionará con Firefox 57 debido a restricciones adicionales . Stylus con la nueva pestaña de Firefox 57 muestra este mensaje:

   Como medida de seguridad, el navegador prohíbe que las extensiones afecten a sus páginas integradas (como chrome: // version, la página estándar de nueva pestaña a partir de Chrome 61, about: addons, etc.) así como a las páginas de otras extensiones. Cada navegador también restringe el acceso a su propia galería de extensiones (como Chrome Web Store o AMO).

   Entonces, ¡dejemos de lado los complementos y ensuciemos nuestras manos!

   Puede decidir que no desea usar un complemento para esto, bueno, en este caso, esto es lo que debe hacer:

   • escriba about:profilesen la barra de direcciones de Firefox y seleccione Open Folderen correspondencia del "Directorio raíz" del perfil de usuario que desea personalizar (generalmente solo hay uno);

   • ahora la carpeta raíz del perfil debería haberse abierto, cree (si aún no está presente) una nueva carpeta llamada chrome;

   • cree (si aún no está presente) un nuevo archivo con nombre userContent.css dentro de la chromecarpeta y coloque el siguiente código:

     @-moz-document url("about:newtab") {  
         body {
             background-color: #000000 !important;
         }
     }

   Si puede hacer malabarismos con CSS, también puede agregar un código para establecer una imagen de fondo si lo desea (sugiero que eventualmente coloque las imágenes en la misma carpeta con el CSS).

   Es posible que deba reiniciar Firefox para que se aplique la personalización.

   Los créditos para este último punto van a DIENER_

Abra about:configy cambie el valor browser.display.background_coloral color que prefiera. Estoy usando el # 595959 (gris neutro).

Esto funciona con una pestaña en blanco o "Firefox Home".

Lamentablemente, abrir la pestaña rápidamente o cuando el navegador está sobrecargado seguirá siendo el resultado de un destello blanco.

Si no sabe cómo usar about: config, lea https://support.mozilla.org/en-US/kb/about-config-editor-firefox

Bueno, debo decir que la solución dada por @danicotra funciona para una nueva pestaña, incluso con Firefox 57. Sin embargo, durante la carga de una página, un flash en blanco aún quemará tus ojos sistemáticamente.

Aquí hay otra propuesta de contenido para usted ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css, que oscurece algunos lugares más, pero no resuelve el flash en blanco al cargar.

/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
  html, body, #newtab-customize-overlay {
    background: #303030 !important;
    color: #b2b2b2 !important;
  } 
}

@-moz-document url(chrome://browser/content/browser.xul)
{

  browser[type="content-primary"]
  {
    background: #303030 !important;
    color: #b2b2b2 !important;
  }
}

@-moz-document url(chrome://browser/content/browser.xul)
{

  browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
  {
    background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
    color: #b2b2b2 !important;
  }
}

@-moz-document url(about:blank),
               url(about:preferences),
               url(about:config),
               url(about:newtab)
{
  #newtab-window,
  html,
  body, 
  #newtab-customize-overlay 
  {
    background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
    color: #b2b2b2 !important;
  }
}

html>body {
  background: #303030 !important;
  color: #b2b2b2 !important;
}

De acuerdo con las respuestas de psychoslave y danicotra, descubrí una solución que funciona para mí (mi objetivo era tener una imagen de fondo en la página de la nueva pestaña que configuré about:blank). La solución de psychoslave cambia básicamente todas las páginas de Firefox que no quiero, pero gracias al comienzo de su código pude descubrir que hay url-prefixpartes que hacen que todo sea aparentemente posible.

1. crea la chromecarpeta en la raíz de tu perfil
2. crea userContent.cssy pega este código:

/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:blank), url-prefix(about:newtab) {
  html, body, #newtab-customize-overlay {
    background: url("konachan-steins-gate-s.jpg") no-repeat center center fixed !important; 
    background-size: cover !important;
  } 
}

(Para solo un color de fondo en una pestaña nueva, browser.display.background_colorúsela con un código de color hexadecimal y puede eliminarlo por completo).

3. Copie la imagen justo al lado del userContent.cssarchivo (FF no tomó ninguna ruta absoluta en otro lugar para mí).
4. En about:config, configúrelo toolkit.legacyUserProfileCustomizations.stylesheetspara trueque FF realmente permita esta personalización.

Confirmo que esto funciona en Windows 10, Firefox 72.0.2.

Muchas gracias a los otros colaboradores mencionados anteriormente y a este hilo en Reddit .

Me gusta la opción de psicoslave, pero si no desea cambiar el fondo de Google o el fondo de esos sitios, use el fondo predeterminado del navegador y cambie las últimas tres líneas de esta manera:

#root{   background: #303030 !important;   color: #b2b2b2 !important; } 

Y aquí está el código completo, copiado de la respuesta de psicoslave.

>     /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab
> */ /* https://userstyles.org/styles/142191/remove-new-tab-flash */ @-moz-document url-prefix(about:preferences), url-prefix(about:blank),
> url-prefix(about:newtab) {   html, body, #newtab-customize-overlay {
>     background: #303030 !important;
>     color: #b2b2b2 !important;   }  }
> 
> @-moz-document url(chrome://browser/content/browser.xul) {
> 
>   browser[type="content-primary"]   {
>     background: #303030 !important;
>     color: #b2b2b2 !important;   } }
> 
> @-moz-document url(chrome://browser/content/browser.xul) {
> 
>   browser[type="content-primary"], tabbrowser tabpanels, #appcontent >
> #content   {
>     background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed
> !important;
>     color: #b2b2b2 !important;   } }
> 
> @-moz-document url(about:blank),
>                url(about:preferences),
>                url(about:config),
>                url(about:newtab) {   #newtab-window,   html,   body,    #newtab-customize-overlay    {
>     background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
>     color: #b2b2b2 !important;   } }
> 
> #root {   background: #303030 !important;   color: #b2b2b2 !important; }