Changing Home/New Page color scheme

Add-ons Themes
#1

I have had users ask me why one of my themes won’t change the New/Home Page from white to dark when my theme is dark. I know there is no way I can do that with a theme but can someone come up with a fix so a user can change that page from white to dark? Apparently that is something people want since they are asking me. I would actually like to be able to do that also…so some of you smart techies out there come up with an easy fix?

#2

You can actually affect the new tab page, see ntp_background and ntp_text:

#3

Hi, Martin…thanks for responding. The problem is…me…I need some easy instructions to do this. Actually it isn’t just me. Most users are not real technical so I would need easier instructions on telling them how to do this. Actually I will post the instructions on my blog if you would be so kind and have time to send instructions that will be easy for users to follow. I would really appreciate this if/when you have time.

MaDonna

#4

Based on this reply I’m assuming you’ve been using the AMO theme generator and/or Firefox Color. In order to set properties that are not exposed by either of these the steps are as follows:

  1. Download the XPI of your theme from AMO (right click on the install button, or go into “Manage Status & Versions” of your theme and then select the latest version. You should get a download link at the top of the page.
  2. Unpack the XPI file. It is a zip file, so you can just rename it so its file ending is “.zip” instead of “.xpi” and then you should be able to extract its contents. It will include a manifest.json file and any images related to your theme.
  3. Open the manifest.json file in a text editor (a simple editor with colored highlighting that makes it easier to read this file for Windows would be Notepad++). It will look a bit like the example at the top of https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme or on https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Theme_concepts.
  4. Find the bit in the file that says "theme": {"
  5. Make sure the key you want to edit doesn’t exist there yet (all the colors will be inside a "color": { … } section.
  6. If the key already exists, edit its value, else add a line (immediately after the "color": { line) that looks like "ntp_background": "#FFFFFF",. Replace ntp_background with the key name you want to add and #FFFFFF with the color you want. If this is the last line in the "color": { section (so it is followed by } on the next line, don’t add a , at the end of the line, unlike my example above. You can also put as many spaces or tabs in front of what I wrote above as you’d like.
  7. To test your theme, I’m not sure if you can use about:debugging, if you can, see https://developer.mozilla.org/en-US/docs/Tools/about:debugging for details on how that would work
  8. To upload to AMO you should follow https://extensionworkshop.com/documentation/publish/package-your-extension/ to create a .zip file again that includes the updated manifest.json and all the images. You can then upload the zip file as new version on AMO.

I know this goes into scary coding territory, so please let me know if you’re struggling with anything. I have tried to abstract JSON (the declarative syntax manifest.json is written in), however it may help to actually learn the JSON syntax. I don’t know of a good resource to learn JSON, else I’d gladly link you to it. Sadly many assume the knowledge of JavaScript or other programming languages.

1 Like
#5

Thanks, Martin. I appreciate the time you took to follow this through.

#6

Is there an easier fix than that for people to do? Is there someone out there that can figure out an extension or a theme “fix” that would be easy for normal users that aren’t going to take the time or nohow to do the above? Because people are asking me about it and I can’t do anything.

#7

It seems like Firefox Color might have recently gained support for setting these colors as “advanced” color properties. I’ve only checked some of the implementation code and haven’t been able to confirm with the actual extension.

The labels for the new tab related colors should include “New Tab”.

Source: https://github.com/mozilla/FirefoxColor/commit/9234696db11c5ff228eb87dd4b1e3a3ff4ae2e0b

1 Like
#8

Yes, I see and if you are using Firefox Color you can change the new tab color and it works great, but as soon as you change to a theme, it goes back to white. Looks great dark…but it won’t stay that way. Thank you for doing research on this. Really appreciate it.

#9

I have had more questions about making the home page part of a theme. People want the Home page to match the theme they are using. Is there anyway the techs could make this part of the theme so the designers could pick the color of the home page?