{"id":1887,"date":"2026-07-06T16:13:33","date_gmt":"2026-07-06T16:13:33","guid":{"rendered":"https:\/\/blog.mozilla.org\/l10n\/?p=1887"},"modified":"2026-07-06T16:13:33","modified_gmt":"2026-07-06T16:13:33","slug":"giving-pontoons-editor-its-own-theme","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/l10n\/2026\/07\/06\/giving-pontoons-editor-its-own-theme\/","title":{"rendered":"Giving Pontoon’s Editor Its Own Theme"},"content":{"rendered":"
\n

Each year, Mozilla welcomes interns who work alongside our engineering teams on projects that ship to production and improve the experience for contributors around the world. This year, Ayush joined the Firefox Localization team to work on Pontoon, Mozilla’s open source localization platform, where he already tackled several user-facing improvements while learning how large-scale open source software is built.<\/p>\n

In this post, Ayush shares the story behind one of his first projects: giving Pontoon’s translation editor its own appearance settings. From understanding long-standing design decisions to balancing accessibility with user expectations, he walks through both the technical implementation and the product thinking that shaped the feature.<\/p>\n

You can follow Ayush\u2019s work on GitHub<\/a> and connect with him on LinkedIn<\/a>.<\/p>\n<\/blockquote>\n

Introduction<\/h2>\n

Studying Computer Engineering<\/a> with a Professional Experience Year (PEY)<\/a> at the University of Toronto\u2019s Faculty of Applied Science<\/a> gave me a variety of opportunities and companies to choose spending a year interning at. I chose Software Engineering at Mozilla<\/a> because it\u2019s an open source company that puts people first, which matters to me a lot and allows me to equip my portfolio using snippets and examples from real code used in production.<\/p>\n

I joined Mozilla\u2019s Firefox Localization (l10n) team<\/a> as part of Mozilla Corporation<\/a>\u2019s Firefox Desktop Engineering Team, based in Downtown Toronto. I officially began my internship on Friday, May 1, 2026, but I unofficially began in mid February. Since my team\u2019s flagship product\u2019s (Pontoon<\/a>) codebase is entirely open source, I talked to both my manager<\/a> and Pontoon owner<\/a> right after signing my offer and got early access to our weekly meetings and some confidential data. I then started to learn as much as I possibly could.<\/p>\n

\"\"<\/a><\/p>\n

Even before I started learning the codebase<\/a>, just looking at the Pontoon\u2019s default translation UI was rather interesting because of our editor pane\u2019s glaring white color in dark mode\/theme.<\/p>\n

\"\"<\/a><\/p>\n

Even though I saw the issue (#4001)<\/a> filed for working on that, I thought that the stark contrast was a stylistic choice because an average user would spend most of their time on said pane editing strings anyway, so I just went on with it.<\/p>\n

\"\"<\/a><\/p>\n

However, once I officially started to work, I got my onboarding document and saw my starting set of issues. That\u2019s where I came across the very same issue (#4001)<\/a> on my todo batch, which made me very happy since I could address it and I\u2019d already looked at the surrounding context before working with it.<\/p>\n

The Original Experience<\/h2>\n

At first, the user could only change Pontoon\u2019s appearance from their `profile menu` or Pontoon\u2019s `\/settings` page<\/a>. This is where they have the ability to change their appearance to `dark mode`, `light mode`, or keep the `system theme` that matches their device\u2019s preferences.<\/p>\n

\"\"<\/a>

This is the view from Pontoon\u2019s Settings page.<\/p><\/div>\n

\"\"<\/a>

This is the view from Pontoon\u2019s Profile menu.<\/p><\/div>\n

\"\"<\/a>

Ironically, the dark appearance warrants a light themed `editor pane`.<\/p><\/div>\n

\"\"<\/a>

There is also no option to change the `editor pane` appearance from the `editor menu`.<\/p><\/div>\n

Design Considerations<\/h2>\n

In general, when a product has a large, established user base that has grown accustomed to a particular interface, it’s important to approach visual changes with care. Even if a redesign is arguably more visually appealing and offers clear accessibility benefits, changing familiar workflows and appearance can still disrupt the user experience.<\/p>\n

In fact, according to this Mozilla Research<\/a> article I read, which explored browser choice design interventions<\/a>, \u201cIt is important that the organizations tasked with designing and regulating current and future interventions (including browser choice screens) are mindful of the design principles we have articulated with this research.\u201d<\/p>\n

Even though the relevance of said research<\/a> is for the browser use-case, the impacts are for a user interface design like in this blog, as the article also mentions \u201cThe inertia is a strong force to overcome\u201d, and Pontoon\u2019s inertia dates back over a decade.<\/p>\n

This meant that if we were to change the editor pane color, we would have to allow the user to have things as they currently are.<\/p>\n

The New Experience<\/h2>\n

In the update Appearance section of the Settings page<\/a>, users have the ability to change the main interface as before, but now have the ability to update editor to `dark mode`, `light mode`, or match their `main interface theme` to automatically sync the colors.<\/p>\n

The editor theme remains light by default, regardless of the main interface theme.<\/p>\n

\"\"<\/a>

This is the view from Pontoon\u2019s Settings page.<\/p><\/div>\n

\"\"<\/a>

Editor appearance can also be quickly changed from the editor menu.<\/p><\/div>\n

\"\"<\/a>

This UI now matches the dark theme, either by explicitly selecting it or matching the main interface theme.<\/p><\/div>\n

\"\"<\/a>

Since the issue was with `dark interface mode` having a `light editor`, setting the default `editor` to `light` neatly agreed with how the UI looked before the changes were brought in.<\/p><\/div>\n

Looking Ahead<\/h2>\n

These changes neatly allow the user to modify their theme keeping their general preferences in mind. The change is also remembered by Pontoon and stays consistent at every instance the user logs back in.<\/p>\n

Furthermore, we now track if the user has interacted with the `editor theme` which gives us knowledge on if we want to eventually change the default editor theme, addressing the concerns of `UI inertia` brought up in Mozilla\u2019s research<\/a>.<\/p>\n

For more information and technical details, please visit: https:\/\/www.ayshush.us\/mozilla\/issue-notes\/4001<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Each year, Mozilla welcomes interns who work alongside our engineering teams on projects that ship to production and improve the experience for contributors around the world. This year, Ayush joined … Read more<\/a><\/p>\n","protected":false},"author":451,"featured_media":1900,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137,286406],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/posts\/1887"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/users\/451"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/comments?post=1887"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/posts\/1887\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/media\/1900"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/media?parent=1887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/categories?post=1887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/l10n\/wp-json\/wp\/v2\/tags?post=1887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}