Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Learn More

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

How to make the Start Page dark or black

  • 4 antwoorden
  • 6 hebben dit probleem
  • 273 weergaven
  • Laatste antwoord van cor-el

more options

In Firefox 74, I would like to make the default start page dark. Plugins will not work for this, and an I have not seen, option in the settings. I searched and I didn't see anyone ask this specific question. Thanks in advance!

In Firefox 74, I would like to make the default start page dark. Plugins will not work for this, and an I have not seen, option in the settings. I searched and I didn't see anyone ask this specific question. Thanks in advance!

Alle antwoorden (5)

more options

If you open the menu and click customize and click themes -> dark mode the start page should be black. mine is at least.

more options

that's true, but they could provide an option to make it without having to stop using the theme you like.

more options

You can possibly use CSS code in userContent.css to set the background color.


/* ABOUT:HOME - ABOUT:NEWTAB */
@-moz-document url-prefix(about:home), url-prefix(about:newtab) {
 body{
  --newtab-background-color: #2A2A2E!important;
  --newtab-border-primary-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-border-secondary-color: rgba(249, 249, 250, 0.1)!important;
  --newtab-button-primary-color: #0060DF!important;
  --newtab-button-secondary-color: #38383D!important;
  --newtab-element-active-color: rgba(249, 249, 250, 0.2)!important;
  --newtab-element-hover-color: rgba(249, 249, 250, 0.1)!important;
  --newtab-icon-primary-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4)!important;
  --newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4)!important;
  --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2)!important;
  --newtab-link-primary-color: #45A1FF!important;
  --newtab-link-secondary-color: #50BCB6!important;
  --newtab-text-conditional-color: #F9F9FA!important;
  --newtab-text-primary-color: #F9F9FA!important;
  --newtab-text-secondary-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-textbox-background-color: #38383D!important;
  --newtab-textbox-border: rgba(249, 249, 250, 0.2)!important;
  --newtab-textbox-focus-color: #45A1FF!important;
  --newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3)!important;
  --newtab-feed-button-background: #38383D!important;
  --newtab-feed-button-text: #F9F9FA!important;
  --newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6)!important;
  --newtab-feed-button-text-faded: rgba(249, 249, 250, 0)!important;
  --newtab-feed-button-spinner: #D7D7DB!important;
  --newtab-contextmenu-background-color: #4A4A4F!important;
  --newtab-contextmenu-button-color: #2A2A2E!important;
  --newtab-modal-color: #2A2A2E!important;
  --newtab-overlay-color: rgba(12, 12, 13, 0.8)!important;
  --newtab-section-header-text-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-section-active-contextmenu-color: #FFF!important;
  --newtab-search-border-color: rgba(249, 249, 250, 0.2)!important;
  --newtab-search-dropdown-color: #38383D!important;
  --newtab-search-dropdown-header-color: #4A4A4F!important;
  --newtab-search-header-background-color: rgba(42, 42, 46, 0.95)!important;
  --newtab-search-icon-color: rgba(249, 249, 250, 0.6)!important;
  --newtab-search-wordmark-color: #FFF!important;
  --newtab-topsites-background-color: #38383D!important;
  --newtab-topsites-icon-shadow: none!important;
  --newtab-topsites-label-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-card-active-outline-color: #4A4A4F!important;
  --newtab-card-background-color: #38383D!important;
  --newtab-card-hairline-color: rgba(249, 249, 250, 0.1)!important;
  --newtab-card-placeholder-color: #4A4A4F!important;
  --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2)!important;
  --newtab-snippets-background-color: #38383D!important;
  --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1)!important;
  --trailhead-header-text-color: rgba(255, 255, 255, 0.6)!important;
  --trailhead-cards-background-color: rgba(12, 12, 13, 0.1)!important;
  --trailhead-card-button-background-color: rgba(12, 12, 13, 0.3)!important;
  --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.5)!important;
  --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.7)!important;
 }
}

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

You may have to modify these prefs as well.

  • layout.css.moz-document.content.enabled = true
  • layout.css.moz-document.url-prefix-hack.enabled = true

Bewerkt door cor-el op

more options

I've edited my above reply and replaced the light theme vars with the dark theme vars to give better experience.

more options

cor-el said

You can possibly use CSS code in userContent.css to set the background color.
/* ABOUT:HOME - ABOUT:NEWTAB */
@-moz-document url-prefix(about:home), url-prefix(about:newtab) {
 body{
  --newtab-background-color: #2A2A2E!important;
  --newtab-border-primary-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-border-secondary-color: rgba(249, 249, 250, 0.1)!important;
  --newtab-button-primary-color: #0060DF!important;
  --newtab-button-secondary-color: #38383D!important;
  --newtab-element-active-color: rgba(249, 249, 250, 0.2)!important;
  --newtab-element-hover-color: rgba(249, 249, 250, 0.1)!important;
  --newtab-icon-primary-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4)!important;
  --newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4)!important;
  --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2)!important;
  --newtab-link-primary-color: #45A1FF!important;
  --newtab-link-secondary-color: #50BCB6!important;
  --newtab-text-conditional-color: #F9F9FA!important;
  --newtab-text-primary-color: #F9F9FA!important;
  --newtab-text-secondary-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-textbox-background-color: #38383D!important;
  --newtab-textbox-border: rgba(249, 249, 250, 0.2)!important;
  --newtab-textbox-focus-color: #45A1FF!important;
  --newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3)!important;
  --newtab-feed-button-background: #38383D!important;
  --newtab-feed-button-text: #F9F9FA!important;
  --newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6)!important;
  --newtab-feed-button-text-faded: rgba(249, 249, 250, 0)!important;
  --newtab-feed-button-spinner: #D7D7DB!important;
  --newtab-contextmenu-background-color: #4A4A4F!important;
  --newtab-contextmenu-button-color: #2A2A2E!important;
  --newtab-modal-color: #2A2A2E!important;
  --newtab-overlay-color: rgba(12, 12, 13, 0.8)!important;
  --newtab-section-header-text-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-section-active-contextmenu-color: #FFF!important;
  --newtab-search-border-color: rgba(249, 249, 250, 0.2)!important;
  --newtab-search-dropdown-color: #38383D!important;
  --newtab-search-dropdown-header-color: #4A4A4F!important;
  --newtab-search-header-background-color: rgba(42, 42, 46, 0.95)!important;
  --newtab-search-icon-color: rgba(249, 249, 250, 0.6)!important;
  --newtab-search-wordmark-color: #FFF!important;
  --newtab-topsites-background-color: #38383D!important;
  --newtab-topsites-icon-shadow: none!important;
  --newtab-topsites-label-color: rgba(249, 249, 250, 0.8)!important;
  --newtab-card-active-outline-color: #4A4A4F!important;
  --newtab-card-background-color: #38383D!important;
  --newtab-card-hairline-color: rgba(249, 249, 250, 0.1)!important;
  --newtab-card-placeholder-color: #4A4A4F!important;
  --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2)!important;
  --newtab-snippets-background-color: #38383D!important;
  --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1)!important;
  --trailhead-header-text-color: rgba(255, 255, 255, 0.6)!important;
  --trailhead-cards-background-color: rgba(12, 12, 13, 0.1)!important;
  --trailhead-card-button-background-color: rgba(12, 12, 13, 0.3)!important;
  --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.5)!important;
  --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.7)!important;
 }
}

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

You may have to modify these prefs as well.

  • layout.css.moz-document.content.enabled = true
  • layout.css.moz-document.url-prefix-hack.enabled = true


Not OP, but im trying to get this to work, but it doesnt

Edit: Nvm it worked

Bewerkt door Andre op