Skip to content


Repository files navigation

Picture Paint

Mozilla Add-on CI status

A dynamic Firefox theme that uses the color palette of the current National Geographic Photo of the Day. The theme automatically updates every day, and you can click the toolbar button to see the picture and click through to the National Geographic page. You can also view past pictures and themes by changing the date in the popup. If you'd like to turn off the automatic updates and keep the theme on a particular date, change the setting in the extension's preferences page.

Picture Paint is available in Firefox Add-ons.

The color palette is determined by color quantization using the image-q package.

Picture Paint was originally created for the Firefox Quantum Extensions Challenge. I wrote a blog post detailing my experience.



Popup coloring: popup coloring

Scroll for picture details: picture details

Preferences: preferences




giraffes and gazelles

marble caves


Golden Gate Bridge


Firefox 63 and above is required. Install the extension from the Add-ons page. It might take a few seconds to process the image and then apply the theme.

Note that it will need permission to "Access your data for all websites." This permission allows it to use the canvas API to process the image and determine the color palette. As far as I can tell, there isn't a narrower permission that I can use instead. Nevertheless, Picture Paint does not read your browsing history or send your data anywhere.

Build Instructions

I use the Node version specified in .nvmrc. Run $ yarn install && yarn run build:release. This should generate the final JavaScript files and place them in extension/js.

Load the development build using about:debugging.

To generate a ZIP file for uploading to Add-ons, run $ yarn run release.

If you have Python 3 and Docker, you can also run $ ./dev for a development CLI.

Other Themes