Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

How to make the Start Page dark or black

  • 4 பதிலளிப்புகள்
  • 6 இந்த பிரச்னைகள் உள்ளது
  • 402 views
  • Last reply by cor-el

Mirai Chan
Mirai Chan
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!

All Replies (5)

Eve
Eve
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.

gabrinius
gabrinius
more options

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

cor-el
cor-el
  • Top 10 Contributor
  • Moderator
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

cor-el மூலமாக திருத்தப்பட்டது

cor-el
cor-el
  • Top 10 Contributor
  • Moderator
more options

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

Andre
Andre
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

Andre மூலமாக திருத்தப்பட்டது