Search Support

Beware of phishing attacks: Mozilla will never ask you to call a number or visit a non-Mozilla website. Please ignore such requests.

Learn More

How to make the Start Page dark or black

  • 4 uphendule
  • 4 zinale nkinga
  • 57 views
  • Igcine ukuphendulwa ngu 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!

All Replies (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.

Helpful?

more options

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

Helpful?

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

Okulungisiwe ngu cor-el

Helpful?

more options

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

Helpful?

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

Okulungisiwe ngu Andre

Helpful?

Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.