sober-browser-themes

Sober browser themes, with multiple colors to recognize your profiles at a glance

• What is this?

  • All variations

• Browser requirements

• Why?

• Requirements

• Solution

• TODO list

• Changelog

• Want to fiddle with it?

  • Firefox
  • Chrome

What is this?

This is a repository containing the source code for the creation of the sober dark themes, for Firefox and Chrome.

They look like this:

All variations

Color	Firefox Screenshot	Firefox install link	Chrome Screenshot	Chrome install link
Red	Coming soon	🔗	📷	🔗
Green	Coming soon	🔗	📷	🔗
Blue	Coming soon	🔗	📷	🔗
Yellow	Coming soon	🔗	📷	🔗
Orange	Coming soon	🔗	📷	🔗
Purple	Coming soon	🔗	📷	🔗
Steel	Coming soon	🔗	📷	🔗
Pink	Coming soon	🔗	📷	🔗

Browser requirements

Developed and tested on Ubuntu and:

• Firefox version 69
• Chrome version 77

There are no guarantees that it looks good in earlier versions.

Why?

For people who use browser profiles to work with multiple environments (pro, personal, chat, sensitive, ...), it's nice to have easily recognizable profiles.

Requirements

• sober:
  • no shading
  • no picture as background of home page
• clear: active tab must stand out
• dark: for use with the excellent Dark reader I find it's a must
• with color variations: to easily tell the profiles apart

Solution

I got inspired by Seti UI, my theme for Atom that provides different color variations (that I shamelessly copied because I'm no designer and choosing colors is not something I should be tasked with).

I created a simple theme that looks a lot like Morpheon dark and added variations to change the color of the tabs text.

TODO list

• [x]: Release to the Chrome store
• [x]: Release to Firefox's AMO
• [x]: Write release script - take screenshots (part I Chrome)!
• [ ]: Write release script - take screenshots (part II FF)!
• [ ]: Automatize the release process (push to stores)

Changelog

• 2.0.0:
  • Add Firefox theme
  • Make current tab stand out more on Chrome
• 1.0.0: First version

Want to fiddle with it?

You can build the themes to ./dist with npm run build.

Then you can install them that way.

Firefox

• Open the debugging page
• Click on Load Temporary Add-on...
• Select the file ./dist/firefox-sober-{color}-theme/manifest.json
• Click on Reload each time you change the theme

Checkout Firefox's documentation on themes.

Chrome

• Open the Chrome extensions page
• Check the box Developer mode
• Select Load unpacked extension
• Select one of the variations folder in ./dist/chrome-sober-{color}-theme
• Validate the choice

Checkout Chrome's doc on themes.