Dark Theme Darkening: Higher Theming For Firefox Quantum

By | July 3, 2018

The Team

Project Darkish Theme Darkening was a half of Michigan State Universitys Pc Science capstone experience. Twenty-four teams of 5 college students had been every assigned an business sponsor based mostly on desire and talent set. We had the privilege of working with Mozilla on Firefox Quantums Theming API. Our mission will increase a customers means to customise the looks of the Firefox browser.

(left to right)
Vivek Dhingra: MSU Scholar Contributor
Zhengyi Lian: MSU Scholar Contributor
Connor Masani: MSU Scholar Contributor
Dylan Stokes: MSU Scholar Contributor
Bogdan Pozderca: MSU Scholar Contributor

Jared Wein: Mozilla Staff
Mike Conley: Mozilla Staff
Tim Nguyen: Volunteer Contributor

The Project

Our objective was to develop upon the present light-weight Theming API in Quantum to permit for extra areas of customization. Themes had the power to change the looks of the default toolbars, however didn’t have the power to fashion menus, or customise auto-complete popups. Our staff additionally labored on including a extra fluid transition when dynamic themes modified to permit for a smoother consumer experience.

Project Video

This video showcases a majority of the enhancements we added to the Theming API and offers a superb rationalization of what our mission was about. Get pleasure from after which learn on for the the rest of the details:

[embedded content]


Prior to this mission, none of us had expertise with Firefox improvement. After downloading the mozilla-central repository and exploring by means of the 40+ million traces of supply, it was a bit daunting for all of us. Our mentors: Jared, Mike, Tim, and the Mozilla neighborhood on IRC all helped us by means of squashing our first bug.

Through the mission, we discovered to ask questions sooner quite than later. Being programmers, we had been cussed and wished to determine our points ourselves however could have solved them lots sooner if we simply merely requested within the Mozilla IRC. Everybody on there could be extraordinarily useful and friendly!

All code written was in JavaScript and CSS. It was neat to see that the UI of Firefox is made in a lot the identical manner as different net pages. We received an awesome introduction to Mercurial by the top of the mission and used some candy instruments to assist our improvement course of equivalent to searchfox.org for listed looking of mozilla-central, and janitor for web-based development.

Auto-complete Popups

We added the power to customise the URL auto-complete popups. With this addition, we had to soak up account the textual content colour of the ac-url and ac-action suggestions related to every consequence. For instance, if the background of the auto-complete popup was darkish, the textual content colour of the information are set to a light-weight colour to permit them to be seen.

We did this by calculating the luminance and evaluating it to a threshold. The lwthemetextcolor attribute is about to both darkish or brilliant based mostly on this luminance threshold:

[“–lwt-text-color”, { lwtProperty: “textcolor”, processColor(rgbaChannels, element) { if (!rgbaChannels) { element.removeAttribute(“lwthemetextcolor”); element.removeAttribute(“lwtheme”); return null; } const {r, g, b, a} = rgbaChannels; const luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b; element.setAttribute(“lwthemetextcolor”, luminance <= one hundred ten ? “dark” : “bright”); element.setAttribute(“lwtheme”, “true”); return `rgba(${r}, ${g}, ${b}, ${a})` “black”; }}]

The high picture exhibits the auto-complete popup with the native default theme whereas the underside picture exhibits the auto-complete popup with the Darkish theme enabled. Discover that the ac-action (Switch To Tab) textual content colour and ac-url are modified to permit them to be extra simply seen on the Darkish background.

Theme Properties Added

We added many new theme properties that builders like you ought to use to customise extra of the browser. These properties include:

icons The colour of toolbar icons.icons_attention The colour of toolbar icons in consideration state such because the starred bookmark icon or completed obtain icon.frame_inactive colour of the accent colour when the window shouldn’t be within the foregroundtab_loading The colour of the tab loading indicator and the tab loading burst.tab_selected The background colour of the chosen tab.popup The background colour of popups (such because the url bar dropdown and the arrow panels).popup_text The textual content colour of popups.popup_border The border colour of popups.popup_highlight The background colour of things highlighted utilizing the keyboard inside popups (such as the chosen URL bar dropdown item)popup_highlight_text The textual content colour of things highlighted utilizing the keyboard inside popups.toolbar_field_focus The centered background colour for fields within the toolbar, such because the URL bar.toolbar_field_text_focus The colour of textual content in centered fields within the toolbar, such because the URL bar.toolbar_field_border_focus The centered border colour for fields within the toolbar.button_background_active The colour of the background of the pressed toolbar buttons.button_background_hover The colour of the background of the toolbar buttons on hover.

The toolbar_field, and toolbar_field_border properties now apply to the Discover toolbar.
Additionally, these new properties now apply to the the native Darkish theme.

colors: { accentcolor: ‘black’, textcolor: ‘white’, toolbar: ‘rgb(32,11,50)’, toolbar_text: ‘white’, popup: “rgb(32,11,50)”, popup_border: “rgb(32,11,50)”, popup_text: “#FFFFFF”, popup_highlight: “rgb(55,36,71)”, icons: “white”, icons_attention: “rgb(255,0,255)”, frame_inactive: “rgb(32,11,50)”, tab_loading: “#0000FF”, tab_selected: “rgb(32,11,50)”,}

Above exhibits an instance of a few of the added properties being set in a theme manifest file and what it seems like within the browser below:


Our staff discovered lots about net browser improvement over the semester of our mission, and we had the chance to put in writing and ship actual production-level code. All the code we wrote shipped with the latest releases of Firefox Quantum 60 and sixty one and can influence thousands and thousands of customers, which is an superior feeling. We wish to thank everybody at Mozilla and the Mozilla neighborhood for giving us this chance and mentoring us by means of the method. We’re looking ahead to seeing what builders and Firefox fans create utilizing the improved Theming API!

More articles by Dylan Stokes

Please check this great service at: http://www.test-net.org/services/country-by-ip/ or visit FREE SERVICES menu
[Total: 0    Average: 0/5]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.